• 需要用到的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);