为了实现灵活查询供水管网,根据地址,材质,管径组合汇总查询和条件查询。(图片数据经过处理,不涉及地理坐标保密信息)
汇总查询,可以用树形子表的方式来组织数据,地址,材质,管径之间的关联信息一目了然,任意维图钻取数据。
结合条件查询可以在材质-管径-地址三个维度对管网实现任意灵活的查询以及数据分析功能。
既然主题是高质量代码:
下面展示一下这个功能所用的代码以及自创的类MVC编程技巧:
不要重新造轮子
强烈推荐大家使用bootstrap-table js库来展示数据表,功能强大,有查询,高级查询,排序,分页,过滤,自定义显示列功能,体验友好,支持通过html data标签配置从而零编程实现自己的功能。还有许多扩展插件来满足丰富的功能类如树结构表。下面是通过bootstrap-table的html配置。
因为我们需要从原始数据根据汇总方式动态生成不同的树结构数据,而且需要动态更改bootstrap-table的options,也不能用bootstrap-table的refresh方法,需要调用bootstrap-table的destroy方法销毁对象,重新根据新数据生成整个bootstrap-table.如上图我们指定bootstrap-table的data-ajax为自定义函数,这个函数会传递一个promise对象,bootstrap-table根据这个对象生成bootstrap-table。
同样注意我们只需要第一次加载时从后台获取原始数据,保存在tableData['pipeSupplyWater']这个对象中,每次改变汇总方式重建bootstrap-table用到的树结构汇总数据根据原始数据。图中groupData(data, fields)方法,可以完成汇总工作(三层以上汇总只需增加在groupData函数定义中的嵌套层)。initQuerySelects()方法,获取到数据以后才根据数据生成查询下拉列表,此下拉列表进一步可以过滤数据本身。下图是groupData方法,汇总多少层,函数嵌套有几层,代码能力高的同学,可以挑战自己编写优化成动态级别汇总函数。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。