场景: 树的节点名字需要显示一些额外的信息。比如名字是 阿里云(100) 100这个是我当前节点的内容之一,目前由于ztree没有支持render回调函数,没法拼接内容得到。
下载ztree js源码,可以知道树节点的显示名字是由getNodeName得到,所以出发点就是修改这个函数,修改如下。
getNodeName: function (setting, node) {
var text = setting.data.key.nameFormat;
if (setting.data.key.nameArray && text) {
for (var i=0;i!=setting.data.key.nameArray.length;++i) {
text = text.replace("%s",node[setting.data.key.nameArray[i]]);
}
return text;
}
var nameKey = setting.data.key.name;
return "" + node[nameKey];
}
使用例子,数组nameArray为节点内容的key,%s为对应的替换位置。
ztree = $.fn.zTree.init($("#treeDemo"), {
view: {
showIcon: false
},
data:{
key:{
nameArray:["name","sum"],
nameFormat:"%s(%s)"
}
}, chooseTree);
修改后压缩的cdn链接:
http://webcenter.oss-cn-hangzhou.aliyuncs.com/ztree/jquery.ztree.core.min.js