CN116090408A - 可加载大数据量表格组件单元格文本内容自适应实现方法 - Google Patents

Abstract

本发明涉及可加载大数据量表格组件单元格文本内容自适应实现方法，至少包括如下步骤：S1、获取spreadTable表格中所有需要自适应的单元列信息，遍历后生成columns列数组；S2、将生成columns列数组传入命令管理器中；S3、获取spreadTable表格实例的命令管理器，执行自适应动作指令，实现spreadTable表格的表头及表体所有单元格的宽度自适应。本专利提供的表格组件单元格文本内容自适应实现方法能够有效的解决财政业务字段过长，数据过长无法正常显示问题，更加简便了用户的操作。

Description

可加载大数据量表格组件单元格文本内容自适应实现方法

技术领域

本发明属于财务大数据量展示表格技术领域，具体涉及一种应用于政府财政、财务业务系统中的可加载大数据量表格组件单元格文本内容自适应实现方法。

背景技术

表格技术在财务和财政系统开发中得到了越来越广泛的应用。对于政务系统而言，处理性能、标准化编程接口和与主流前端框架的兼容度是系统开发者首要解决的问题，借助葡萄城提供的表格控件技术，从根本上解决了系统性能和产品易用性问题，为行政事业单位的用户提供了与Excel操作几乎一致的预算管理一体化产品。

支付管理系统包含用款计划模块、单位资金支付、预算拨款模块、集中支付模块和报表查询等五个核心功能模块，这些功能模块均应用了SpreadJS表格控件技术，实现了高性能的数据计算、查询和展示。

支付管理系统包含用款计划模块、单位资金支付、预算拨款模块、集中支付模块和报表查询等五个核心功能模块，这些功能模块均应用了SpreadJS表格控件技术，实现了高性能的数据计算、查询和展示。

嵌入SpreadJS，实现表格数据的前端生成与导出，提升系统性能。减少服务端压力，提升系统性能；基于SpreadJS表格控件，可以操作任意区域改变和合并样式；利用基本接口改变部分区域或者进行大数据量时，计算几乎达到秒级。

SpreadJS是一款高度类似Excel的表格控件，可在线导入、导出xlsx文件，因此，通过SpreadJS保存的数据在Excel中也可正常使用。云平台以此为基础，建立了全国统一的逻辑库表及要素，平台基础数据符合三年规划业务规范和技术标准，为省级向财政部报送数据提供支撑。

申请人开发的用友财政云平台支持省财政系统与市县财政系统建设按时间、技术标准、软件应用进行统一，在物理上形成“数据大集中”的模式，满足省财政厅统计查询各市县财政局数据的需求，使数据价值得到有效利用。

依靠SpreadJS纯前端组件的特性，用友财政云平台采用了微服务架构建设，将原有财政一体化业务拆分为几十个微服务，使系统具备了低成本快速扩容、新服务灵活发布、“不停服”变更、适应智能运维等优点。在应用设计方面，借助SpreadJS高性能的计算引擎和处理速度，系统并发处理能力和负载处理能力均得到提升，在保证性能的前提下，能够满足未来五年的交易高峰量。

财政云平台提供统一的分级分区域运维能力，运用灵活的方式构建运维团队，为财政信息化建设提供全面的支撑，通过建立省级集中智能运维体系，化解大集中带来的集中化运维压力。

现有的相关技术中，支付系统借助高性能表格控件技术spreadJS，二次封装符合财政业务需求的spreadTable表格组件，支持对数据进行排序、搜索、列数据筛选(支持多列筛选)、列操作、自定义操作等行为。

但现有的SpreadJS同excel，双击表头单元格之间的分割线，单元格会自动适应表体的列宽，并不考虑表头宽度；SpreadJS自带的双击列分割线自适应宽度事件，只考虑适应列表体数据的宽度，并不考虑表头的部分，因此当财政业务字段过长、数据过长时会被遮挡；存在财政业务字段过长和/或数据过长无法正常显示问题。

