requirejs整合ztree

{block name='script'}

<script>

    require(['jquery.ztree'], function () {
        var zTreeObj;
        var setting = {
            view: {
                showIcon: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: zTreeOnClick
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"課程目錄", open:true},
            { id:11, pId:1, name:"季度產品知識課程", open:true},
            { id:111, pId:11, name:"13Q4產品知識", },
            { id:112, pId:11, name:"14Q1產品知識", },
            { id:113, pId:11, name:"14Q2產品知識", },
            { id:114, pId:11, name:"14Q3產品知識", },
            { id:115, pId:11, name:"14Q4產品知識", },
            { id:12, pId:1, name:"項目宣講類課程", open:true},
            { id:121, pId:12, name:"項目宣講類課程1"},
            { id:122, pId:12, name:"項目宣講類課程2"},
            { id:123, pId:12, name:"項目宣講類課程3"},
            { id:13, pId:1, name:"移動商學院", open:true},
            { id:131, pId:13, name:"技能類"},
            { id:132, pId:13, name:"心態類"},
            { id:133, pId:13, name:"知識類"},
            { id:134, pId:13, name:"哈哈類"},
        ];

        zTreeObj = $.fn.zTree.init($("#zTree"), setting, zNodes);
        function zTreeOnClick(event, treeId, treeNode) {
            //這裏定義點擊書中節點時，相應的頁面其餘的操做，示例：
            // 每次點擊節點後， 彈出該節點的 tId、name 的信息
            alert(treeNode.tId + ", " + treeNode.name);
        };
    });
</script>

{/block}

　　

<div class="layui-row">

    <div class="layui-col-xs6 layui-col-md2">
        <style>
            .ztree {  margin: 0;  padding: 5px;  color: #333;  padding: 10px;  border: 1px solid #ddd;  overflow: auto;  }
            .ztree * {  padding: 0;  margin: 0;  font-size: 14px;  font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;  }
            .ztree li a {  padding: 1px 3px 0 0;  margin: 0;  cursor: pointer;  height: 26px;  color: #333;  background-color: transparent;  text-decoration: none;  vertical-align: top;  display: inline-block;  }
            .ztree li a.curSelectedNode {  padding-top: 0px;  background-color: #FFE6B0;  color: black;  height: 26px;  border: 1px #FFB951 solid;  opacity: 0.8;  }
            .ztree li span.button.ico_docu {  margin-right: 2px;  background-position: -110px -32px;  vertical-align: text-bottom;  }
            .ztree li span {  line-height: 26px;  margin-right: 2px;  }
       </style>
        <ul id="zTree" class="ztree loading">
            <li></li>
        </ul>


    </div>
    <div class="layui-col-xs12 layui-col-md10" style="padding-left: 10px;">
    </div>
</div>