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>