zTree demo

使用zTree的一个demo

官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

demo地址：https://github.com/zhaobao1830/zTreedemo

项目中用到的一些方法

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  // 这种指定节点的样式，要用到updateNode
8  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         // 这种指定节点的样式，要用到updateNode
5         node1_new_click.font = {'color': '#3aa8e8'}
6         zTree.updateNode(node1_new_click);

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

4、拖拽

http://www.treejs.cn/v3/demo.php#_511

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

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