【前端技术】ztree.js 扩展name自定义格式

最新推荐文章于 2022-08-05 13:55:21 发布

喜欢吃一口烤肉的啵啵

最新推荐文章于 2022-08-05 13:55:21 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/bojie5744/article/details/78561030

前端相关专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何通过修改ZTree的getNodeName函数来实现自定义节点名称格式，展示了一个具体示例，即如何在节点名中包含额外信息如括号内的数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：树的节点名字需要显示一些额外的信息。比如名字是阿里云（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