zTree 3-- jQuery 树插件笔记

地址：http://www.treejs.cn/v3/demo.php#_507

数据结构json，里可以自定义属性。

 

var zNodes =[
            { name:"父节点1 - 展开", open:true,id:'123',number:'345',
                children: [
                    { name:"父节点11 - 折叠",id:'123',number:'345',
                        children: [
                            { name:"叶子节点111",id:'123',number:'345',
                                children: [
                                    { name:"叶子节点111",id:'1234',number:'345'},
                                    { name:"叶子节点112",id:'123',number:'345'},
                                    { name:"叶子节点113",id:'123',number:'345'},
                                    { name:"叶子节点114",id:'123',number:'345'}
                                ]
                            },
                            { name:"叶子节点112",id:'123',number:'345'},
                            { name:"叶子节点113",id:'123',number:'345'},
                            { name:"叶子节点114",id:'123',number:'345'}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"父节点13 - 没有子节点", isParent:true}
                ]},
            { name:"父节点2 - 折叠",
                children: [
                    { name:"父节点21 - 展开", open:true,
                        children: [
                            { name:"叶子节点211"},
                            { name:"叶子节点212"},
                            { name:"叶子节点213"},
                            { name:"叶子节点214"}
                        ]},
                    { name:"父节点22 - 折叠",
                        children: [
                            { name:"叶子节点221"},
                            { name:"叶子节点222"},
                            { name:"叶子节点223"},
                            { name:"叶子节点224"}
                        ]},
                    { name:"父节点23 - 折叠",
                        children: [
                            { name:"叶子节点231"},
                            { name:"叶子节点232"},
                            { name:"叶子节点233"},
                            { name:"叶子节点234"}
                        ]}
                ]},
            { name:"父节点3 - 没有子节点", isParent:true}

        ];

点击下拉框
var setting = {
      view: {
        showIcon: false,
        selectedMulti: false
        
      },
      data: {
        simpleData: {
          enable: true
        }
      },
      callback: {

        onClick:onClick ,//回调函数点击触发

      }
    };

    
    function onClick(e, treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
      nodes = zTree.getSelectedNodes(),
      // nodes = zTree.getCheckedNodes(),

      v = "";
   
      $("#hidden_dept_selected_id").attr("value",nodes[0].id);
      nodes.sort(function compare(a,b){return a.id-b.id;});
      for (var i=0, l=nodes.length; i<l; i++) {
        v += nodes[i].name + ",";
      }
      if (v.length > 0 ) v = v.substring(0, v.length-1);
      var cityObj = $("#citySel");
      cityObj.attr("value", v);
    }

    function showMenu() {  
      var cityObj = $("#citySel");
      var cityOffset = $("#citySel").offset();
      $("#menuContent").slideDown("fast");

      $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {                                               //点击输入框显示下拉列表然后点击空白隐藏
      $("#menuContent").fadeOut("fast");
      $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
      if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
        hideMenu();
      }
    }
    

 

     
     var zNodes= <?php echo $output['json_dept_edit']; ?>;　　　　//获取数据源从后台
     var pid= <?php echo $output['parentid']; ?>;　　　　　　　　　　 //如果两个页面中有传值情况，会从上一个页面中选中的id拿到本页面中

   

    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);　　　　　　  //初始化ztree


     console.log(pid);
      var treeObj = $.fn.zTree.getZTreeObj("treeDemo");　　　　     //得到数据源
      var node = treeObj.getNodeByParam("id",pid);                 //通过id找对应的数据json

      treeObj.selectNode(node);　　　　　　　　　　　　　　　　　　　　　　//通过id去让默认的对应选项高亮
       var cityObj = $("#citySel");　　　　　　　　　　　　　　　　
       cityObj.attr("value", node.name);    　　　　　　　　　　　　
       $("#hidden_dept_selected_id").attr("value",pid);
    });