CN113608815A - A method and system for rendering a Table-like component in a WeChat applet - Google Patents
A method and system for rendering a Table-like component in a WeChat appletDownload PDFInfo
- Publication number
- CN113608815A CN113608815ACN202110926428.9ACN202110926428ACN113608815ACN 113608815 ACN113608815 ACN 113608815ACN 202110926428 ACN202110926428 ACN 202110926428ACN 113608815 ACN113608815 ACN 113608815A
- Authority
- CN
- China
- Prior art keywords
- information
- rendered
- rendering
- component
- functional area
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
Translated fromChinese
Description
Translated fromChinese技术领域technical field
本发明涉及组件渲染技术领域，具体地，涉及一种微信小程序中的类Table组件渲染方法及系统。The present invention relates to the technical field of component rendering, and in particular, to a method and system for rendering a Table-like component in a WeChat applet.
背景技术Background technique
由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序技术领域也很少的table组件渲染UI模式，有的一些都只是基本的表格模式展示，缺乏很多类似PC端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。Since the WeChat applet does not natively support the table view component, the WeChat applet generally does not display the table table due to the limited interactive design of the mobile phone screen. There are very few table components in the WeChat applet technology field to render the UI mode, and some of them are just basic table mode display, lacking many functions similar to the specific scenes on the PC side: fixed left and right, fixed at the top, merged cells, multi-dimensional table etc.
但本申请发明人在实现本申请实施例中发明技术方案的过程中，发现上述技术至少存在如下技术问题：However, in the process of realizing the technical solutions of the invention in the embodiments of the present application, the inventor of the present application found that the above-mentioned technology at least has the following technical problems:
现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。The multi-function table component on the applet terminal existing in the prior art only supports basic functions such as basic table display, and cannot meet the technical problem of complex interactive display scenarios.
发明内容SUMMARY OF THE INVENTION
针对现有技术中的缺陷，本申请实施例的目的是，通过提供一种微信小程序中的类Table组件渲染方法及系统，解决了现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。通过采用taro框架，React语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的UI渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。In view of the defects in the prior art, the purpose of the embodiments of the present application is to solve the problem that the multi-function table component on the applet side in the prior art only supports a table component rendering method and system in a WeChat applet. Basic functions such as basic table display cannot meet the technical problems of complex interactive display scenarios. By adopting the taro framework and the components developed by React syntax, the component configuration scheme is used to facilitate fine-grained distinction of functions in different areas of the table, separate processing, and finally combined rendering. The mode of low coupling and high cohesion is easier to maintain and develop functions. , to display data in the form of UI rendering of the table, realize more custom functions of the multi-function table component on the applet side, and then meet the technical effect of complex interactive display scenarios.
一方面，本申请实施例提供一种微信小程序中的类Table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。On the one hand, an embodiment of the present application provides a method for rendering a Table-like component in a WeChat applet, wherein the method includes: obtaining first table information to be rendered; obtaining a preset component according to the first table information to be rendered function information; based on the functions of different regions, fine-grained distinction is made on the information of the first table to be rendered, and a first table simulation layout style is generated; according to the first table simulation layout style, the first table header title function area is obtained , the first table body cell functional area and the first table total data module functional area; The module function area performs control rendering, and generates an initial simulation rendering style of the first table information to be rendered; based on the custom attribute, the configuration components of the initial simulation rendering style are combined and rendered to generate the first table information to be rendered. A preset simulated rendering style, wherein the preset simulated rendering style satisfies the preset component function information.
另一方面，本申请还提供了一种微信小程序中的类Table组件渲染系统，其中，所述系统包括：第一获得单元：所述第一获得单元用于获得第一待渲染表格信息；第二获得单元：所述第二获得单元用于根据所述第一待渲染表格信息，获得预设组件功能信息；第一区分单元：所述第一区分单元用于基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；第三获得单元：所述第三获得单元用于根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；第一渲染单元：所述第一渲染单元用于分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；第二渲染单元：所述第二渲染单元用于基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。On the other hand, the present application also provides a table-like component rendering system in a WeChat applet, wherein the system includes: a first obtaining unit: the first obtaining unit is used to obtain the information of the first table to be rendered; Second obtaining unit: the second obtaining unit is used for obtaining preset component function information according to the first table information to be rendered; The information of the first table to be rendered is fine-grained, and a first table simulation layout style is generated; the third obtaining unit: the third obtaining unit is used to obtain the first table header according to the first table simulation layout style The title functional area, the first table main body cell functional area, and the first table total data module functional area; the first rendering unit: the first rendering unit is used to respectively The first table body cell functional area and the first table total data module functional area perform control rendering to generate an initial simulated rendering style of the first table information to be rendered; the second rendering unit: the second rendering unit uses Based on the custom attribute, the configuration components of the initial simulation rendering style are combined and rendered, and the preset simulation rendering style of the first table information to be rendered is generated, wherein the preset simulation rendering style satisfies the preset component. function information.
本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：One or more technical solutions provided in the embodiments of this application have at least the following technical effects or advantages:
获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。通过采用taro框架，React语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的UI渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。Obtain first table information to be rendered; obtain preset component function information according to the first table information to be rendered; perform fine-grained distinction on the first table information to be rendered based on functions of different regions, and generate a first table simulation layout style; according to the first table simulation layout style, obtain the first table header title functional area, the first table main body cell functional area and the first table total data module functional area; The title functional area, the first table main body cell functional area, and the first table total data module functional area perform control and rendering to generate an initial simulated rendering style of the first table information to be rendered; The configuration components of the initial simulated rendering style are combined and rendered to generate a preset simulated rendering style of the first table information to be rendered, wherein the preset simulated rendering style satisfies the preset component function information. By adopting the taro framework and the components developed by React syntax, the component configuration scheme is used to facilitate fine-grained distinction of functions in different areas of the table, separate processing, and finally combined rendering. The mode of low coupling and high cohesion is easier to maintain and develop functions. , to display data in the form of UI rendering of the table, realize more custom functions of the multi-function table component on the applet side, and then meet the technical effect of complex interactive display scenarios.
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。The above description is only an overview of the technical solution of the present application. In order to be able to understand the technical means of the present application more clearly, it can be implemented according to the content of the description, and in order to make the above-mentioned and other purposes, features and advantages of the present application more obvious and easy to understand , and the specific embodiments of the present application are listed below.
附图说明Description of drawings
通过阅读参照以下附图对非限制性实施例所做的详细描述，本发明的其它特征、目的和优点将会变得更明显：Other features, objects and advantages of the present invention will become more apparent upon reading the detailed description of non-limiting embodiments with reference to the following drawings:
图1为本申请实施例一种微信小程序中的类Table组件渲染方法的流程示意图；1 is a schematic flowchart of a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;
图2为本申请实施例一种微信小程序中的类Table组件渲染方法的对所述待渲染页面位置信息进行组合渲染的流程示意图；2 is a schematic flowchart of combined rendering of the position information of the page to be rendered in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;
图3为本申请实施例一种微信小程序中的类Table组件渲染方法的对所述第一待渲染表格信息中的可视化节点进行渲染的流程示意图；3 is a schematic flowchart of rendering a visual node in the first to-be-rendered table information in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;
图4为本申请实施例一种微信小程序中的类Table组件渲染方法的对所述页面节点特征集合进行中心化处理的流程示意图；4 is a schematic flowchart of centralizing processing of the page node feature set in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the application;
图5为本申请实施例一种微信小程序中的类Table组件渲染方法的对合并单元格进行渲染的流程示意图；5 is a schematic flowchart of rendering a merged cell in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;
图6为本申请实施例一种微信小程序中的类Table组件渲染方法的对所述第一单元格数据集合进行隐藏处理的流程示意图；FIG. 6 is a schematic flowchart of performing hiding processing on the first cell data set in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;
图7为本申请实施例一种微信小程序中的类Table组件渲染系统的结构示意图；7 is a schematic structural diagram of a table-like component rendering system in a WeChat applet according to an embodiment of the application;
图8为本申请实施例示例性电子设备的结构示意图。FIG. 8 is a schematic structural diagram of an exemplary electronic device according to an embodiment of the present application.
具体实施方式Detailed ways
本申请实施例通过提供一种微信小程序中的类Table组件渲染方法及系统，解决了现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。通过采用taro框架，React语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的UI渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。By providing a method and system for rendering a Table-like component in a WeChat applet, the embodiments of the present application solve the problem that the multi-function table component on the applet side in the prior art only supports basic functions such as basic table display, and cannot meet complex interaction requirements. Show the technical issues of the scene. By adopting the taro framework and the components developed by React syntax, the component configuration scheme is used to facilitate fine-grained distinction of functions in different areas of the table, separate processing, and finally combined rendering. The mode of low coupling and high cohesion is easier to maintain and develop functions. , to display data in the form of UI rendering of the table, realize more custom functions of the multi-function table component on the applet side, and then meet the technical effect of complex interactive display scenarios.
下面，将参考附图详细的描述根据本申请的示例实施例。显然，所描述的实施例仅是本申请的一部分实施例，而不是本申请的全部实施例，应理解，本申请不受这里描述的示例实施例的限制。Hereinafter, exemplary embodiments according to the present application will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments of the present application, and it should be understood that the present application is not limited by the example embodiments described herein.
申请概述Application overview
由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序技术领域也很少的table组件渲染UI模式，有的一些都只是基本的表格模式展示，缺乏很多类似PC端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。Since the WeChat applet does not natively support the table view component, the WeChat applet generally does not display the table table due to the limited interactive design of the mobile phone screen. There are very few table components in the WeChat applet technology field to render the UI mode, and some of them are just basic table mode display, lacking many functions similar to the specific scenes on the PC side: fixed left and right, fixed at the top, merged cells, multi-dimensional table etc. The multi-function table component on the applet terminal existing in the prior art only supports basic functions such as basic table display, and cannot meet the technical problem of complex interactive display scenarios.
针对上述技术问题，本申请提供的技术方案总体思路如下：In view of the above-mentioned technical problems, the general idea of the technical solution provided by this application is as follows:
本申请实施例提供一种微信小程序中的类Table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。An embodiment of the present application provides a method for rendering a Table-like component in a WeChat applet, wherein the method includes: obtaining first table information to be rendered; obtaining preset component function information according to the first table information to be rendered; Based on different area functions, fine-grained distinction is made on the information of the first table to be rendered, and a first table simulation layout style is generated; The table body cell functional area and the first table total data module functional area; respectively for the first table header title functional area, the first table body cell functional area and the first table total data module functional area Perform control rendering to generate an initial simulation rendering style of the first table information to be rendered; based on the custom attribute, perform combined rendering on the configuration components of the initial simulation rendering style to generate a preset simulation of the first table information to be rendered A rendering style, wherein the preset simulated rendering style satisfies the preset component function information.
为了更好地理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。In order to better understand the above technical solutions, the above technical solutions will be described in detail below with reference to the accompanying drawings and specific embodiments.
实施例一Example 1
如图1所示，本申请实施例提供了一种微信小程序中的类Table组件渲染方法，其中，所述方法包括：As shown in FIG. 1 , an embodiment of the present application provides a method for rendering a Table-like component in a WeChat applet, wherein the method includes:
步骤S100：获得第一待渲染表格信息；Step S100: obtaining first table information to be rendered;
步骤S200：根据所述第一待渲染表格信息，获得预设组件功能信息；Step S200: Obtain preset component function information according to the first form to be rendered information;
具体而言，由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序技术领域也很少的table组件渲染UI模式，有的一些都只是基本的表格模式展示，缺乏很多类似PC端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。为了实现table视图组件的多功能要求，进而满足复杂的交互展示场景，在本申请实施例中，可先获得第一待渲染表格信息，所述第一待渲染表格信息为对微信小程序中出现的table视图进行渲染的表格信息，因现有的小程序领域里原生不支持的情况下，都是各种简单模拟相关技术不能满足复杂的交互展示场景，因此所述预设组件功能信息弥补了现有功能的不足，为对现有简单功能的扩充，进一步可包括自定义渲染样式及无数据UI，加载动画、每行触发背景动画，支持多维表头，支持单元格合并，支持合计、小计展示，支持头部、尾部描述，支持行展开，支持表头、多列固定，处理多字段、大数据量、节点过多导致的性能问题，支持控制表格间距大小模式区分等功能。Specifically, because the WeChat applet does not natively support the table view component, the WeChat applet generally does not display the table table due to the limited mobile phone screen interaction design. There are very few table components in the WeChat applet technology field to render the UI mode, and some of them are just basic table mode display, lacking many functions similar to the specific scenes on the PC side: fixed left and right, fixed at the top, merged cells, multi-dimensional table etc. In order to meet the multi-functional requirements of the table view component and satisfy complex interactive display scenarios, in this embodiment of the present application, the first table information to be rendered may be obtained first, and the first table information to be rendered is displayed in the WeChat applet. The table information rendered by the table view is not supported natively in the existing applet field, and various simple simulation related technologies cannot meet the complex interactive display scene, so the preset component function information makes up for it. Insufficient of existing functions, in order to expand the existing simple functions, it can further include custom rendering style and dataless UI, loading animation, triggering background animation for each row, support for multi-dimensional headers, support for cell merging, support for total, small Count display, support head and tail description, support row expansion, support table header, multi-column fixation, deal with performance problems caused by multi-field, large data volume, and too many nodes, and support functions such as control of table spacing size and mode distinction.
步骤S300：基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；Step S300: Based on different area functions, fine-grained differentiation is performed on the information of the first table to be rendered, and a first table simulation layout style is generated;
步骤S400：根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；Step S400: obtaining the first table header title functional area, the first table main body cell functional area, and the first table total data module functional area according to the first table simulation layout style;
具体而言，已知所述第一待渲染表格信息，为了实现所述预设组件功能信息，进一步的，可基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，即根据表格的不同功能区域对表格进行划分，按照各区域细粒度的不同，进行分区渲染，所述第一表格模拟布局样式即为功能区域划分结果，具体的，可利用flex的css语法，处理单元格，表头字段等精准且动态布局，模拟出表格的形式，进而基于所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域，其中，所述第一表格表头标题功能区域即为表头标题所在的功能区域，所述第一表格主体单元格功能区域即为主体单元格所在的功能区域，所述第一表格合计数据模块功能区域即为合计数据模块所在的功能区域。需要注意的是，并非对表格的各功能区域进行统一渲染，应按照实际表格需要对各功能分区域进行选择性的配置属性控制以及组合，确保最终呈现的表格样式满足实际需要。Specifically, the information of the first table to be rendered is known. In order to realize the function information of the preset component, further, the information of the first table to be rendered may be fine-grained based on the functions of different regions, that is, The table is divided according to different functional areas of the table, and the partition rendering is performed according to the fine-grained difference of each area. The first table simulation layout style is the result of the division of functional areas. Specifically, the CSS syntax of flex can be used to process the unit. The precise and dynamic layout of tables, header fields, etc., simulates the form of the table, and then simulates the layout style based on the first table to obtain the first table header header functional area, the first table body cell functional area, and the first table. The total data module functional area, wherein the first table header title functional area is the functional area where the header title is located, the first table main cell functional area is the functional area where the main cell is located, and the The functional area of the aggregate data module in the first table is the functional area where the aggregate data module is located. It should be noted that instead of uniformly rendering each functional area of the table, you should selectively control and combine the configuration attributes of each functional sub-area according to the actual table needs to ensure that the final table style meets the actual needs.
步骤S500：分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；Step S500: Control and render the first table header and title functional area, the first table body cell functional area, and the first table total data module functional area, respectively, to generate the first to-be-rendered table information The initial mock rendering style of ;
具体而言，为了对表格进行多功能渲染，进一步的，可分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，具体的，基于TableTitle组件，用来渲染表头标题及排序功能；基于TableHeader组件，用来处理基础表多维表一层还是多层表头逻辑；基于TableBody组件，用来处理表格主体单元格的数据渲染，保证单元格宽度定制；基于TableRender组件，用来处理表格区分左右固定表格，顶部固定表头逻辑和触发滚动交互渲染逻辑；基于TotalTable组件用来单独渲染合计数据模块等，所述初始模拟渲染样式可理解为对所述第一待渲染表格信息的初步模拟渲染之后的样式，进而将表格分为多部分进行多功能渲染。Specifically, in order to perform multi-function rendering on the table, further, the header function area of the first table, the cell function area of the first table body, and the first table total data module function area can be respectively Control rendering, specifically, based on the TableTitle component, used to render the header title and sorting function; based on the TableHeader component, used to process the logic of one layer or multi-layer header of the multi-dimensional table of the basic table; based on the TableBody component, used to process the table body The data rendering of the cell ensures the customization of the cell width; based on the TableRender component, it is used to process the table to distinguish left and right fixed tables, the top fixed header logic and the triggering scrolling interactive rendering logic; based on the TotalTable component, it is used to render the total data module separately, etc. The initial simulated rendering style can be understood as the style after preliminary simulated rendering of the first to-be-rendered table information, and then the table is divided into multiple parts for multi-function rendering.
步骤S600：基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。Step S600: Perform combined rendering on the configuration components of the initial simulated rendering style based on the custom attribute, to generate a preset simulated rendering style of the first table information to be rendered, wherein the preset simulated rendering style satisfies the preset simulated rendering style. Set component function information.
具体而言，为了在所述初始模拟渲染样式对所述第一待渲染表格信息进行更为细致的渲染，进一步的，可基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，具体的，通过loading属性来自定义控制组件的加载状态；通过dataSource控制表格主体内容行列数据的渲染；通过columns控制表格表头字段的定制渲染，columns内部也有许多属性用来控制表格功能定制使用的：使用title显示表头文字支持自定义渲染，用dataIndex索引dataSource中数据对应key，使用fixed给当前列加上左固定还是右固定，colSpan控制表的单元格列合并，rowSpan控制单元格行合并，使用sort给当前列表头字段添加排序，使用width控制表格列宽，使用render生成复杂数据的渲染函数，参数分别为当前行的值、当前行数据、行索引；通过pagination属性控制表格是否显示分页及相关分页切换功能；通过summary属性控制表格显示合计数据行；通过scroll控制表格在多字段，大数据量下是否可以左右触发滚动，上下固定表头滚动；通过size控制表格间距大小模式：default/middle/small；通过一些className，border来自定义表格样式；通过一些onChange，onSortChange来响应表格交互事件等，所述预设模拟渲染样式即为在所述初始模拟渲染样式对所述第一待渲染表格信息进行更为细致的渲染之后的样式，同时，所述预设模拟渲染样式满足所述预设组件功能信息，即所述第一待渲染表格信息经过两次模拟渲染，可实现所述预设组件功能信息，进而实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景。Specifically, in order to perform more detailed rendering of the information of the first table to be rendered in the initial simulated rendering style, further, the configuration components of the initial simulated rendering style can be combined and rendered based on custom attributes, Specifically, the loading state of the control component is customized through the loading attribute; the rendering of the row and column data of the table body content is controlled through the dataSource; the customized rendering of the table header field is controlled through the columns, and there are also many attributes in the columns to control the customization of the table function: Use title to display the header text to support custom rendering, use dataIndex to index the data in the dataSource corresponding to the key, use fixed to add left or right fixed to the current column, colSpan controls table cell column merging, rowSpan controls cell row merging, use sort adds sorting to the header field of the current list, uses width to control the column width of the table, and uses render to generate a rendering function for complex data. Paging switching function; control the table to display total data rows through the summary attribute; control whether the table can be scrolled left and right in multiple fields and large data volume through scroll, and scroll with fixed headers up and down; control table spacing through size Mode: default/middle/ small; customize the table style through some className, border; respond to table interaction events through some onChange, onSortChange, etc., the preset simulation rendering style is to perform the first to-be-rendered table information in the initial simulation rendering style The style after more detailed rendering, at the same time, the preset simulation rendering style satisfies the preset component function information, that is, the first to-be-rendered table information can be simulated and rendered twice, and the preset component function can be realized information, and then realize more custom functions of the multi-function table component on the applet side, and then meet the complex interactive display scenarios.
优选的，如图2所示，本申请实施例还包括：Preferably, as shown in FIG. 2 , the embodiments of the present application further include:
步骤S610：根据所述第一表格模拟布局样式，获得待渲染页面位置信息；Step S610: simulating the layout style according to the first table, and obtaining the position information of the page to be rendered;
步骤S620：根据所述待渲染页面位置信息，匹配对应组件信息；Step S620: Match the corresponding component information according to the location information of the page to be rendered;
步骤S630：根据所述对应组件信息，获得各组件功能属性值；Step S630: Obtain the function attribute value of each component according to the corresponding component information;
步骤S640：将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染。Step S640: Upload the function attribute value of each component to the corresponding component information, and perform combined rendering on the location information of the page to be rendered.
具体而言，为了对所述待渲染页面位置信息进行组合渲染，进一步的，可根据所述第一表格模拟布局样式，获得待渲染页面位置信息，换言之，如要对表格中的表头标题所在的功能区域进行渲染，可先获得表头标题在页面显示的位置信息，进而根据所述待渲染页面位置信息，匹配对应组件信息，即将组件放在页面需要渲染的位置，同时，根据所述对应组件信息，获得各组件功能属性值，举例而言，表格中的表头标题所在的功能区域的渲染属性值基于TableTitle组件实现，进而将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染，即将表头标题所在的功能区域-表头标题功能区域组件-TableTitle进行纵向的对应匹配，基于此方法，进而对所述待渲染页面位置信息进行组合渲染。Specifically, in order to perform combined rendering on the position information of the page to be rendered, further, the layout style can be simulated according to the first table to obtain the position information of the page to be rendered. For rendering in the functional area of the page, you can first obtain the position information of the header title displayed on the page, and then match the corresponding component information according to the position information of the page to be rendered, that is, place the component in the position where the page needs to be rendered. Component information, obtain the function attribute value of each component, for example, the rendering attribute value of the functional area where the header title in the table is located is realized based on the TableTitle component, and then upload the function attribute value of each component to the corresponding component information, The position information of the page to be rendered is combined and rendered, that is, the functional area where the header title is located - the functional area component of the header title - TableTitle is vertically matched, and based on this method, the position information of the page to be rendered is combined. render.
优选的，如图3所示，本申请实施例还包括：Preferably, as shown in FIG. 3 , the embodiments of the present application further include:
步骤S710：获得所述第一待渲染表格信息的表格数据特征；Step S710: Obtain the table data feature of the first table information to be rendered;
步骤S720：根据所述表格数据特征，获得第一页面节点数量信息；Step S720: Obtain information on the number of nodes on the first page according to the table data feature;
步骤S730：判断所述第一页面节点数量信息是否达到预设节点数量信息；Step S730: judging whether the information on the number of nodes on the first page reaches a preset number of nodes;
步骤S740：若所述第一页面节点数量信息达到所述预设节点数量信息，获得第一渲染手段；Step S740: If the information on the number of nodes on the first page reaches the information on the preset number of nodes, obtain a first rendering means;
步骤S750：根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染。Step S750: Render the visualized nodes in the first table information to be rendered based on the virtual scrolling list technology according to the first rendering means.
具体而言，为了适应大数据量、多字段下的性能处理，进一步的，可获得所述第一待渲染表格信息的表格数据特征，所述表格数据特征可理解为表格中的数据特征，是否为大数据量或多字段，如果是，则根据所述表格数据特征，获得第一页面节点数量信息，所述第一页面节点数量信息可理解为小程序页面中显示的节点数量，由于小程序页面对节点数有要求，太多的节点数会造成页面卡顿，更长的渲染时间，因此判断所述第一页面节点数量信息是否达到预设节点数量信息，如果达到了，则说明小程序页面中显示的节点数量较多，可能造成页面卡顿，更长的渲染时间，为了避免此类情况发生，可根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染，具体的，使用了虚拟滚动列表技术，只渲染可见区域的节点，同时尽量减少节点层数嵌套及无用的节点，处理部分数据量分页渲染等手段，使得对表格组件的渲染适应大数据量、多字段下的性能处理。Specifically, in order to adapt to performance processing under a large amount of data and multiple fields, further, the table data feature of the first to-be-rendered table information can be obtained, and the table data feature can be understood as the data feature in the table. It is a large amount of data or multiple fields. If it is, then according to the characteristics of the table data, the information on the number of nodes on the first page is obtained. The information on the number of nodes on the first page can be understood as the number of nodes displayed in the applet page. The page has requirements on the number of nodes. Too many nodes will cause the page to freeze and take longer to render. Therefore, it is judged whether the information on the number of nodes on the first page reaches the preset number of nodes. If so, it indicates that the applet The number of nodes displayed on the page is large, which may cause the page to be stuck and the rendering time to be longer. In order to avoid such a situation, the first rendering method can be based on the virtual scrolling list technology according to the first rendering method. The visual nodes in the table information are rendered. Specifically, the virtual scrolling list technology is used to render only the nodes in the visible area, and at the same time, the nested nodes and useless nodes are minimized. The rendering of table components is suitable for performance processing under large data volume and multiple fields.
优选的，如图4所示，本申请实施例还包括：Preferably, as shown in FIG. 4 , the embodiment of the present application further includes:
步骤S721：对所述第一页面节点数量信息进行遍历分析，获得页面节点特征集合；Step S721: Perform traversal analysis on the first page node quantity information to obtain a page node feature set;
步骤S722：对所述页面节点特征集合进行中心化处理，获得第二特征数据集；Step S722: Perform centralized processing on the page node feature set to obtain a second feature data set;
步骤S723：获得所述第二特征数据集的第一协方差矩阵；Step S723: obtaining the first covariance matrix of the second feature data set;
步骤S724：对所述第一协方差矩阵进行运算，获得所述第一协方差矩阵的第一特征值和第一特征向量；Step S724: operate on the first covariance matrix to obtain a first eigenvalue and a first eigenvector of the first covariance matrix;
步骤S725：将所述页面节点特征集合投影到所述第一特征向量，获得第一降维数据集，其中所述第一降维数据集为所述页面节点特征集合降维之后获得的特征数据集。Step S725: Project the page node feature set to the first feature vector to obtain a first dimension reduction data set, wherein the first dimension reduction data set is the feature data obtained after dimension reduction of the page node feature set set.
具体而言，为了减少节点层数嵌套及无用的节点，进一步的，可对所述页面节点特征集合进行中心化处理，所述页面节点特征集合为对所述第一页面节点数量信息的节点特征进行遍历分析之后的结果。对提取到的特征数据进行数值化处理，并构建特征数据集矩阵，获得所述页面节点特征集合。继而对所述页面节点特征集合中的各特征数据进行中心化处理，首先求解所述页面节点特征集合中各特征的平均值，然后对于所有的样本，每一个特征都减去自身的均值，继而获得新的特征值，由新的特征值构成所述第二特征数据集，所述第二特征数据集为一数据矩阵。通过协方差公式：Specifically, in order to reduce the number of nested nodes and useless nodes, further, centralized processing can be performed on the page node feature set, and the page node feature set is a node for the number information of the first page node. The result of the feature after traversal analysis. The extracted feature data is processed numerically, and a feature data set matrix is constructed to obtain the page node feature set. Then, centralize each feature data in the page node feature set, first solve the average value of each feature in the page node feature set, and then for all samples, each feature subtracts its own mean value, and then Obtaining new eigenvalues, and forming the second eigendata set from the new eigenvalues, the second eigendata set is a data matrix. By the covariance formula:
对所述第二特征数据集进行运算，获得所述第二特征数据集的第一协方差矩阵。其中，
优选的，如图5所示，本申请实施例还包括：Preferably, as shown in FIG. 5 , the embodiment of the present application further includes:
步骤S810：根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息；Step S810: Obtain coordinate information and quantity information of cells to be merged according to the first table information to be rendered;
步骤S820：对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据；Step S820: Index the coordinate information and quantity information of the cells to be merged to obtain index target cell data;
步骤S830：根据所述索引目标单元格数据，对合并单元格进行渲染。Step S830: Render the merged cell according to the index target cell data.
进一步的，如图6所示，本申请实施例还包括：Further, as shown in FIG. 6 , the embodiments of the present application further include:
步骤S840：基于所述索引目标单元格数据，对所述第一待渲染表格信息进行筛选，获得第一单元格数据集合，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合；Step S840: Based on the index target cell data, filter the information of the first table to be rendered to obtain a first cell data set, wherein the first cell data set is all cells not to be rendered data collection;
步骤S850：根据所述第一单元格数据集合，生成第一处理指令；Step S850: generating a first processing instruction according to the first cell data set;
步骤S860：根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框。Step S860: According to the first processing instruction, perform hiding processing on the first cell data set, and cancel the cell border of the first to-be-rendered table information.
具体而言，为了合并单元格组件进行有效渲染，进一步的，可根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息，所述坐标信息即为需要进行合并的单元格的所在行值、所在列值，所述数量信息即为需要进行合并的单元格的数量，进而对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据，可理解为，基于巧妙的隐藏加单项显示的模式渲染，行合并或列合并，知道了合并数量及开始索引，进而根据所述索引目标单元格数据，对合并单元格进行渲染，即隐藏不渲染涉及到的所有单元格，只显示中间值索引的单元格数据。Specifically, in order to merge cell components for effective rendering, further, the coordinate information and quantity information of the cells to be merged can be obtained according to the first table information to be rendered, and the coordinate information is the cells to be merged. The row value and column value of the cell, the quantity information is the number of cells to be merged, and then the coordinate information and quantity information of the cells to be merged are indexed to obtain the index target cell data, which can be It is understood that, based on the mode rendering of ingenious hiding and single-item display, row merging or column merging, the number of merges and the starting index are known, and then the merged cells are rendered according to the index target cell data, that is, hiding does not involve rendering. To all cells, only the cell data of the middle value index is displayed.
进一步的，还可对所述第一单元格数据集合进行隐藏处理，使得造成一种单元格合并的假象，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合，通过根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框，实现了隐藏加单项显示的模式渲染，营造一种单元格合并的假象，进而实现了对合并单元格组件进行有效渲染。Further, the first cell data set can also be hidden, so as to create an illusion of cell merging, wherein the first cell data set is the data set of all cells that are not rendered, By performing hiding processing on the first cell data set according to the first processing instruction, and canceling the cell border of the first table information to be rendered, the mode rendering of hiding plus single-item display is realized, creating a kind of The illusion of cell merging, which in turn enables efficient rendering of merged cell components.
与现有技术相比，本发明具有如下的有益效果：Compared with the prior art, the present invention has the following beneficial effects:
1、获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。通过采用taro框架，React语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的UI渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。1. Obtain first form information to be rendered; obtain preset component function information according to the first form information to be rendered; perform fine-grained distinction on the information of the first form to be rendered based on different area functions, and generate a first form. Table simulation layout style; according to the first table simulation layout style, obtain the first table header title functional area, the first table main body cell functional area and the first table total data module functional area; The header title functional area, the first table main body cell functional area, and the first table total data module functional area perform control and rendering to generate the initial simulated rendering style of the first table information to be rendered; based on the custom attribute, The configuration components of the initial simulated rendering style are combined and rendered to generate a preset simulated rendering style of the first table information to be rendered, wherein the preset simulated rendering style satisfies the preset component function information. By adopting the taro framework and the components developed by React syntax, the component configuration scheme is used to facilitate fine-grained distinction of functions in different areas of the table, separate processing, and finally combined rendering. The mode of low coupling and high cohesion is easier to maintain and develop functions. , to display data in the form of UI rendering of the table, realize more custom functions of the multi-function table component on the applet side, and then meet the technical effect of complex interactive display scenarios.
实施例二Embodiment 2
基于与前述实施例中一种微信小程序中的类Table组件渲染方法同样发明构思，本发明还提供了一种微信小程序中的类Table组件渲染系统，如图7所示，所述系统包括：Based on the same inventive concept as the method for rendering a Table-like component in a WeChat applet in the foregoing embodiment, the present invention also provides a rendering system for a Table-like component in a WeChat applet, as shown in FIG. 7 , the system includes: :
第一获得单元11：所述第一获得单元11用于获得第一待渲染表格信息；The first obtaining unit 11: the first obtaining
第二获得单元12：所述第二获得单元12用于根据所述第一待渲染表格信息，获得预设组件功能信息；Second obtaining unit 12: the second obtaining
第一区分单元13：所述第一区分单元13用于基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；First distinguishing unit 13: The first distinguishing
第三获得单元14：所述第三获得单元14用于根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；Third obtaining unit 14: The third obtaining
第一渲染单元15：所述第一渲染单元15用于分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；The first rendering unit 15: the
第二渲染单元16：所述第二渲染单元16用于基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。Second rendering unit 16: The
进一步的，所述系统还包括：Further, the system also includes:
第四获得单元：所述第四获得单元用于根据所述第一表格模拟布局样式，获得待渲染页面位置信息；Fourth obtaining unit: the fourth obtaining unit is used to simulate the layout style according to the first table, and obtain the position information of the page to be rendered;
第一匹配单元：所述第一匹配单元用于根据所述待渲染页面位置信息，匹配对应组件信息；The first matching unit: the first matching unit is configured to match the corresponding component information according to the position information of the page to be rendered;
第五获得单元：所述第五获得单元用于根据所述对应组件信息，获得各组件功能属性值；Fifth obtaining unit: the fifth obtaining unit is configured to obtain the function attribute value of each component according to the corresponding component information;
第一上传单元：所述第一上传单元用于将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染。The first uploading unit: the first uploading unit is configured to upload the function attribute value of each component to the corresponding component information, and perform combined rendering on the position information of the page to be rendered.
进一步的，所述系统还包括：Further, the system also includes:
第六获得单元：所述第六获得单元用于获得所述第一待渲染表格信息的表格数据特征；Sixth obtaining unit: the sixth obtaining unit is used to obtain the form data feature of the first to-be-rendered form information;
第七获得单元：所述第七获得单元用于根据所述表格数据特征，获得第一页面节点数量信息；Seventh obtaining unit: the seventh obtaining unit is configured to obtain information on the number of nodes on the first page according to the feature of the table data;
第一判断单元：所述第一判断单元用于判断所述第一页面节点数量信息是否达到预设节点数量信息；The first judgment unit: the first judgment unit is used for judging whether the information on the number of nodes on the first page reaches the information on the preset number of nodes;
第八获得单元：所述第八获得单元用于若所述第一页面节点数量信息达到所述预设节点数量信息，获得第一渲染手段；Eighth obtaining unit: the eighth obtaining unit is configured to obtain the first rendering means if the information on the number of nodes on the first page reaches the information on the preset number of nodes;
第三渲染单元：所述第三渲染单元用于根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染。Third rendering unit: The third rendering unit is configured to render the visualized nodes in the information of the first table to be rendered based on the virtual scrolling list technology according to the first rendering means.
进一步的，所述系统还包括：Further, the system also includes:
第一分析单元：所述第一分析单元用于对所述第一页面节点数量信息进行遍历分析，获得页面节点特征集合；The first analysis unit: the first analysis unit is configured to perform traversal analysis on the first page node quantity information to obtain a page node feature set;
第一处理单元：所述第一处理单元用于对所述页面节点特征集合进行中心化处理，获得第二特征数据集；First processing unit: the first processing unit is configured to perform centralized processing on the page node feature set to obtain a second feature data set;
第九获得单元：所述第九获得单元用于获得所述第二特征数据集的第一协方差矩阵；Ninth obtaining unit: the ninth obtaining unit is used to obtain the first covariance matrix of the second feature data set;
第一运算单元：所述第一运算单元用于对所述第一协方差矩阵进行运算，获得所述第一协方差矩阵的第一特征值和第一特征向量；The first operation unit: the first operation unit is used to operate the first covariance matrix to obtain the first eigenvalue and the first eigenvector of the first covariance matrix;
第一投影单元：所述第一投影单元用于将所述页面节点特征集合投影到所述第一特征向量，获得第一降维数据集，其中所述第一降维数据集为所述页面节点特征集合降维之后获得的特征数据集。First projection unit: the first projection unit is configured to project the page node feature set to the first feature vector to obtain a first dimension reduction data set, wherein the first dimension reduction data set is the page Feature dataset obtained after node feature set dimensionality reduction.
进一步的，所述系统还包括：Further, the system also includes:
第十获得单元：所述第十获得单元用于根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息；Tenth obtaining unit: the tenth obtaining unit is used to obtain the coordinate information and quantity information of the cells to be merged according to the information of the first table to be rendered;
第一索引单元：所述第一索引单元用于对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据；The first indexing unit: the first indexing unit is used to index the coordinate information and quantity information of the cells to be merged to obtain index target cell data;
第四渲染单元：所述第四渲染单元用于根据所述索引目标单元格数据，对合并单元格进行渲染。Fourth rendering unit: The fourth rendering unit is configured to render the merged cell according to the index target cell data.
进一步的，所述系统还包括：Further, the system also includes:
第一筛选单元：所述第一筛选单元用于基于所述索引目标单元格数据，对所述第一待渲染表格信息进行筛选，获得第一单元格数据集合，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合；First screening unit: the first screening unit is configured to screen the information of the first table to be rendered based on the index target cell data to obtain a first cell data set, wherein the first cell The data set is the data set of all cells that are not rendered;
第一生成单元：所述第一生成单元用于根据所述第一单元格数据集合，生成第一处理指令；First generating unit: the first generating unit is configured to generate a first processing instruction according to the first cell data set;
第二处理单元：所述第二处理单元用于根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框。Second processing unit: the second processing unit is configured to perform hiding processing on the first cell data set according to the first processing instruction, and cancel the cell border of the first table information to be rendered.
前述图1实施例一中的一种微信小程序中的类Table组件渲染方法的各种变化方式和具体实例同样适用于本实施例的一种微信小程序中的类Table组件渲染系统，通过前述对一种微信小程序中的类Table组件渲染方法的详细描述，本领域技术人员可以清楚的知道本实施例中一种微信小程序中的类Table组件渲染系统的实施方法，所以为了说明书的简洁，在此不再详述。Various variations and specific examples of the Table-like component rendering method in a WeChat applet in the first embodiment of FIG. 1 are also applicable to the Table-like component rendering system in a WeChat applet of this embodiment. For a detailed description of a rendering method of a Table-like component in a WeChat applet, those skilled in the art can clearly know the implementation method of a Table-like component rendering system in a WeChat applet in this embodiment, so for the sake of brevity of the description , and will not be described in detail here.
实施例三Embodiment 3
下面参考图8来描述本申请实施例的电子设备。The electronic device according to the embodiment of the present application is described below with reference to FIG. 8 .
图8图示了根据本申请实施例的电子设备的结构示意图。FIG. 8 illustrates a schematic structural diagram of an electronic device according to an embodiment of the present application.
基于与前述实例施中一种微信小程序中的类Table组件渲染方法的发明构思，本发明还提供一种微信小程序中的类Table组件渲染系统，其上存储有计算机程序，该程序被处理器执行时实现前文所述一种微信小程序中的类Table组件渲染系统的任一方法的步骤。Based on the inventive concept of a table-like component rendering method in a WeChat applet implemented in the aforementioned example, the present invention also provides a table-like component rendering system in a WeChat applet, on which a computer program is stored, and the program is processed The steps of implementing any method of the above-mentioned Table-like component rendering system in a WeChat applet when the browser is executed.
其中，在图8中，总线架构(用总线300来代表)，总线300可以包括任意数量的互联的总线和桥，总线300将包括由处理器302代表的一个或多个处理器和存储器304代表的存储器的各种电路链接在一起。总线300还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口305在总线300和接收器301和发送器303之间提供接口。接收器301和发送器303可以是同一个元件，即收发机，提供用于在传输介质上与各种其他系统通信的单元。处理器302负责管理总线300和通常的处理，而存储器304可以被用于存储处理器302在执行操作时所使用的数据。8, the bus architecture (represented by bus 300),
本申请实施例提供一种微信小程序中的类Table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。An embodiment of the present application provides a method for rendering a Table-like component in a WeChat applet, wherein the method includes: obtaining first table information to be rendered; obtaining preset component function information according to the first table information to be rendered; Based on different area functions, fine-grained distinction is made on the information of the first table to be rendered, and a first table simulation layout style is generated; The table body cell functional area and the first table total data module functional area; respectively for the first table header title functional area, the first table body cell functional area and the first table total data module functional area Perform control rendering to generate an initial simulation rendering style of the first table information to be rendered; based on the custom attribute, perform combined rendering on the configuration components of the initial simulation rendering style to generate a preset simulation of the first table information to be rendered A rendering style, wherein the preset simulated rendering style satisfies the preset component function information.
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的系统。The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block in the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to the processor of a general purpose computer, special purpose computer, embedded processor or other programmable data processing device to produce a machine such that the instructions executed by the processor of the computer or other programmable data processing device produce A system for implementing the functions specified in one or more of the flowcharts and/or one or more blocks of the block diagrams.
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令系统的制造品，该指令系统实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable memory result in an article of manufacture comprising a system of instructions, the instructions The system implements the functions specified in the flow or flow of the flowcharts and/or the block or blocks of the block diagrams.
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。These computer program instructions can also be loaded on a computer or other programmable data processing device to cause a series of operational steps to be performed on the computer or other programmable device to produce a computer-implemented process such that The instructions provide steps for implementing the functions specified in the flow or blocks of the flowcharts and/or the block or blocks of the block diagrams.
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。Although preferred embodiments of the present invention have been described, additional changes and modifications to these embodiments may occur to those skilled in the art once the basic inventive concepts are known. Therefore, the appended claims are intended to be construed to include the preferred embodiment and all changes and modifications that fall within the scope of the present invention.
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。It will be apparent to those skilled in the art that various modifications and variations can be made in the present invention without departing from the spirit and scope of the invention. Thus, provided that these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.
Claims (8)
Translated fromChinesePriority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110926428.9ACN113608815B (en) | 2021-08-12 | 2021-08-12 | A method and system for rendering a Table-like component in a WeChat applet |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110926428.9ACN113608815B (en) | 2021-08-12 | 2021-08-12 | A method and system for rendering a Table-like component in a WeChat applet |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113608815Atrue CN113608815A (en) | 2021-11-05 |
| CN113608815B CN113608815B (en) | 2025-04-04 |
Family
ID=78340575
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110926428.9AActiveCN113608815B (en) | 2021-08-12 | 2021-08-12 | A method and system for rendering a Table-like component in a WeChat applet |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113608815B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114239513A (en)* | 2021-12-07 | 2022-03-25 | 华盟科技咨询(深圳)有限公司 | Form generation method, device, computer equipment and storage medium |
| CN114327223A (en)* | 2021-12-28 | 2022-04-12 | 中电云数智科技有限公司 | Table display method and device |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180285337A1 (en)* | 2017-03-31 | 2018-10-04 | Mckesson Corporation | Method, apparatus, and computer program product for managing retrieval of content for display by a browser |
| CN111552897A (en)* | 2019-02-08 | 2020-08-18 | 甲骨文国际公司 | Client-side customization and rendering of web content |
| CN111680479A (en)* | 2020-04-23 | 2020-09-18 | 平安国际智慧城市科技股份有限公司 | Method, device and computer equipment for generating form based on Excel template |
| CN111859883A (en)* | 2020-07-23 | 2020-10-30 | 北京字节跳动网络技术有限公司 | Program table creating method and device and electronic equipment |
| CN113126984A (en)* | 2021-04-06 | 2021-07-16 | 北京明略昭辉科技有限公司 | Data rendering method, system, device and storage medium based on table component |
- 2021
- 2021-08-12CNCN202110926428.9Apatent/CN113608815B/enactiveActive
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180285337A1 (en)* | 2017-03-31 | 2018-10-04 | Mckesson Corporation | Method, apparatus, and computer program product for managing retrieval of content for display by a browser |
| CN111552897A (en)* | 2019-02-08 | 2020-08-18 | 甲骨文国际公司 | Client-side customization and rendering of web content |
| CN111680479A (en)* | 2020-04-23 | 2020-09-18 | 平安国际智慧城市科技股份有限公司 | Method, device and computer equipment for generating form based on Excel template |
| CN111859883A (en)* | 2020-07-23 | 2020-10-30 | 北京字节跳动网络技术有限公司 | Program table creating method and device and electronic equipment |
| CN113126984A (en)* | 2021-04-06 | 2021-07-16 | 北京明略昭辉科技有限公司 | Data rendering method, system, device and storage medium based on table component |
Non-Patent Citations (2)
| Title |
|---|
| 文永革;: "Java复合数据类型组件及其MVC模型在GUI定制开发中的应用", 计算机应用与软件, no. 08, 15 August 2009 (2009-08-15)* |
| 王昆;张力生;张化川;: "Java Swing中的渲染器机制", 重庆工学院学报(自然科学版), no. 10, 15 October 2008 (2008-10-15)* |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114239513A (en)* | 2021-12-07 | 2022-03-25 | 华盟科技咨询(深圳)有限公司 | Form generation method, device, computer equipment and storage medium |
| CN114327223A (en)* | 2021-12-28 | 2022-04-12 | 中电云数智科技有限公司 | Table display method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113608815B (en) | 2025-04-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6957392B2 (en) | Interface engine providing a continuous user interface | |
| US6069630A (en) | Data processing system and method for creating a link map | |
| US5592392A (en) | Integrated circuit design apparatus with extensible circuit elements | |
| US20070216681A1 (en) | Method, apparatus, and system for processing geometric data of assembled parts | |
| CN110489116A (en) | A kind of rendering method of the page, device and computer storage medium | |
| US9934354B1 (en) | Methods, systems, and computer program product for implementing a layout-driven, multi-fabric schematic design | |
| CN102339291B (en) | Method and equipment for generating list | |
| CN104572668B (en) | Method and apparatus based on multiple pattern file generated Merge Styles files | |
| TW201218003A (en) | Method, apparatus, and article of manufacture for providing in situ, customizable information in designing electronic circuits with electrical awareness | |
| CN119883236A (en) | Visual programming for deep learning | |
| US20080178159A1 (en) | Methods, systems and program products for annotating system traces with control program information and presenting annotated system traces | |
| CN113608815A (en) | A method and system for rendering a Table-like component in a WeChat applet | |
| JP4197328B2 (en) | System for controlling display of data editing screen and method thereof | |
| CN114595657A (en) | Chip layout method and device and electronic equipment | |
| US10204187B1 (en) | Method and system for implementing data reduction for waveform data | |
| TWI713680B (en) | Method, system and computer-implemented method for controlling physical placement and method of manufacturing an integrated circuit | |
| CN117195818B (en) | Power supply design command generation method and device, electronic equipment and storage medium | |
| US8694943B1 (en) | Methods, systems, and computer program product for implementing electronic designs with connectivity and constraint awareness | |
| CN108399173A (en) | A kind of style configuration of page assembly, page generation method and its device | |
| JP2001109784A (en) | Method and apparatus for optimizing placement and routing, and recording medium storing program for optimizing placement and routing | |
| CN116775015A (en) | Layer display method and device | |
| US7562328B1 (en) | Navigation tool for connectors | |
| JP2012128609A (en) | Drawing creation support method and apparatus | |
| JP3476688B2 (en) | Netlist generation method and netlist generation device | |
| US20200159805A1 (en) | System and method for producing transferable, modular web pages |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |