[发明专利]一种web表格的边框处理方法和装置

说明书

本发明公开了种web表格的边框处理方法，用于基于handsontable构建的web表格上的边框显示，包括获取所选区域坐标；根据所述所选区域坐标，循环遍历获取所述所选区域内所有单元格坐标；根据传入参数，判断设置边框类型；根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染。该发明解决了目前在web平台应用中使用handsontable插件批量渲染大量单元格边框样式时，时常出现的渲染速度太慢、影响用户体验甚至严重时导致平台崩溃的问题，通过上述web表格的边框处理方法可进行快速渲染，优化用户体验，提高表格使用效率。

技术领域

本发明涉及信息显示领域，尤其涉及一种web表格的边框处理方法和装置。

背景技术

Handsontable是一个基于JavaScript/HTML5的页面端表格式交互插件，可用于各类技术，如React、Angular和Vue，可很容易与任何数据源集成并提供了各种有用的功能，如数据绑定、验证、排序和强大的上下文菜单，它可以处理大量数据而无需担心性能问题，兼容各类主流浏览器。Handsontable实现了HTML页面中的表格编辑功能，具备仿Excel的编辑效果，因此是当前非常流行的web应用程序的UI组件。通过其可加载显示表格内容，能够支持合并项、统计、行列拖动等。同时，支持对加载后的表格页面的多种处理：添加/删除行 /列，合并单元格等操作。

但是，在当web表格中的行或者列太多的时候，handsontable为了加载速度，会选择只渲染部分数据，在当页面有动作的时候才会再次渲染剩余数据。因此在渲染大量Excel单元格边框时，就会导致渲染速度太慢，严重影响用户体验，甚至因表格持续渲染量太大而导致平台崩溃。

发明内容

本发明针对现有技术中的不足，提供了一种web表格的边框处理方法，用于基于handsontable构建的web表格上的边框显示，包括：获取所选区域坐标；根据所述所选区域坐标，循环遍历获取所述所选区域内所有单元格坐标；根据传入参数，判断设置边框类型；根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染。

优选的，所述边框类型包括无边框类型、所有边框类型和外边框类型。

优选的，所述步骤根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染，具体包括：若设置为无边框类型，则循环遍历所选区域内所有单元格坐标的集合数组，获取各单元格属性；依据空格对所选区域进行拆分，获取单元格第一属性集合数组；判断所述第一属属性集合数组里是否存在边框显示要素，若存在则删除所述第一属属性集合数组内对应参数；将第一属属性集合数组以空格为间隔进行字符串拼接，获取第二属性集合数组；根据所述第二属性集合数组为单元格设置新显示样式。

优选的，所述步骤根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染，还包括：

若遍历的单元格的行索引等于起始行，则获取前一行属性值，若存在边框显示要素则置为空，并重新设置单元格样式；

若遍历的单元格的列索引等于起始列，则获取前一列的属性值，若存在边框显示要素则置为空，并重新设置单元格样式；

根据新设置单元格格式对表格进行刷新渲染。

优选的，所述步骤根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染，具体包括：

若设置为所有边框类型，则循环遍历所选区域内所有单元格坐标的第一集合数组；

获取各单元格当前的样式属性；

对各单元格的样式属性中增加单元格右边框显示要素和下边框显示要素，设置后形成第二属性集合数组；

根据所述第二属性集合数组为单元格设置新显示样式。