使用zTree的一个demo

官网：

demo地址：

项目中用到的一些方法 

1、

1  //获得树形图对象2 var zTree = $.fn.zTree.getZTreeObj("treeDemo");3 //获取根节点个数,getNodes获取的是根节点的集合4  var nodeList = zTree.getNodes();5 //展开第一个根节点6 zTree.expandNode(nodeList[0], true);

2、

1  // 通过tId获取到这个节点2  var node = zTree.getNodeByTId(nodeList_0_tId);3  console.log(node)4  // 通过ID获取节点5  var node1 = zTree.getNodeByParam("id", 2, null);6  console.log(node1)7  // 这种指定节点的样式，要用到updateNode8  zTree.setting.view.fontCss["color"] = '#3aa8e8'9  zTree.updateNode(node);

 3、修改指定节点的样式

现在setting里的view设定fontCss,指定一个方法getFont

1 var setting = {2         view: {3             fontCss: getFont,4             selectedMulti: false, // 是否允许同时选中多个节点5             addHoverDom:addHoverDom, // 鼠标移动到节点触发的事件6             removeHoverDom:removeHoverDom // 鼠标移开节点触发的事件7         },

getFont

1 //    @method 设置节点样式，必须用这个方法（这是zTree插件必须的）2 //    @ params node 当前节点3     function getFont(treeId, node) {4         return node.font ? node.font : {};5     }

设置样式的代码

1    // 通过ID获取节点2         var node1_new_click = zTree.getNodeByParam("id", treeNode.id, null);3 4         // 这种指定节点的样式，要用到updateNode5         node1_new_click.font = {
   'color': '#3aa8e8'}6         zTree.updateNode(node1_new_click);

这样就可以设置指定节点的样式了

4、拖拽

5、选择的时候，改为单选

chkStyle: "radio",  // 选择框为单选radioType: "all" // 在整棵树范围内当做一个分组