requirejs整合ztree

Posted 2020-10-06 酶技术

{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>