发明内容

有鉴于此，本申请的目的在于提供一种可加载大数据量表格组件单元格文本内容自适应实现方法，该方法能够有效的解决现有财政业务字段过长和/或数据过长无法正常显示问题，能够自适应所有单元格文本内容的宽度；更符合用户使用上的需求。

为实现上述目的，本发明采用如下技术方案：可加载大数据量表格组件单元格文本内容自适应实现方法，该表格组件单元格文本内容自适应实现方法至少包括如下步骤：

S1、获取spreadTable表格中所有需要自适应的单元列属性信息，遍历后生成columns列数组；

S2、将生成columns列数组传入命令管理器中；

S3、获取spreadTable表格实例的命令管理器，执行自适应动作指令，实现spreadTable表格的表头及表体所有单元格的宽度自适应。

进一步的，所述步骤S1中的单元列属性信息包括各列表体数据宽度信息和表头文本数据宽度信息。

进一步的，在步骤S3中执行自适应动作指令的步骤包括如下：

S31、从spreadTable表格中获取到各列单元格信息，其中包括表头与表体数据宽度信息和文本数据宽度信息，并存储在columns列数组中；

S32、通过遍历culumns数组的每列的数据，获取到表头和表体单元格的宽度与文本数据的长度；

S33通过比较每列表体及表头文本数据长度，获取到最长的文本长度，则定为当前列的最大长度；

S34、按此规律依次处理，获取每列的最大长度后，则重新渲染表格，实现表格宽度自适应效果。

进一步的，还包括适配筛选按钮图标宽度的自适应步骤：

从columns列数组中获取spreadTable表格中各列表体数据宽度信息；

在spreadTable表格实例的命令管理器中执行操作指令getColumnWidth，获取当前表头列宽；

在当前列宽的基础上增加90px，得到最新列宽，并执行操作指令setColumnWidth，为列宽重新赋值；以实现表格的表头及表体所有单元格的宽度自适应。

进一步的，spreadTable表格中带有自定义操作，包括可批量选择显示、隐藏的表头字段以及选择列拖拽进行改变列顺序。

进一步的，spreadTable表格组件能够实现可添加操作列，并且操作列的按钮图标支持根据行数据的不同，配置不同的图标，其实现步骤如下：

第一步：传入actionColOptions组件操作列选项，这是一个对象，其中包含actionInfo数组，为具体的不同按钮组信息；

第二步：遍历actionColOptions.actionInfo，获取imageName||id定义成为指令的名称；

第三步：actionInfo中的enum对象是自定义按钮对象，通过枚举形式，定义当前行数据的某个字段的不同数据值，以及匹配该数据值需要渲染的相关图标路径或者按钮名称；

第四步：遍历该对象，通过行索引找到该行数据相匹配的图标路径，并通过命令管理器使用spread.commandManager().register()注册命令传递该路径，为不同行提供不同的imageName，再通过setStyle,设置样式方法，渲染出不同的图标或名称。

本发明采用以上技术方案，本专利提供的表格组件单元格文本内容自适应实现方法能够有效的解决财政业务字段过长，数据过长无法正常显示问题，更加简便了用户的操作。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明SpreadJS表格的示意图；

图2是本发明表格组件单元格文本内容自适应实现方法；

图3是本发明执行自适应动作指令的步骤流程图；

图4是本发明整个表格自适应宽度的执行过程流程图；

图5是本发明二次封装的spreadTable表格示意图；

图6是本发明spreadTable表格中带有自定义操作示意图；

图7是本发明具体实施方式流程图；

图8是本发明二次封装后表格的操作列效果示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置的例子。

请参阅图1是SpreadJS表格的示意图，用户的希望是能够自适应表体数据，看全整个文本内容，不出现遮盖情况，单元格换行也会影响整个表格的美观性。该解决方案中，表格实现了表体数据的自适应宽度，双击表头单元格的分割线。

