Component data table rendering method, system and equipment and storage medium

Abstract

The invention relates to a modularized data table rendering method, system and device and a storage medium, and belongs to the technical field of computers. The method is applied to a client browser, and comprises the following steps: loading a jQuery framework and a Bootstrap-Table plug-in, and applying the Bootstrap-Table plug-in to a table, a packaging component, an initialization configuration item, a calling interface to request data, and receiving data for rendering. The method is applied to a server side, and comprises the following steps: receiving a request, and sending rendering data to a client side; according to the invention, a modularized table system is realized through jQuery and Bootstrap-Table, the development process can be simplified, repeated work can be reduced, the development efficiency can be improved, and interaction with a server can be realized through calling an HTTP interface, necessary data can be dynamically loaded, the transmission quantity can be reduced, performance bottleneck can be avoided, rapid rendering can be realized, and the user experience can be optimized.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology and relates to a componentized data table rendering method, system, device and storage medium. Background Art

[0002] The jQuery framework is a fast, compact and feature-rich JavaScript library that has become one of the core tools for front-end development. It greatly improves development efficiency by simplifying HTML document traversal, event handling, and animation operations.

[0003] The Bootstrap-Table plug-in further expands the functions of HTML tables based on the jQuery framework, supports data formatting, table selectors, paging, etc., making the display and operation of table data more flexible and convenient.

[0004] With the development of technology, the rendering technology of table components has changed from simple static display to dynamic rendering that supports complex interactions, which is crucial to improving user experience and data processing efficiency.

[0005] Existing technologies, such as the Bootstrap-Table plugin, provide some dynamic functions, such as basic paging, sorting, and searching. However, in current web pages, once tables are rendered, their structure and style are difficult to modify. In addition, traditional table rendering technology often faces performance bottlenecks when processing large amounts of data, resulting in slow rendering speed and poor user experience.

[0006] Therefore, with the surge in data volume today, how to provide a more efficient and flexible table rendering method is an urgent problem to be solved. Summary of the invention

[0007] In order to solve the technical problems in the above-mentioned background technology, the present invention provides a componentized data table rendering method, system, device and storage medium.

[0008] The technical solution of the present invention to solve the above technical problems is as follows: In a first aspect, a componentized data table rendering method is provided, the method being applied to a client browser and comprising the steps of: Load the jQuery framework and Bootstrap-Table plugin; Initialize the table and use the Bootstrap-Table plugin for the table; Write component code based on the Bootstrap-Table plug-in and arrange and run it; Expand the table's initialization configuration items as needed and supplement the business logic code; Call the HTTP request interface on the server side to initiate a data request to the server side; Receive data returned by the server and dynamically fill it into the page table for rendering and display.

[0009] In a second aspect, a componentized data table rendering method is provided, which is applied to a server and includes: Set up the HTTP request interface to receive HTTP requests sent by the client browser; Query rendering data according to HTTP request, and then send the rendering data to the client browser; wherein, the client browser is used to call the HTTP request interface of the server side, initiate data request to the server, and also to receive data returned by the server side; the client browser is also used to dynamically fill the returned data into the browser page table for rendering and display; the previous client browser is also used to load the jQuery framework and Bootstrap-Table plug-in to initialize the table, and use the Bootstrap-Table plug-in for the table, to write component code based on the Bootstrap-Table plug-in and arrange the operation, and to expand the initialization configuration items of the table according to needs, and supplement the business logic code.

[0010] In a third aspect, a componentized data table rendering system is provided, the system comprising: Framework and plugin layout module, used to load jQuery framework and Bootstrap-Table plugin; Initialize the table module, which is used to initialize the table and use the Bootstrap-Table plug-in for the table; Encapsulation module, used to write component code and arrange operation based on Bootstrap-Table plug-in; Initialization configuration item module, used to expand the initialization configuration items of the table according to requirements and supplement the business logic code; The calling interface and requesting data module is used to call the HTTP request interface on the server side and initiate a data request to the server side; The module for receiving and rendering data is used to receive the data returned by the server and dynamically fill it into the page table for rendering and display. A fourth aspect provides a computer device, including: at least one processor; and A memory storing a computer program executable on the processor, wherein the processor executes the steps of the componentized data table rendering method when executing the program.

