ld-ztree.tpl
<div class="ld-ztree-container"> <div class="ld-ztree-header text-center" id="header"> <b>树状图</b> </div> <div class="ld-ztree-main ztree" ld-comp="ztree" ld-bind-data="treeData" ld-tree-type="checkbox"> <!--<ul class="ld-ztree"> <li><span class="Ztree">产品1</span> <ul> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span> <ul> <li><span class="Ztree">产品1</span></li> </ul> </li> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span></li> </ul> </li> <li><span class="Ztree">产品1</span> <ul> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span> <ul> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span></li> <li><span class="Ztree">产品1</span></li> </ul> </li> <li><span class="Ztree">产品1</span></li> </ul> </ul> !--> </div> <div class="ld-ztree-footer text-center" id="footer"> <button class="btn btn-primary ld-margin-right30">确定</button> <button class="btn btn-default">取消</button> </div> </div>
ld-ztreeview.js
define(['ldfw/core','text!tpl/example/ld-ztree.tpl'],function(LDFW,tpl){ return LDFW.Container.extend({ el:'#app', tpl:tpl, initialize:function(){ var zNodes=[ {id:1,pId:0,name:"产品1",open:true}, {id:11,pId:1,name:"产品1"}, {id:12,pId:1,name:"产品1"}, {id:13,pId:1,name:"产品1",open:true}, {id:131,pId:13,name:"产品1"}, {id:14,pId:1,name:"产品1"}, {id:15,pId:1,name:"产品1"}, {id:2,pId:0,name:"产品1",open:true}, {id:21,pId:2,name:"产品1"}, {id:22,pId:2,name:"产品1"}, {id:23,pId:2,name:"产品1",open:true}, {id:231,pId:23,name:"产品1"}, {id:232,pId:23,name:"产品1"}, {id:231,pId:23,name:"产品1"}, {id:231,pId:23,name:"产品1"}, {id:24,pId:2,name:"产品1",open:false}, {id:241,pId:24,name:"产品1"} ]; var _this = this; this.model.set("treeData",zNodes); } }); });
效果图