ZTree自定义不可展开节点的折叠图标

1. 场景

需求是自定义去控制某个节点，让它不可以展开，但因为它底下有子节点，所以默认的折叠图标还是＋号。
也就是要实现让不可展开的节点前的折叠图标显示-号，这样就不会误导用户再去展开该节点。（勾选节点后，底下的子节点是在右边显示的，需求就是这样哒）

2. 实现过程

让节点不可以展开，这个比较好实现，使用beforeExpand回调函数就可以阻止节点展开了。返回一个布尔值，返回false就无法展开该节点了。

✨查询ZTree所有api 网址：ZTree官方文档

比较棘手的是，让无法展开的节点的折叠图标显示为-号。这个问题卡了有好几天，在网上搜了很多方法试过都不管用。隔了几天后，终于弄成了~

先在浏览器中打开开发者工具，选中节点前的折叠/ 展开元素，查看使用的背景图，发现它们父元素使用的是一张大的背景图片，不同的按钮通过background-position 去获取不同的图标。

折叠和展开节点时，会发现它们的类名在切换，不同类名下设置的background-position不同。所以，就可以获取到该折叠按钮，给它添加自定义类名，设置background-position去覆盖之前的图标。

怎么去获取到该折叠按钮呢？setting.view.addDiyDom去获取到该元素，再添加自定义类名。

const setting = {
	view: {
		...
      addDiyDom: function (treeId, treeNode) {
        console.log(`output->`,treeNode)// 得到的是每层展开节点下的子节点
        if (treeNode.code === 'demo') {
          var beforeBtn = $(`#${treeNode.tId}_switch`); // 获取节点前的折叠展开按钮
          if (beforeBtn) {
            beforeBtn.addClass('my-icon'); // 添加自定义 CSS 类名
          }
        }
      },
    },
    	...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. ZTree 关键配置代码

const onBeforeExpand = (treeId, treeNode) => {
  if (treeNode.code !== 'demo') {// 节点不可展开的判断条件
    return true;
  }
  return false;
};
  const setting = {
    view: {
      selectedMulti: true,
      showIcon: true,
      showTitle: true,
      addDiyDom: function (treeId, treeNode) {
        if (treeNode.code === 'demo') {
          var beforeBtn = $(`#${treeNode.tId}_switch`); // 获取节点前的折叠展开按钮
          if (beforeBtn) {
            beforeBtn.addClass('my-icon'); // 添加自定义 CSS 类名
          }
        }
      },
    },
    check: {
      enable: true,
      chkStyle: 'checkbox',
    },
    data: {
      key: {
        name: 'name',
        children: 'children',
        title: '',
      },
      simpleData: {
        enable: true,
        idKey: 'id',
        pIdKey: 'pid',
        rootPId: '-1',
        nocheck: true,
      },
    },
    callback: {
      onCheck: onNodeCheck,
      beforeExpand: onBeforeExpand,
    },
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

.ztree li span.button.bottom_open {
  background-position: -105px -42px;
}
.ztree li span.button.bottom_close {
  background-position: -126px -42px;
}
//上面两个时默认的图标，这个是添加的自定义类名
.ztree li span.button.bottom_close.my-icon{
  background-position: -105px -42px;
}
1
2
3
4
5
6
7
8
9
10

4. 小结 💬

• 遇到比较棘手/ 没有解决思路的问题，在试了许多方法后。仍不能解决，可以先缓一缓，说不定过几天就灵光一现了！！✨（在不紧急的情况）
• 被问题卡壳时，要知道卡壳点是什么？将问题具体化，精准定位问题。（不知道自己的目标，也会不清楚网上搜索出的答案是否会对你有用）
• 希望自己可以及时记录，坚持更新🕓