ztree 使用 简单案例

1.      下载ztree树；

2.      在页面上引用；

<link
rel="stylesheet"
href="*/ztree/css/zTreeStyle/zTreeStyle.css"
type="text/css"></link>
<script
type="text/javascript"
src="*/ztree/js/jquery.ztree.all-3.5.min.js"></script>

（我使用的是3.5的版本）

3.  在body中新建一个<ul></ul>用于显示树，注意，设定class=”ztree”

例如：<ul
id="tree"class="ztree"></ul>
4.  使用javascript，填充body中的ul:
    <script>
           var setting = {
              data: {
                  simpleData:{
                     enable: true//是否显示父子节点
                  }
              },
              callback:{
                  onClick: selectArticleByColumn 
//点击事件，只写函数名称即可，函数需要三个参数：event，treeId,treeNode;treeNod内有，treeNode.id
treeNode.name
              }
           };
           var treeNodes2 = ${columnList};//从后台传过来的数据，JOSN格式；
           $(function() { 

               //$("#tree").zTree(setting, treeNodes); 

              $.fn.zTree.init($("#tree"), setting, treeNodes2);
               //动态添加一个根目录
               //var treeObj = $.fn.zTree.getZTreeObj("tree");
              //var newNode ={name:"栏目标待定"};

              //newNode =treeObj.addNodes(null, newNode);

           });
       </script>
注意：上述例子是从后台传过来的list集合，但是list中对象的属性应该包含id,pId两个属性，id为改对象的id,pId为父对象的id,一定要有这两个属性，如果你的对象中已经有parent_id了，也要有pid属性，如果没有，该插件无法识别。