计算覆盖区域,前端使用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的自定义属性功能,来满足项目中对于Tree数据分层显示的独特需求,并展示如何实现自定义状态图标。 首先,zTree的核心优势在于其灵活性和可扩展性,这使得开发者可以方便地定制树节点的...
《jQuery ZTree自定义编辑的树形菜单插件详解》 在Web开发中,树形菜单是一种常见的数据展示形式,它能清晰地呈现层级关系,方便用户浏览和操作。jQuery ZTree是一款强大的JavaScript树形菜单插件,尤其适用于构建...
本篇将详细探讨"ZTree自定义搜索功能 -- 可递归无限层"这一主题,帮助开发者更好地理解和实现ZTree中的节点搜索功能。 1. **ZTree概述**: ZTree是一个基于jQuery的插件,它提供了丰富的API接口和灵活的配置选项,...
《jQuery ZTree自定义编辑树形菜单插件代码解析与应用》 在Web开发中,树形菜单是一种常见的数据展示方式,它能够清晰地呈现层级关系,方便用户进行导航和操作。jQuery ZTree是一款功能强大的JavaScript插件,专门...
在本案例中,我们关注的是如何在`ZTree 3.1`版本中添加自定义控件,例如“增”、“删”、“改”等操作,这些功能对于数据管理应用程序至关重要。 首先,我们需要了解`ZTree`的基本用法。`ZTree`通过JSON数据格式来...
在本示例中,"Ztree demo" 提供了一个演示,展示了如何在ZTree中实现取消选择、复选框(checkbox)功能以及全选和取消全选的操作。这些功能在数据管理、目录浏览或者权限控制等场景中非常实用。 ZTree的核心在于其...
zTree 非常强大的树形控件 、zTree v3.0 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 Dom。 2)、对于每级节点最多一百左右,但总节点数几千甚至几万,且不是全部...
在本文中,我们将深入探讨如何在ZTree中实现自定义tag,以及这一功能在实际场景中的应用。 首先,了解ZTree的基本结构是至关重要的。ZTree的数据源通常由JSON数组构成,每个JSON对象代表树中的一个节点。在这些对象...
此外,根据需求,还可以自定义弹出层的样式和布局,以满足不同项目的视觉风格。 总结,"ztree树选中节点弹出层编辑"是ZTree实现的一种高效交互方式,它通过结合事件监听、弹出层管理和API调用来优化用户在树形数据...
最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。
这个名为"使用ZTree做的自定义控件和普通使用ZTree的Demo"的项目,旨在展示如何将ZTree集成到.NET Asp环境中,并且通过自定义方式扩展其功能,同时演示了异步获取数据的实现。 首先,我们来看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官网...
1. **复选框与单选按钮**:zTree允许在节点上添加复选框或单选按钮,支持全选、反选、级联选择等操作,常用于多选场景。 2. **节点操作**:如展开/折叠节点、选择/取消选择节点、添加/删除节点等,为用户提供丰富的...
**zTree 3.5 Radio/Checkbox 自定义树形组件详解** zTree 是一款基于 jQuery 的强大树形插件,广泛应用于网页中的数据展示、菜单导航等场景。在 zTree 3.5 版本中,它提供了丰富的功能,包括单选(Radio)和复选...
非常好看的ztree样式,可以使用不同图标,可以兼容IE6,Hunter's Home zTree in Google zTree 功能演示 基本功能演示 不兼容 IE6 ...添加自定义控件 checkbox & radio 共存 右键菜单 下拉菜单 皮肤演示
5. **自定义控件**:zTree的灵活性体现在允许开发者通过CSS和JavaScript进行高度自定义。你可以根据需求调整复选框样式,或者添加额外的交互效果。例如,可以添加搜索功能,让用户快速找到需要的节点。 6. **性能...
此外,ZTree还支持全选、反选以及级联选择等操作。开发者可以通过API获取已选择的节点数据,方便在其他业务逻辑中使用这些数据。在处理多选时,需要特别注意的是,如何合理配置ZTree的选中策略,例如是否开启父子...
zTree的数据结构主要由JSON对象表示,每个节点包含id、pId(父节点id)、name、isParent(是否为父节点)等基本属性,还可以自定义其他属性,以扩展更多功能。 四、zTree配置项解析 zTree的配置项是通过JavaScript...
5. **图标显示**:可以通过自定义图标来表示节点的不同状态或类型。 6. **事件监听**:提供多种事件监听,如点击、双击、拖拽等,方便开发者进行业务逻辑处理。 7. **搜索功能**:内置搜索功能,用户可以快速查找...