本帖最后由 xcymoo 于 2023-10-30 16:12 编辑
众所周知，树形结构可以非常清晰、简洁地表现数据的上下级关系，例如省市区对应的树形结构就是这样的： 像“雁塔区”、“延安市”等这些没有子级的数据，称为树形结构的“叶子节点”，而那些有子级的，则称为“分枝节点”。 对于表格来说，展示这种层级结构，就要通过名称缩进的方式： 使用SpreadJS，可以非常方便地对数据做以上形式的展示，无非就是对名称按照层级深度进行缩进而已。但是我相信使用SpreadJS的开发者，一定不仅仅想做到“展示”，更希望对数据进行操作。
我们设想一个业务场景，某银行在全国各地的区县级区域开设了分行，并希望以区、市、省为维度，做一个存贷款量的统计表。
在修改此统计表时，常有如下几个需求： 1. 点击省和市的序号，其子级自动折叠、展开；
2. 市和省的数据不能被编辑，而是自动计算其子集之和，后面的新增、删除等操作也遵从这个原则；
3. 对于层级错误的数据（如汉中市应该属于陕西省，而非西安市），可以通过拖拽来实现层级的移动，也可以用ctrl shift拖拽来改变数据在同一层级的位置；
4. 我们可以新增数据，新增时可以选择添加为当前数据的子级，也可以添加为同级；
5. 删除数据时，若数据有子级，需要一同删除其子数据，如删除西安市，需要将其下的灞桥区、碑林区等一并删除；
6. 总合计行有数据校验的功能， 若没有通过校验，则背景色变化，鼠标悬浮出现批注；
总结 表格展示树形数据的新方式让用户可以轻松地进行数据编辑。通过简单的拖拽操作，用户可以在树形结构中调整、移动各个数据项目的位置。这种直观的交互方式，不仅提高了用户的使用体验，也使得数据编辑变得更加简单、快速。同时，用户还可以通过拖拽来创建、合并甚至删除数据项目，进一步提升数据管理的灵活性和效率。 此外，示例中表格展示树形数据的新方式还具备自动汇总的功能。在传统的表格展示方式中，用户需要手动计算和汇总各个数据，这不仅费时费力，还容易产生错误。而通过新的方式，系统可以自动对树形数据进行汇总和计算，将结果实时展示在表格中。这让用户可以更加便捷地获取整体数据的情况，减少出错的可能性，并为数据分析和决策提供更有价值的参考依据。 此示例的功能都是使用SpreadJS完成的，借助SpreadJS丰富的API，我们可以在保证Excel原生体验的基础上，定制化地实现这样复杂的功能。由于使用了数据绑定，数据在界面上的任何变化都可以在数据源中得到体现，前端修改后的数据也可以轻松地发送给后端。总的来说，结合了SpreadJS后，表格展示树形数据的新方式通过拖拽编辑和自动汇总（向上计算）的功能，为用户提供了更加灵活、高效的数据管理和分析工具。
| 
陕公网安备：61019002000258 |
隐私政策 |
网站地图