[0011] In a fifth aspect, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the componentized data table rendering method as described above is implemented.

[0012] The beneficial effects of the present invention are: (1) The present invention uses jQuery and Bootstrap frameworks to help quickly build a highly componentized table system. Well-encapsulated components are easy to maintain and expand. As actual business needs change, components can be quickly modified or new functions can be added. (2) The present invention can combine and encapsulate the controls required by all the tables on the platform. There is no need to define and bind callback events to each business module separately. Developers only need to reference and initialize custom options as needed, thereby improving development efficiency and reducing development costs. (3) The present invention exchanges data with the server by calling the HTTP request interface on the server side, and can request only necessary data, thereby reducing the amount of data transmission; after receiving the data returned by the server, the server data is dynamically loaded into the table, avoiding performance problems caused by loading a large amount of data at one time, thereby speeding up the rendering speed and improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0014] Figure 1 The present invention is a flowchart of a componentized data table rendering method applied to a client browser in an embodiment of the present invention.

[0015] Figure 2 The present invention is a schematic diagram of a componentized data table rendering method applied to a server in an embodiment of the present invention.

[0016] Figure 3 It is a schematic diagram of the structure of a componentized data table rendering system in an embodiment of the present invention.

[0017] Figure 4 Schematic diagram of the structure of the encapsulation module in an embodiment of the present invention.

[0018] Figure 5 It is a schematic diagram of the structure of the initialization configuration item module in an embodiment of the present invention.

[0019] Figure 6 It is a schematic diagram of the structure of a module for receiving and rendering data in an embodiment of the present invention.

[0020] Figure 7 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention.

[0021] In the accompanying drawings, the components represented by the reference numerals are listed as follows: 3001, framework and plug-in layout module; 3002, initialization table module; 3003, encapsulation module; 3004, initialization configuration item module; 3005, call interface and request data module; 3006, receive and render data module; 30031, encapsulate button component unit; 30032, encapsulate display component unit; 30033, encapsulate filter component unit; 30034, encapsulate style component unit; 30035, layout operation unit; 30041, extension configuration item unit; 30042, layout business logic code unit; 30061, initial data reception unit; 30062, cache data unit; 30063, initial rendering unit; 30064, secondary rendering processing unit; 410, processor; 420, communication interface; 430, memory; 440, communication bus. DETAILED DESCRIPTION

[0022] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0023] With the continuous advancement of information technology, users' demand for table components in web pages is no longer limited to static data display, but they expect to be able to perform complex data interaction and real-time updates. This change has brought new challenges to front-end technology, especially in the context of rapid growth in data volume. Traditional table rendering technology can no longer meet the performance and flexibility requirements of modern applications.

[0024] Existing technologies, such as the Bootstrap-Table plugin, provide basic dynamic functions such as paging, sorting, and searching, but they are limited in the flexibility and customizability of the table. Once the table is rendered, modifications to its structure and style often require complex DOM operations (Document Object Model operations), which not only increases the difficulty of development but may also cause performance issues. In addition, when processing large-scale data sets, these plugins often encounter performance bottlenecks due to the high overhead of DOM operations, resulting in slow page response, or even browser freezes or crashes, which seriously affects the user experience.

[0025] Therefore, with the surge in data volume today, how to provide a more efficient and flexible table rendering method is an urgent problem to be solved.

[0026] In view of the above problems, this embodiment provides a componentized data table rendering method, which is applied to a client browser. Figure 1 A schematic diagram of the componentized data table rendering method provided in this embodiment is shown in FIG. Figure 1 As shown, the method includes: Step S101, loading the jQuery framework and the Bootstrap-Table plug-in.

[0027] It is worth mentioning that the jQuery library should be introduced first, because the Bootstrap-Table plug-in depends on jQuery; then the Bootstrap CSS file should be introduced to ensure that the Bootstrap style can be applied, and the JavaScript file should be introduced to realize the interactive functions of the Bootstrap components; finally, the Bootstrap-Table CSS file should be introduced to make the Bootstrap-Table plug-in have its own unique style, and the JavaScript file should be introduced to realize the enhanced functions of the table.

[0028] It is also worth noting that the source of the jQuery framework and Bootstrap-Table plugin can be a public CDN service or a local server. CDN (Content Distribution Network) is a network service that speeds up user access to websites by caching and distributing content on a globally distributed network of servers. For libraries such as jQuery and Bootstrap, many CDN service providers provide links to these resources, which can be directly used in HTML. <script>或<link>标签引入，该方式可以减少服务器负担，因为库文件的加载是由CDN服务商的服务器完成的，同时由于CDN的分布式特性，可以加快全球用户的加载速度。同时，还可以将库文件下载并保存在服务器上，该方式在CDN服务不可用的情况下，可以通过引用本地路径来加载。本实施例对此不做具体限定。

[0029] 步骤S102，初始化表格，并将Bootstrap-Table插件用于该表格。

[0030] 可以理解的是，初始化表格是指设置表格的HTML结构，并准备将其与Bootstrap-Table插件结合使用，例如：在HTML文档中定义一个元素，这个元素将作为Bootstrap-Table插件应用的目标，初始化的表格包含和部分，其中定义表头，用于填充数据行。

[0031] 将Bootstrap-Table插件用于表格是指确保在页面中正确引入了Bootstrap-Table的CSS和JavaScript文件，使普通的HTML表格具备分页、排序、搜索等增强功能。

[0032] 步骤S103，在Bootstrap-Table插件基础上编写组件代码并布置运行。

[0033] 可以理解的是，组件代码是指构成Web页面中可复用UI组件的代码，包括HTML、CSS和JavaScript，它们共同定义了组件的结构、样式和基本行为。组件代码是为了创建可以在整个应用或多个应用中重复使用的UI元素，如按钮、输入框、对话框等。

[0034] 还可以理解是，编写组件代码并布置运行的具体过程，是需要进行定义表格的HTML结构、编写或引用CSS样式和使用JavaScript初始化Bootstrap-Table插件。更具体的，a.定义表格的HTML结构，是指编写表格的基础HTML代码，创建元素，并定义和部分，用于放置表头，定义列标题，而用于放置表格的主体内容，即数据行；b.编写或引用CSS样式，是指定义或链接CSS样式，以控制表格的外观，包括设置背景颜色、字体样式、边框样式等，确保表格符合设计规范和用户体验需求；c.使用JavaScript初始化Bootstrap-Table插件,是指编写JavaScript代码来初始化Bootstrap-Table插件，通过调用.bootstrapTable()方法并传递配置项来激活表格的动态功能，如分页、排序和搜索。

[0035] 步骤S104，根据需求扩展表格的初始化配置项，并补充业务逻辑代码。

[0036] 可以理解的是，逻辑代码是指实现特定业务逻辑和数据处理的代码，可以用JavaScript编写，负责处理用户交互、数据验证、状态管理等。逻辑代码是为了实现应用的业务需求，处理复杂的数据处理和业务规则。

[0037] 步骤S105，调用服务器端的HTTP请求接口，向服务器端发起数据请求。

[0038] 可以理解的是，客户端（即浏览器）使用JavaScript来发起HTTP请求到这些服务器端定义的接口。对于使用的JavaScript，优选使用AJAX，AJAX允许表格在不刷新整个页面的情况下，异步地从服务器获取数据，可以提升用户体验，用户可以快速看到表格数据，而不必等待页面整体刷新，同时通过AJAX，只有必要的数据被加载和处理，这减少了数据传输量和服务器响应时间，从而提高了表格的性能和响应速度。当然，也可以使用Fetch API，Fetch API提供了一个现代、简洁且功能强大的方法来发起网络请求，并且支持Promise，使得异步请求的处理更加方便和直观。Fetch API可以很容易地集成到任何JavaScript代码中，并且可以处理复杂的HTTP请求和响应。

[0039] 步骤S106，接收服务器端返回数据，并将返回数据动态填充到页面表格中进行渲染显示。