由图1可看出，SpreadJS自带的双击列分割线自适应宽度事件，只考虑适应列表体数据的宽度，并不考虑表头的部分，因此“预算单位编码”六个字部分被遮挡。

为此，本发明提供一种可加载大数据量表格组件单元格文本内容自适应实现方法，如图2所示，该表格组件单元格文本内容自适应实现方法至少包括如下步骤：

S1、获取spreadTable表格中所有需要自适应的单元列属性信息，遍历后生成columns列数组；

S2、将生成columns列数组传入命令管理器中；

S3、获取spreadTable表格实例的命令管理器，执行自适应动作指令，实现spreadTable表格的表头及表体所有单元格的宽度自适应。

作为一种优选的实施方式，本实施例中所述步骤S1中的单元列属性信息包括各列表体数据宽度信息和表头文本数据宽度信息。

如图3所示，作为一种优选的实施方式，本实施例中在步骤S3中执行自适应动作指令的步骤包括如下：

S31、从spreadTable表格中获取到各列单元格信息，其中包括表头与表体数据宽度信息和文本数据宽度信息，并存储在columns列数组中；

S32、通过遍历culumns数组的每列的数据，获取到表头和表体单元格的宽度与文本数据的长度；

S33通过比较每列表体及表头文本数据长度，获取到最长的文本长度，则定为当前列的最大长度；

S34、按此规律依次处理，获取每列的最大长度后，则重新渲染表格，实现表格宽度自适应效果。

进一步的，还包括适配筛选按钮图标宽度的自适应步骤：

从columns列数组中获取spreadTable表格中各列表体数据宽度信息；

在spreadTable表格实例的命令管理器中执行操作指令getColumnWidth，获取当前表头列宽；

在当前列宽的基础上增加90px，得到最新列宽，并执行操作指令setColumnWidth，为列宽重新赋值；以实现表格的表头及表体所有单元格的宽度自适应。

如图4所示，作为一个优选的实施方式，需要补充说明的是，整个表格自适应宽度的执行过程如下：

1.双击表格的左上角区域部分，程序获取所有需要自适应的单元列{单元格的信息}(属性，(文本宽度，字头长度))，遍历后生成一个列数组columns。

2.同时，开启表格的自适应属性allowUndo为true。

3.获取表格实例的命令管理器，并执行[autoFitColumn]动作指令，将需要自适应的columns的列数组传入。

4.由于表头存在筛选按钮图标，需要正常显示，则使用getColumnWidth方法，获取当前表头列宽。

5.当前列宽加90，得到最新列宽，并使用setColumnWidth方法，为列宽重新赋值，因此实现表格的表头及表体所有单元格的宽度自适应。

如图5所示，二次封装的spreadTable表格是考虑到适合业务操作规范的自适应功能。不仅考虑到了表体数据和表头数据，并且能够完整的显示表头的筛选功能图标。做到最完美的展现表格的原始功能效果。这个功能效果是相比excel及SpreadJS的不同之处，也是完善易用性之处。

作为一种优选的实施方式，如图6所示，本实施例中spreadTable表格中带有自定义操作，包括可批量选择显示、隐藏的表头字段以及选择列拖拽进行改变列顺序，更加方便记录用户的习惯性操作。

作为一种优选的实施方式，如图7所示，本实施例中spreadTable表格组件能够实现可添加操作列，并且操作列的按钮图标支持根据行数据的不同，配置不同的图标，其实现步骤如下：

第一步：传入actionColOptions组件操作列选项，这是一个对象，其中包含actionInfo数组，为具体的不同按钮组信息；

第二步：遍历actionColOptions.actionInfo，获取imageName||id定义成为指令的名称；

第三步：actionInfo中的enum对象是自定义按钮对象，通过枚举形式，定义当前行数据的某个字段的不同数据值，以及匹配该数据值需要渲染的相关图标路径或者按钮名称；

