Skip to content

Ztree 勾选父类时忽略其所有子类数据,其它正常,如何配置

Kyle Bing edited this page Nov 4, 2020 · 2 revisions

需求

ztree 需要实现这么一个需求:

当点选父级时,不管子级有没有点选,都只取父级的数据。比如下面这样的选择,最终需要得出的选中项只有两个。 阳信包含其下面所有的元素。

ztree-select

服务器返回的数据格式如下:

data_json

思路

ztree 官方说明中没有这样的配置选择,所以需要自己处理。

ztree API 说明: http://www.treejs.cn/v3/api.php

我们需要先看一下数据特点,每条数据都有自己的 pid 和 自己的 id。并且有自己的数据深度值。

我们可以通过已有 ztree API 得到所有已经选中的数据。 需要的就是把无用的去掉,需要筛选一下。

从最深处的数据开始,把这个等级的数据一一拿出,取出它的父 id,然后用这个父id去跟其它每条数据对比,如果有数据的id 跟这个父 id 一样,说明当前数据的父级已经被选中了,这条数据就可以去除了。去除当前数据后后面的数据排到当前位置,所以当前循环的 index 不用变。再进行上面的操作,当循环结束后。深度值减一级,再进行循环,最终就只剩下符合要求的数据了。

getSelectedNodes: function () {
    // 获取选中的节点
    var nodes = regionTree.getCheckedNodes(true);

    if (nodes.length) {
        // 获取级别最大深度 和 最小深度
        var maxLevel = 0;
        var minLevel = nodes[0].level;
        for (var i = 0; i < nodes.length; i++) {
            maxLevel = maxLevel < nodes[i].level ? nodes[i].level : maxLevel;
            minLevel = minLevel > nodes[i].level ? nodes[i].level : minLevel;
        }
        // 处理层级数据
        // 当父类选中时,忽略其所有子类数据。保存正常数据
        for (var level = maxLevel; level > minLevel; level--) {
            for (var i = 0; i < nodes.length;) {
                var currentNode = nodes[i];
                if (currentNode.level === level) {
                    var currentPid = currentNode.pid;
                    if (nodes.some(node => node.id === currentPid)) {
                        nodes.splice(i, 1); // 删除当前数据,不向前进一,还取原有位置的数据
                    } else {
                        i++
                    }
                } else {
                    i++
                }
            }
        }
        var selectedRegions = [];
        var selectedRegionNames = [];
        nodes.forEach(item => {
            selectedRegions.push(item.id);
            selectedRegionNames.push(item.name)
        })
        return [selectedRegions, selectedRegionNames];
    } else {
        return [[],[]]
    }
},

最终效果

result