[0040] 本实施例通过jQuery和Bootstrap-Table框架，实现了一个高度组件化的表格系统，该系统封装良好，易于维护和扩展，能够快速适应业务需求的变化。它通过组合封装所有表格所需的控件，简化了开发流程，避免了重复定义和绑定回调事件，从而提高了开发效率并降低了成本。此外，通过调用高效的HTTP请求接口与服务器进行数据交互，仅请求必要的数据，减少了数据传输量，动态加载数据到表格中，避免了一次性加载大量数据的性能问题，加快了渲染速度，并显著改善了用户体验。

[0041] 基于上述实施例，该方法中，在所述步骤S103中，还包括：需要编写封装的功能组件包括：按钮组件、显示配置组件、筛选配置组件、样式定义组件、分页功能组件、排序功能组件、导出表格功能组件和行内嵌功能组件中的一种或多种。

[0042] 通过在Bootstrap-Table插件基础上，二次开发，封装通用组件，本实施例不仅提高了开发效率，减少了代码重复，并加快了开发速度，还降低了后期维护成本，因为统一的组件更易于维护和更新。同时，这种封装方法增强了用户体验，因为统一的交互和视觉风格提供了一致的操作感受。此外，封装过程促使开发者更加关注组件的设计和实现细节，从而提升了代码质量；良好的封装使得组件更加灵活，能够轻松适应不同的业务需求和变化。

[0043] 基于上述实施例，该方法中，所述步骤S103，包括：步骤S1031，封装通用的按钮组件，按钮包括：搜索、添加、修改、删除；步骤S1032，封装通用的显示配置组件，显示配置项包括：表格的行高、表格的列宽；步骤S1033，封装通用的筛选配置组件，筛选配置项包括：文本输入、日期范围；步骤S1034，封装通用的样式定义组件，定义的样式包括：条纹样式、边框样式、悬停效果；步骤S1035，编写并将各封装完毕的组件代码布置运行。

[0044] 可以理解的是，根据表格增删改查的特性，封装通用的按钮组件，该过程创建包含搜索、添加、修改、删除等操作的按钮组件库，这些按钮不仅具有统一的风格和行为，还能够通过参数配置来适应不同的业务场景。该组件可以减少重复代码，加快开发速度，保持界面的一致性，提升用户体验。

[0045] 封装通用的显示配置组件，允许用户自定义表格的行高和列宽，以适应不同数据展示的需求。该组件提供灵活的数据显示选项，提升用户满意度和数据的可读性。

[0046] 封装通用的筛选配置组件，支持文本输入和日期范围等筛选条件，使得用户可以根据需要快速筛选表格数据。该组件可以增强数据交互性，使用户能够快速定位到感兴趣的数据，提高工作效率。

[0047] 封装通用的样式定义组件，包括条纹样式、边框样式和悬停效果等，以实现视觉上的统一和美观。该组件确保整个应用的视觉效果一致性，减少样式冲突，提升整体美观度。

[0048] 组件代码布置运行是指将编写好的代码（包括HTML、CSS和JavaScript）整合到项目中，并确保它们在浏览器中正确运行。

[0049] 基于上述实施例，该方法中，所述步骤S104，包括：步骤S1041，整理需求，扩展表格初始化配置项，初始化配置项包括对功能组件的行为定制和对功能组件的外观定制；步骤S1042，按照功能组件，补充或扩展详细业务逻辑代码，通过业务逻辑代码将传入参数转换为功能参数。

[0050] 可以理解的是，行为定制是指根据业务需求调整组件的功能和交互方式，是组件的逻辑和行为，包括:a.功能激活与禁用,即根据用户的角色或权限，启用或禁用某些按钮或功能；b.事件处理,即为组件绑定特定的事件处理程序，如点击按钮时执行搜索操作；c.数据交互,即定义组件如何与后端服务交互，例如获取数据、提交表单等;d.状态管理,即管理组件的状态，如选中、高亮显示或错误提示;e.动态更新,即根据用户操作或其他事件动态更新组件的行为。

[0051] 外观定制是指根据视觉设计需求调整组件的视觉表现，是组件的样式和布局，包括：a.颜色和字体,即更改组件的颜色方案、字体类型和大小；b.尺寸和布局,即调整组件的尺寸和布局，以适应不同的屏幕尺寸和设计规范;c.边距和填充,即设置组件的内外边距，影响组件的间距和布局;d.悬停和焦点效果,即定义鼠标悬停或组件获得焦点时的视觉反馈;e.响应式设计,即确保组件在不同设备和分辨率下保持一致的外观和体验。

[0052] 通过行为定制和外观定制，有利于开发者使组件更加贴合特定的业务场景和设计要求，从而提升应用的整体性能和用户体验。

[0053] 基于上述实施例，该方法中，所述步骤S106，包括：步骤S1061，接收服务器初次返回数据；步骤S1062，确定并将第一目标渲染数据存储在本地缓存内；步骤S1063，将初次返回数据动态填充到页面表格中进行渲染显示；步骤S1064，当发生二次页面渲染任务，先检查本地缓存中是否有第二目标渲染数据，若有，直接从本地缓存中读取数据来执行页面渲染任务；若否，发起HTTP请求到服务器，重复步骤S1063。

[0054] 可选的是，所述步骤S106，还包括：在接收服务器端返回数据后，采用增量渲染或虚拟滚动的方式，将数据动态填充到页面表格中进行渲染显示。这样，能够更高效地动态填充大量数据到页面表格中，而无需一次性加载全部数据。

[0055] 本实施例结合仅在必要时向服务器发起请求的策略和客户端本地缓存缓存机制，有效减轻了服务器负载，提升了响应速度，并减少了网络延迟对用户体验的影响，这样提高了数据访问效率，优化了用户体验，并通过数据同步策略确保了数据的一致性。此外，还能增强应用的容错能力和可靠性，从而实现了更快的数据访问速度、更高的性能和更好的用户体验。

[0056] 本实施例提供一种组件化数据表格渲染方法，所述方法应用于服务器端。图2为本发明实施例提供的组件化数据表格渲染方法流程示意图，如图2所示，本方法包括：步骤S201，设置HTTP请求接口，接收客户端浏览器发送的HTTP请求；步骤S202，根据HTTP请求查询渲染数据，再将渲染数据发送给客户端浏览器；其中，所述客户端浏览器用于调用服务器端的HTTP请求接口，向服务器发起数据请求，也用于接收服务器端返回数据；所述客户端浏览器还用于将返回数据动态填充到浏览器页面表格中进行渲染显示；之前的所述客户端浏览器还再用于加载jQuery框架和Bootstrap-Table插件，用于初始化表格，并将Bootstrap-Table插件用于该表格，用于在Bootstrap-Table插件基础上编写组件代码并布置运行，以及用于根据需求扩展表格的初始化配置项，并补充业务逻辑代码。

[0057] 本实施例通过在服务器端设置高效的HTTP请求接口，实现了对客户端仅提供必要的数据，从而减少了数据传输量和网络负载。服务器端处理请求后，只发送所需的数据响应，使得客户端能够动态加载这些数据到表格中，避免了一次性处理和渲染大量数据的性能瓶颈，这样既提升了数据处理效率，也改善了用户的响应速度和交互体验。

[0058] 如图3所示，本实施例提供一种组件化数据表格渲染系统，所述系统应用于客户端浏览器，包括：框架及插件布置模块3001，用于加载jQuery框架和Bootstrap-Table插件；初始化表格模块3002，用于初始化表格，并将Bootstrap-Table插件用于该表格；封装模块3003，用于在Bootstrap-Table插件基础上编写组件代码并布置运行；初始化配置项模块3004，用于根据需求扩展表格的初始化配置项，并补充业务逻辑代码；调用接口及请求数据模块3005，用于调用服务器端的HTTP请求接口，向服务器端发起数据请求；接收及渲染数据模块3006，用于接收服务器端返回数据，并动态填充到页面表格中进行渲染显示。

[0059] 基于上述实施例，所述封装模块3003中，需要编写封装的功能组件包括：按钮组件、显示配置组件、筛选配置组件、样式定义组件、分页功能组件、排序功能组件、导出表格功能组件和行内嵌功能组件中的一种或多种；如图4所示，具体的，所述封装模块3003包括：封装按钮组件单元30031，用于封装通用的按钮组件，按钮包括：搜索、添加、修改、删除；封装显示组件单元30032，用于封装通用的显示配置组件，显示配置项包括：表格的行高、表格的列宽；封装筛选组件单元30033，用于封装通用的筛选配置组件，筛选配置项包括：文本输入、日期范围；封装样式组件单元30034，用于封装通用的样式定义组件，定义的样式包括：条纹样式、边框样式、悬停效果；布置运行单元30035，用于编写并将各封装完毕的组件代码布置运行。基于上述实施例，如图5所示，所述初始化配置项模块3004中，扩展配置项单元30041，用于整理需求，扩展表格初始化配置项，初始化配置项包括对功能组件的行为定制和对功能组件的外观定制；布置业务逻辑代码单元30042，用于按照功能组件，补充或扩展详细业务逻辑代码，通过业务逻辑代码将传入参数转换为功能参数；其中，如图6所示，所述接收及渲染数据模块3006，包括：初次接收数据单元30061，用于接收服务器初次返回数据；缓存数据单元30062，用于确定并将第一目标渲染数据存储在本地缓存内；初次渲染单元30063，用于将初次返回数据动态填充到页面表格中进行渲染显示；二次渲染处理单元30064，用于当发生二次页面渲染任务，先检查本地缓存中是否有第二目标渲染数据，若有，直接从本地缓存中读取数据来执行页面渲染任务；若否，发起HTTP请求到服务器，重复初次渲染单元。

[0060] 本实施例系统结合jQuery和Bootstrap框架，构建一个高度组件化的表格系统，具有良好的封装结构，能够灵活、迅速响应业务需求的变更。系统内部，通过封装必要的功能组件，简化了开发流程，消除了对重复定义和回调事件的需求，极大提升了开发效率并降低了开发成本。系统还优化了与服务器的数据交互，仅请求必要的数据，减少了数据传输量，动态加载数据至表格中，有效避免了因一次性加载大量数据而导致的性能问题，加快了页面渲染速度，并显著提升了用户体验。

[0061] 在图7为本发明实施例提供的电子设备的结构示意图，如图7所示，该电子设备可以包括：处理器410、通信接口420、存储器430和通信总线440，其中，处理器410，通信接口420，存储器430通过通信总线440完成相互间的通信。处理器410可以调用存储器430中的逻辑指令，以执行如下方法，所述方法应用于客户端浏览器，包括步骤：加载jQuery框架和Bootstrap-Table插件；初始化表格，并将Bootstrap-Table插件用于该表格；在Bootstrap-Table插件基础上编写组件代码并布置运行；根据需求扩展表格的初始化配置项，并补充业务逻辑代码；调用服务器端的HTTP请求接口，向服务器端发起数据请求；接收服务器端返回数据，并动态填充到页面表格中进行渲染显示。

[0062] 此外，上述的存储器430中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

[0063] 在本实施例中，提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述实施例所述的组件化数据表格渲染方法。

[0064] 本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

[0065] 计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

[0066] 计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

[0067] 可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++、Ruby、Go，还包括常规的过程式程序设计语言—诸如"C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

[0068] 以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。< / script>

Claims

1. A componentized data table rendering method, characterized in that: The method is applied to a client browser and comprises the steps of: Load the jQuery framework and Bootstrap-Table plugin; Initialize the table and use the Bootstrap-Table plugin for the table; Write component code based on the Bootstrap-Table plug-in and arrange and run it; Expand the table's initialization configuration items as needed and supplement the business logic code; Call the HTTP request interface on the server side to initiate a data request to the server side; Receive data returned by the server and dynamically fill it into the page table for rendering and display.

2. The componentized data table rendering method according to claim 1, characterized in that: In the steps of writing component code and arranging operation based on the Bootstrap-Table plug-in, the encapsulated functional components that need to be written include: one or more of: button components, display configuration components, filter configuration components, style definition components, paging functional components, sorting functional components, export table functional components and row embedded functional components.

3. The componentized data table rendering method according to claim 2, characterized in that: The steps of writing component code and arranging operation based on the Bootstrap-Table plug-in include: Encapsulates common button components, including search, add, modify, and delete; Encapsulates common display configuration components, display configuration items include: table row height, table column width; Encapsulates common filtering configuration components, filtering configuration items include: text input, date range; Encapsulates common style definition components, including stripe style, border style, and hover effect; Write and run the code for each packaged component.

