高质量编码------属性查询
原创高质量编码------属性查询
原创
为了实现灵活查询供水管网，根据地址，材质，管径组合汇总查询和条件查询。（图片数据经过处理，不涉及地理坐标保密信息）
汇总查询，可以用树形子表的方式来组织数据，地址，材质，管径之间的关联信息一目了然，任意维图钻取数据。
结合条件查询可以在材质-管径-地址三个维度对管网实现任意灵活的查询以及数据分析功能。
既然主题是高质量代码：
下面展示一下这个功能所用的代码以及自创的类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 删除。