Ztree的日常使用记录

1. 树节点名称中使用超文本标签

view.nameIsHTML设置为true即可

var setting = {
    view: {
        nameIsHTML: true
    },
    check: {
        enable: true
    },
    data : {
        simpleData : {
            enable : true
        }
    }
};

2. 使用自定义的title显示

view.showTitle设置为true, 在data.key中声明title对应的字段名即可

var setting = {
    view: {
        showTitle: true
    },
    check: {
        enable: true
    },
    data : {
        simpleData : {
            enable : true
        },
        key : {
            title: 'title'
        }
    }
};

3. 节点点击事件监听

callback.onClick设置回调函数即可

var setting = {
    check: {
        enable: true
    },
    data : {
        simpleData : {
            enable : true
        }
    },
    callback : {
        onClick : function (event, treeId, treeNode) {
            console.log(treeNode.name);
        }
    }
};

4. 使用编辑、删除、拖拽移动功能

edit中设置相关按钮的显示

var setting = {
    check: {
        enable: true
    },
    edit: {
        drag: {
            isMove: true        // 打开移动功能,鼠标左键点击后拖拽
        },
        enable: true,                       //编辑节点必须设置该字段,并且编辑状态包括修改和删除,所以如果设置true
        editNameSelectAll : true,           //删除按钮和修改按钮都会出现
        showRenameBtn : true,               //默认值就是true,可以不写的
        removeTitle: "删除节点",             //删除按钮名称
        renameTitle: "修改节点",             //修改按钮名称
        showRemoveBtn: function showRemoveBtn(treeId,treeNode){     //选做，可以删除这一行
            return treeNode.pId != '0'; // 根节点不显示删除按钮
        }
    },
    data : {
        simpleData : {
            enable : true
        }
    },
    callback : {
        beforeRemove : function (treeId, treeNode){//删除前的回调函数
            return true;
        },
        onRemove: function(treeId, treeNode) {//删除回调函数
            console.log(treeId + "被删除");
        },
        beforeDrop: function (treeId, treeNodes, targetNode, moveType) {// 拖拽回调 moveType为inner、prev、next
            console.log(treeId + "被拖拽");
            return true;
        },
        beforeRename :  function (treeId, treeNode, newName, isCancel){//修改前的回调函数
            return true;
        },  
        onRename: function (event, treeId, treeNode){//修改回调函数
            console.log(treeNode.id + "的新名字" + treeNode.name);
        }
    }
};

5. 获得所有选中节点

function getChecks() {
    var treeObj = $.fn.zTree.getZTreeObj("zTree");
    var nodes = treeObj.getCheckedNodes(true);
    var array = new Array();
    for (var i = 0; i < nodes.length; i++) {
        array.push(nodes[i].id); //获取选中节点的值
    }
    return array.join(",");
}

6. 节点勾选事件监听

callback.onCheck设置回调函数即可

var setting = {
    check: {
        enable: true
    },
    data : {
        simpleData : {
            enable : true
        }
    },
    callback : {
        onCheck : function (event, treeId, treeNode) {
            console.log(treeNode.checked);
        }
    }
};

7. 根据自定义规则搜索节点

getNodesByFilter(filterFunction, isSingleBoolean, parentNodeJSON, invokeParam);

Function 参数说明

filterFunction

自定义过滤器函数 function filter(node) {...}

filter 参数：node (节点数据 JSON)

filter 返回值：boolean (true 表示符合搜索条件；false 表示不符合搜索条件)

isSingleBoolean

isSingle = true 表示只查找单个节点

isSingle = false 表示查找节点集合

忽略此参数，表示查找节点集合

parentNodeJSON

可以指定在某个父节点下的子节点中搜索

忽略此参数，表示在全部节点中搜索

invokeParam任意类型

用户自定义的数据对象，用于 filter 中进行计算

function getRootNode(node) {
    return node.level == 0;
}

var zTree = $.fn.zTree.getZTreeObj("zTree");
var nodeRoot = zTree.getNodesByFilter(getRootNode, true);

console.log(nodeRoot.id);



       

8. 单击树

var setting = {                
    check: {
        enable: true,
        chkStyle: "radio"
    },
    data : {
        simpleData : {
            enable : true
        }         
    },
    callback : {
        onCheck : function(event, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("leftTree");
            var nodes = zTree.getCheckedNodes();
            // 先将所有的选中改为未选中
            for(var i = 0; i < nodes.length ; i++) {
                if(treeNode.id != nodes[i].id) {
                    nodes[i].checked = false;
                    zTree.updateNode(nodes[i]);
                }
            }
        }
    };

var zTree = $.fn.zTree.init($("#leftTree"), setting, data);
zTree.expandAll(true);

9. 强行刷新异步树

var node = zTree.getSelectedNodes()[0];
zTree.reAsyncChildNodes(node, 'refresh', false);