`
bee1314
  • 浏览: 166174 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

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.祝玩得愉快。

分享到:
评论

相关推荐

    zTree自定义状态图标实现

    本文将深入探讨如何利用zTree的自定义属性功能,来满足项目中对于Tree数据分层显示的独特需求,并展示如何实现自定义状态图标。 首先,zTree的核心优势在于其灵活性和可扩展性,这使得开发者可以方便地定制树节点的...

    jquery ztree自定义编辑的树形菜单插件

    《jQuery ZTree自定义编辑的树形菜单插件详解》 在Web开发中,树形菜单是一种常见的数据展示形式,它能清晰地呈现层级关系,方便用户浏览和操作。jQuery ZTree是一款强大的JavaScript树形菜单插件,尤其适用于构建...

    ztree自定义搜索功能 -- 可递归无限层

    本篇将详细探讨"ZTree自定义搜索功能 -- 可递归无限层"这一主题,帮助开发者更好地理解和实现ZTree中的节点搜索功能。 1. **ZTree概述**: ZTree是一个基于jQuery的插件,它提供了丰富的API接口和灵活的配置选项,...

    jquery ztree自定义编辑的树形菜单插件代码

    《jQuery ZTree自定义编辑树形菜单插件代码解析与应用》 在Web开发中,树形菜单是一种常见的数据展示方式,它能够清晰地呈现层级关系,方便用户进行导航和操作。jQuery ZTree是一款功能强大的JavaScript插件,专门...

    ztree添加自定义控件

    在本案例中,我们关注的是如何在`ZTree 3.1`版本中添加自定义控件,例如“增”、“删”、“改”等操作,这些功能对于数据管理应用程序至关重要。 首先,我们需要了解`ZTree`的基本用法。`ZTree`通过JSON数据格式来...

    Ztree demo

    在本示例中,"Ztree demo" 提供了一个演示,展示了如何在ZTree中实现取消选择、复选框(checkbox)功能以及全选和取消全选的操作。这些功能在数据管理、目录浏览或者权限控制等场景中非常实用。 ZTree的核心在于其...

    zTree 非常强大的树形控件

    zTree 非常强大的树形控件 、zTree v3.0 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 Dom。 2)、对于每级节点最多一百左右,但总节点数几千甚至几万,且不是全部...

    ztree自定义tag

    在本文中,我们将深入探讨如何在ZTree中实现自定义tag,以及这一功能在实际场景中的应用。 首先,了解ZTree的基本结构是至关重要的。ZTree的数据源通常由JSON数组构成,每个JSON对象代表树中的一个节点。在这些对象...

    ztree树选中节点弹出层编辑

    此外,根据需求,还可以自定义弹出层的样式和布局,以满足不同项目的视觉风格。 总结,"ztree树选中节点弹出层编辑"是ZTree实现的一种高效交互方式,它通过结合事件监听、弹出层管理和API调用来优化用户在树形数据...

    zTree异步加载子节点针对大数据量数列表

    最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。

    使用ZTree做的自定义控件和普通使用ZTree的Demo

    这个名为"使用ZTree做的自定义控件和普通使用ZTree的Demo"的项目,旨在展示如何将ZTree集成到.NET Asp环境中,并且通过自定义方式扩展其功能,同时演示了异步获取数据的实现。 首先,我们来看ZTree的基本使用。...

    jQuery插件zTree实现删除树节点的方法示例

    zTree是一个基于jQuery的树形控件,它具有丰富的API接口,可以方便地实现树形结构数据的展示。在Web开发中,zTree经常被用来构建菜单、目录、组织结构图等树形组件。zTree插件支持节点的动态添加、删除、编辑等操作...

    ztree官网 ztree官网

    ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...

    zTree-zTree_v3-master.zip_ztree_多功能插件

    1. **复选框与单选按钮**:zTree允许在节点上添加复选框或单选按钮,支持全选、反选、级联选择等操作,常用于多选场景。 2. **节点操作**:如展开/折叠节点、选择/取消选择节点、添加/删除节点等,为用户提供丰富的...

    zTree 3.5 radio/checkbox自定义树形

    **zTree 3.5 Radio/Checkbox 自定义树形组件详解** zTree 是一款基于 jQuery 的强大树形插件,广泛应用于网页中的数据展示、菜单导航等场景。在 zTree 3.5 版本中,它提供了丰富的功能,包括单选(Radio)和复选...

    zTree实现多选下拉框

    5. **自定义控件**:zTree的灵活性体现在允许开发者通过CSS和JavaScript进行高度自定义。你可以根据需求调整复选框样式,或者添加额外的交互效果。例如,可以添加搜索功能,让用户快速找到需要的节点。 6. **性能...

    ztree官网参考文档及demo

    zTree的数据结构主要由JSON对象表示,每个节点包含id、pId(父节点id)、name、isParent(是否为父节点)等基本属性,还可以自定义其他属性,以扩展更多功能。 四、zTree配置项解析 zTree的配置项是通过JavaScript...

    带搜索框和带多选框的ztree

    此外,ZTree还支持全选、反选以及级联选择等操作。开发者可以通过API获取已选择的节点数据,方便在其他业务逻辑中使用这些数据。在处理多选时,需要特别注意的是,如何合理配置ZTree的选中策略,例如是否开启父子...

    zTree帮助文档_ztree_

    5. **图标显示**:可以通过自定义图标来表示节点的不同状态或类型。 6. **事件监听**:提供多种事件监听,如点击、双击、拖拽等,方便开发者进行业务逻辑处理。 7. **搜索功能**:内置搜索功能,用户可以快速查找...

    漂亮的ztree样式主题

    非常好看的ztree样式,可以使用不同图标,可以兼容IE6,Hunter's Home zTree in Google zTree 功能演示 基本功能演示 不兼容 IE6 ...添加自定义控件 checkbox & radio 共存 右键菜单 下拉菜单 皮肤演示

Global site tag (gtag.js) - Google Analytics