{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>
原文:http://www.cnblogs.com/meetrice/p/7507922.html