4. The componentized data table rendering method according to claim 1, characterized in that: The initialization configuration items of the table are extended according to the requirements, and the business logic code steps are supplemented, and further include: Organize requirements and expand the initialization configuration items of the table. The initialization configuration items include the customization of the behavior and appearance of functional components. According to the functional components, supplement or expand the detailed business logic code, and convert the incoming parameters into functional parameters through the business logic code.

5. The componentized data table rendering method according to claim 1, characterized in that: The step of receiving the data returned by the server and dynamically filling it into the page table for rendering and displaying also includes: Receive the initial data returned by the server; Determine and store first target rendering data in a local cache; Dynamically fill the first returned data into the page table for rendering and display; When a secondary page rendering task occurs, first check whether there is a second target rendering data in the local cache. If so, read the data directly from the local cache to perform the page rendering task; if not, initiate an HTTP request to the server and repeat the initial rendering steps.

6. A componentized data table rendering method, characterized in that: The method is applied to the server side and comprises the steps of: Set up the HTTP request interface to receive HTTP requests sent by the client browser; Query rendering data according to HTTP request, and then send the rendering data to the client browser; wherein, the client browser is used to call the HTTP request interface of the server side, initiate data request to the server, and also to receive data returned by the server side; the client browser is also used to dynamically fill the returned data into the browser page table for rendering and display; the previous client browser is also used to load the jQuery framework and Bootstrap-Table plug-in to initialize the table, and use the Bootstrap-Table plug-in for the table, to write component code based on the Bootstrap-Table plug-in and arrange the operation, and to expand the initialization configuration items of the table according to needs, and supplement the business logic code.

7. A componentized data table rendering system, characterized in that: The system comprises: Framework and plugin layout module, used to load jQuery framework and Bootstrap-Table plugin; Initialize the table module, which is used to initialize the table and use the Bootstrap-Table plug-in for the table; Encapsulation module, used to write component code and arrange operation based on Bootstrap-Table plug-in; Initialization configuration item module, used to expand the initialization configuration items of the table according to requirements and supplement the business logic code; The calling interface and requesting data module is used to call the HTTP request interface on the server side and initiate a data request to the server side; The data receiving and rendering module is used to receive the data returned by the server and dynamically fill it into the page table for rendering and display.

8. The componentized data table rendering system according to claim 7, characterized in that: In the encapsulation module, the functional components that need to be written and encapsulated include: one or more of a button component, a display configuration component, a filter configuration component, a style definition component, a paging function component, a sorting function component, an export table function component, and a row embedding function component; Specifically, the packaging module includes: Encapsulate button component unit, used to encapsulate common button components, buttons include: search, add, modify, delete; The encapsulated display component unit is used to encapsulate the common display configuration components. The display configuration items include: table row height and table column width; Encapsulates the filter component unit, which is used to encapsulate common filter configuration components. The filter configuration items include: text input and date range; Encapsulated style component unit, used to encapsulate common style definition components. The defined styles include: stripe style, border style, and hover effect; Arrangement and operation unit, used to write and arrange and run the codes of each packaged component; Wherein, the initialization configuration item module also includes: The extended configuration item unit is used to organize requirements and expand the table initialization configuration items. The initialization configuration items include the customization of the behavior of the functional components and the customization of the appearance of the functional components. Arrange business logic code units to supplement or expand detailed business logic codes according to functional components, and convert incoming parameters into functional parameters through business logic codes; Wherein, the receiving and rendering data module includes: The first receiving data unit is used to receive the first return data from the server; A cache data unit, used for determining and storing first target rendering data in a local cache; The initial rendering unit is used to dynamically fill the initial return data into the page table for rendering and display; The secondary rendering processing unit is used to check whether there is a second target rendering data in the local cache when a secondary page rendering task occurs. If so, the data is directly read from the local cache to execute the page rendering task; if not, an HTTP request is initiated to the server to repeat the initial rendering unit.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the steps of the componentized data table rendering method according to any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the componentized data table rendering method as described in any one of claims 1 to 6 is implemented.

Images