zTree demo

使用zTree的一个demo

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

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

项目中用到的一些方法 

1、

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

2、

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

 3、修改指定节点的样式

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

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

getFont

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

设置样式的代码

   // 通过ID获取节点
        var node1_new_click = zTree.getNodeByParam("id", treeNode.id, null);

        // 这种指定节点的样式，要用到updateNode
        node1_new_click.font = {'color': '#3aa8e8'}
        zTree.updateNode(node1_new_click);

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

4、拖拽

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

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

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