第四步：遍历该对象，通过行索引找到该行数据相匹配的图标路径，并通过命令管理器使用spread.commandManager().register()注册命令传递该路径，为不同行提供不同的imageName，再通过setStyle,设置样式方法，渲染出不同的图标或名称。

如图8所示，是二次封装后表格的操作列效果，操作列是为了便于用户对某行数据进行快速编辑的按钮列区域。

其中“按钮状态1”、“按钮状态2”、“按钮状态3，3种不同类型的自定义操作按钮，便是根据当前行数据中不同的值进行不同的操作按钮渲染，更具灵活性，更加能满足在不同场景下的不同需求。

本发明采用以上技术方案，本专利提供的表格组件单元格文本内容自适应实现方法能够有效的解决财政业务字段过长，数据过长无法正常显示问题，更加简便了用户的操作。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (6)

1.可加载大数据量表格组件单元格文本内容自适应实现方法，其特征在于：该表格组件单元格文本内容自适应实现方法至少包括如下步骤：

S1、获取spreadTable表格中所有需要自适应的单元列属性信息，遍历后生成columns列数组；

S2、将生成columns列数组传入命令管理器中；

S3、获取spreadTable表格实例的命令管理器，执行自适应动作指令，实现spreadTable表格的表头及表体所有单元格的宽度自适应。

2.根据权利要求1所述的可加载大数据量表格组件单元格文本内容自适应实现方法，其特征在于：所述步骤S1中的单元列属性信息包括各列表体数据宽度信息和表头文本数据宽度信息。

3.根据权利要求2所述的可加载大数据量表格组件单元格文本内容自适应实现方法，其特征在于：在步骤S3中执行自适应动作指令的步骤包括如下：

S31、从spreadTable表格中获取到各列单元格信息，其中包括表头与表体数据宽度信息和文本数据宽度信息，并存储在columns列数组中；

S32、通过遍历culumns数组的每列的数据，获取到表头和表体单元格的宽度与文本数据的长度；

S33通过比较每列表体及表头文本数据长度，获取到最长的文本长度，则定为当前列的最大长度；

S34、按此规律依次处理，获取每列的最大长度后，则重新渲染表格，实现表格宽度自适应效果。

4.根据权利要求3所述的可加载大数据量表格组件单元格文本内容自适应实现方法，其特征在于：还包括适配筛选按钮图标宽度的自适应步骤：

从columns列数组中获取spreadTable表格中各列表体数据宽度信息；

在spreadTable表格实例的命令管理器中执行操作指令getColumnWidth，获取当前表头列宽；

在当前列宽的基础上增加90px，得到最新列宽，并执行操作指令setColumnWidth，为列宽重新赋值；以实现表格的表头及表体所有单元格的宽度自适应。

5.根据权利要求1至4任一项所述的可加载大数据量表格组件单元格文本内容自适应实现方法，其特征在于：spreadTable表格中带有自定义操作，包括可批量选择显示、隐藏的表头字段以及选择列拖拽进行改变列顺序。

6.根据权利要求5所述的可加载大数据量表格组件单元格文本内容自适应实现方法，其特征在于：spreadTable表格组件能够实现可添加操作列，并且操作列的按钮图标支持根据行数据的不同，配置不同的图标，其实现步骤如下：

第一步：传入actionColOptions组件操作列选项，这是一个对象，其中包含actionInfo数组，为具体的不同按钮组信息；

第二步：遍历actionColOptions.actionInfo，获取imageName||id定义成为指令的名称；

第三步：actionInfo中的enum对象是自定义按钮对象，通过枚举形式，定义当前行数据的某个字段的不同数据值，以及匹配该数据值需要渲染的相关图标路径或者按钮名称；

第四步：遍历该对象，通过行索引找到该行数据相匹配的图标路径，并通过命令管理器使用spread.commandManager().register()注册命令传递该路径，为不同行提供不同的imageName，再通过setStyle,设置样式方法，渲染出不同的图标或名称。

Images