zTree插件的应用

• 需要用到的js和css文件

  <link rel="stylesheet" href="__PUBLIC__/zTree/css/demo.css" type="text/css">
          <link rel="stylesheet" href="__PUBLIC__/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
          <link rel="stylesheet" href="__PUBLIC__/ztree/css/metroStyle/metroStyle.css" type="text/css">
          <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
          <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
          <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
          <script type="text/javascript" src="__PUBLIC__/zTree/js/jquery.ztree.core-3.5.js"></script>
          <script type="text/javascript" src="__PUBLIC__/ztree/js/jquery.ztree.excheck-3.5.js"></script>
          <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

   

• 设置ztree在dome中的位置（ul 的class必须为ztree）

  <div id="ztreeBodyDiv">
        <ul class="ztree" id="myTree"></ul>
        
        </div>

生成列表

var _ql_ ={};
     _ql_.zTree  = null;

function newTree( zNodes ){
        var setting = {
            keep: {
                leaf: true,
                parent: true
            },
            data: {
                //数据设置别名，与后台传入的数据对应
                simpleData: {
                    enable: true,
                    idkey : "id",
                    pIdKey: "pid"
                    //rootPId: 0
                }
            },
            //回调函数
            callback: {
                //onClick: treeOnClick,
                onRightClick: treeOnRightClick
            }
            
        };
        $("#myTree").html('');
        //初始化zTree
        $.fn.zTree.init($("#myTree"), setting, zNodes);
        //获取zTree对象
        _ql_.zTree = $.fn.zTree.getZTreeObj("myTree");
        
    }

• post返回后台的数据，并显示列表

   function getTreeList(){
          var nt = new Date().getTime()
              ,pobj = { nt: nt }
              ,url  = "{:U('createTree')}"
              ;
              
          (function( fpobj, furl ){
              $.post( furl, fpobj, function(json){
                   
                  newTree( json );
              }, 'json' );
          })(pobj,url);    
      }
      getTreeList();

• 添加节点   

1. 可通过_ql_.zTree对象（即生成的列表对象）的getSelectedNodes()方法获取被选节点及其子节点，返回的是array类型，

       var nodes = _ql_.zTree.getSelectedNodes();//返回被选节点数据
           _ql_['del_seledNode'] = nodes;//用全局对象保存被选节点数据

    

2. 添加节点

   var qlas = _ql_['add_seledNode']；
   if(pobj["pid"] ===1){//判断是否为根节点，后台根节点的id设置为1
                   //为根节点时，第一个参数是插入节点的父节点的数据，第二个参数是插入节点的数据
                   var a = _ql_.zTree.addNodes(null,json.data);
               
               }else{
                   //为非跟节点时，第一个参数是插入节点的父节点的数据，第二个参数是插入节点的数据

    var b =_ql_.zTree.addNodes(qlas[0],json.data); } 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
   

• 修改节点

1. 可通过_ql_.zTree对象（即生成的列表对象）的getSelectedNodes()方法获取被选节点及其子节点，返回的是array类型，
2. 修改节点

     node.name = json.data;//后台传回修改的数据
     _ql_.zTree.updateNode(node);//修改节点名称

• 删除节点

1. 可通过_ql_.zTree对象（即生成的列表对象）的getSelectedNodes()方法获取被选节点及其子节点，返回的是array类型，
2. 删除节点

   var pnode = nodes[0].getParentNode();//获取被选节点的父节点数据
                   //遍历被选节点，及其子节点并删除
                   for(var i=0;i<nodes.length;i++){
                       _ql_.zTree.removeNode(nodes[i]);
                   }
                   //设置可添加子节点
                   pnode.isParent = true;
                   //更新被选节点的父节点的数据
                   _ql_.zTree.updateNode(pnode);