zTree 自定义规则的全选

计算覆盖区域，前端使用zTree，来显示全国各省市区。举个栗子：用户选中了南京下面的所有区域（雨花区。。）， 这时候计算的覆盖区域应该为南京市，同理，所有江苏下面的市被选中，覆盖区域就为省。一开始想着还挺简单，后来发现太navie了。

 

为什么？

zTree的状态如，hide，disabled在判断节点是否全选时，不纳入计算范围，ztree会自动过滤这些节点。

简单地说，比如南京下面已经有三个区域已经被选则了，在新添加的覆盖区域中，这三个区域会被隐藏，这是全选南京市，其实不是真正的南京市，而应该是剩下的区域。但是ztree默认的getCheckNode做不到。因为这不通用，涉及到具体的业务规则。同理，在编辑一个区域时，子区域被勾选后，显示disabled，不能再勾选，也不能取消勾选，因为子关联了该区域，父区域必须包含。

 

在试了很多的解决方案后，发现通过UI的一个hide，或者disabled完全不能实现目前的功能时，静下来仔细的思考这个问题。问题的瓶颈在于对全选规则的判断。默认的全选规则不适合我们的业务。需要自定义我们的规则。于是，查看官方api，写了一个自己的算法，解决问题。

 

思路：

1. 选择了全国，就意味着全选了所有节点，判断规则为，当前选中的节点数和全国各地市的节点数是否一致。

           //获取当前的树对象
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            
            //获取所有全选的的节点
            var isAllNodeChecked = function() {
                var allCheckNodes = zTree.getNodesByFilter(function(node) {
                    var status = node.getCheckStatus() || {};
                    return status.checked && !status.half;
                });

                return allCheckNodes.length == zNodes.length;
            }

            console.log('isAllNodeChecked->', isAllNodeChecked());

            //如果全选，直接返回086
            if (isAllNodeChecked()) {
                return ['086'];
            }

 

 

2. 遍历所有的叶子节点（区/县），根据这些叶子节点转化为市对象，市对象的key为市id，子为叶子节点的数组，根据市id获取市节点children的数量，和当前选择的子节点数量做对比，就知道是不是真正的全选。

    

          //过滤出所有的选中或者disabled的叶子节点
            function filterLeafNodes(node) {
                var isLeaf = node.level == 2;
                var isCheck = node.checked;
                var isDisabled = node.chkDisabled;

                return isLeaf && (isCheck || isDisabled);
            }

            //所有的叶子节点
            var leafNodeList = zTree.getNodesByFilter(filterLeafNodes);

            //市对象，由叶子节点转换而来
            var cityObj = {};
            //市id，为了保证顺序
            var cityIds = [];
           
            //叶子节点转化为市对象
            $.each(leafNodeList, function(_, node) {
                console.log(node.id, node.pId, node.name);

                var id = node.id;
                var pid = node.pId; //注意低版本的zTree，是node.pid;

                if (cityObj[pid]) {
                    cityObj[pid].push(id);
                } else {
                    cityIds.push(pid);
                    cityObj[pid] = [id];
                }   
            });

            console.log('cityObj->', cityObj);

     

3. 市对象转化为省对象，原理同上；

            //省
            var provObj = {};
             //省id，为了保证顺序
            var proIds = [];

            $.each(cityIds, function(_, id) {
                //市
                var parentNode = zTree.getNodeByParam('id', id);
                //市关联的区的数量
                var childrenLen = parentNode.children.length;
                //如果市的节点是真正的全选，市children的数量和改数量相同
                if (childrenLen == cityObj[id].length) {
                    //省
                    var ppid = parentNode.pId;
                    if (provObj[ppid]) {
                        provObj[ppid].push(id);
                    } else {
                        proIds.push(ppid);
                        provObj[ppid] = [id];
                    }                 
                } else {
                    $.merge(lastNode, cityObj[id]);
                }
            });

            console.log('provObj->', provObj);

            $.each(proIds, function(_, id) {
                //省
                var ppNode = zTree.getNodeByParam('id', id);
                console.log(ppNode.id, ppNode.name, ppNode.children.length);
                var len = ppNode.children.length;
                if (len == provObj[id].length) {
                    lastNode.push(id);
                } else {
                    $.merge(lastNode, provObj[id]);
                }
            });

 

这样就可以获取所有的覆盖区域。

 

最后，人生苦短，必须果敢。

 

测试页面：

 

https://github.com/hufeng/toys/blob/master/html/checkbox_1.html

下载zTree，把页面丢到zTree_v3/demo/cn/exhide.祝玩得愉快。