CN112966481B - 一种数据表格展示方法及装置 - Google Patents

Abstract

本发明适用于数据处理技术领域，提供了一种数据表格展示方法及装置，该方法包括：对数据表格进行注册，以对所述数据表格进行初始化；根据预设配置参数，在网页端对所述数据表格进行渲染；获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示。本发明通过对数据表格的参数进行预先配置，在对数据表格进行渲染时，直接根据预设配置参数进行渲染，避免了逐一对配置参数进行设置，极大降低了参数设置的复杂程度，加快了参数设置的过程，有助于加快数据表格渲染的过程，数据表格的展示效果更佳，从而有助于提高用户的使用体验。

Description

一种数据表格展示方法及装置

技术领域

本发明属于数据处理技术领域，尤其涉及一种数据表格展示方法及装置。

背景技术

医疗数据是指医务人员在医疗活动过程中，使用医疗信息系统生成的文字、符号、图表、图形、数据、影像等数字化信息，并且该活动记录可以实现传输和重现，并利用信息化手段进行存储和管理。现代医疗信息领域每天都产生庞大的数据量，随着数据量级的不断升级，数据应用的不断深入和海量数据不可忽视的价值，使得我们需要探索更好的方式来利用这些数据，从而可以从这些数据中受益。在现实情况下，面向大数据的数据挖掘最重要的任务之一便是实时性，如此海量的数据规模需要实时分析并迅速反馈结果，其中非常重要的一种数据可视化方式则是对数据进行表格(Table)展示。

数据表格在进行展示时，需要通过表格标签来对表格进行定义，从而使得数据能够按照要求进行表格展示。然而，目前表格的标签定义非常复杂，需要按照一定层级规则编写标签定义，导致数据表格的使用难度高，且渲染速度慢，用户对大数据展示的体验不佳。

发明内容

有鉴于此，本发明实施例提供了一种数据表格展示方法、装置、终端设备以及计算机可读存储介质，以解决现有技术中数据表格的使用难度高、渲染速度慢的技术问题。

本发明实施例的第一方面提供了一种数据表格展示方法，包括：

对数据表格进行注册，以对所述数据表格进行初始化；

根据预设配置参数，在网页端对所述数据表格进行渲染；

获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示。

本发明实施例的第二方面提供了一种数据表格展示装置，包括：

初始化模块，用于对数据表格进行注册，以对所述数据表格进行初始化；

渲染模块，用于根据预设配置参数，在网页端对所述数据表格进行渲染；

展示模块，用于获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示。

本发明实施例的第三方面提供了一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如上所述方法的步骤。

本发明实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上所述方法的步骤。

本发明实施例与现有技术相比存在的有益效果至少在于：本发明实施例通过对数据表格的参数进行预先配置，在对数据表格进行渲染时，直接根据预设配置参数进行渲染，避免了逐一对配置参数进行设置，极大降低了参数设置的复杂程度，加快了参数设置的过程，有助于加快数据表格渲染的过程，数据表格的展示效果更佳，从而有助于提高用户的使用体验。

附图说明

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

图1是本发明实施例提供的数据表格展示方法的实现流程示意图一；

图2是本发明实施例提供的数据表格展示方法中对数据表格进行渲染的流程示意图；

图3是本发明实施例提供的数据表格展示方法中对数据进行映射的流程示意图；

图4是本发明实施例提供的数据表格展示方法的流程示意图二；

图5是本发明实施例提供的数据表格展示方法中在数据表格中搜索关键字段的流程示意图；

图6是本发明实施例提供的数据表格展示装置的示意图一；

图7是本发明实施例提供的数据表格展示装置中渲染模块的示意图；

图8是本发明实施例提供的数据表格展示装置中展示模块的示意图；

图9是本发明实施例提供的数据表格展示装置的示意图二；

图10是本发明实施例提供的终端设备的示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本发明实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。

为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

现代医疗信息领域每天都会产生庞大的数据量，为了对海量的数据进行利用，以挖掘其中的价值，需要对数据进行展示。其中，表格作为重要的可视化技术，可以很好地在网页端对数据进行展示。然而，目前的表格展示仅限于对常规数据进行展示，而对于海量数据的展示仍然存在诸多的问题。

例如，目前的表格技术通过表格标签定义的HTML(Hypertext Marked Language，即超文本标记语言)表格，简单的HTML表格由表格元素以及一个或多个行(tr)、表头(th)或表格数据(td)等元素组成，而更复杂的HTML表格则可能还包括其他元素，例如标题(caption)、表格列属性(col)、表格列的组(colgroup)、页眉(thead)、页脚(tfoot)以及表格主体(tbody)等元素。由此可见，表格标签定义非常复杂，需要按照一定的层级规则进行编写定义，技术难度较大；在进行数据表格的展示过程中需要对DOM(Document ObjectModel，文档对象模型)频繁操作，导致大量数据的渲染非常损耗性能，从而在网页端进行表格渲染的速度很慢。不仅如此，现有的数据表格展示只能提供简单的展示功能，而无法提供数据搜索等扩展功能，无法满足用户更多的使用需求。

本实施例则提供了一种全新的数据表格展示方法，其不仅适用于少量数据的展示，同时也适用于海量数据的展示。请参阅图1，本实施例提供的数据表格展示方法，包括以下步骤：

步骤S10：对数据表格进行注册，以对所述数据表格进行初始化。

在本实施例中，在对数据表格进行初始化注册即是对hotDataTable进行注册，其中一种初始化的方式为：首先在预设开发环境(例如Vue开发环境，一套用于构建用户界面的渐进式框架)下注入表格插件(例如html和js的表格插件handsontable)；然后利用node.js进行npm instal，以便将相关依赖导入node_modules下(其中，node.js是一个基于Chrome V8引擎的JavaScript运行环境，npm是随同node.js一起安装的包管理工具，能解决node.js代码部署上的诸多问题，npm install的时候安装的依赖可以根据需要选择，例如可以是ependencies或者devDependencies，或者同时安装)；然后通过Vue.component全局注册hotDataTable，以获得注册组件。在进行npm install的时候，如果有国际化需求，还可以引入node_modules中的languages/zh-CN，从而实现对语言的选择。在获得了注册组件以后，之后在需要应用的具体模块中导入全局注册好的hotDataTable即可，从而可以实现数据表格的初始化。

步骤S20：根据预设配置参数，在网页端对所述数据表格进行渲染。

数据表格在网页端进行渲染时，需要根据预设配置参数。预设配置参数是数据表格的配置参数，通过预设配置参数可以对数据表格进行限定，以使得展示的数据表格满足客户的需求。

请参阅图2，在本实施例中，步骤S20可以包括：

步骤S201：获取数据表格的预设配置参数，预设配置参数所包括的参数数量和类型可以根据需要进行设置，例如至少可以包括以下参数中的一项：表格宽度(width)、表格高度(height)、显示列头(colHeaders)、显示行头(rowHeaders)、行(columns)、列(rows)、列宽度(colWidths)、行高度(rowHeights)、只读(readOnly)、搜索(search)、控制列移动(manualColumnMove)、控制行移动(manualRowMove)、控制列大小(manualColumnResize)、控制行大小(manualRowResize)、冻结行(fixedRowsTop)、冻结列(fixedColumnsLeft)。当然，具体参数还可以为其他，例如起始列数(startCols)、起始行数(startRows)、显示右键菜单(contextMenu)等等。通过对上述参数进行设置，可以对数据表格的性质进行确定。例如将搜索项设置为“true”时，意味着该数据表格支持进行搜索。可以理解的是，上述配置参数项可选，从而支持用户不同需求的个性化配置。

步骤S202：将所述预设配置参数封装至设置字段中。

在本实施中，预设配置参数并不是独立存在，用户针对每一个数据表格注意进行设置，而是对选定的预设配置参数统一进行封装，从而在后续使用过程中对于不同的数据表格，可以直接调用该设置字段，避免了逐一对配置参数进行设置，极大降低了参数设置的复杂程度，加快了参数设置的过程。

步骤S203：调用所述设置字段，以实现在网页端对所述数据表格进行渲染。

在对预设配置参数封装后，使用时直接调用封装的设置字段即可，从而可以在网页端根据预设配置参数对数据表格进行渲染。由于在渲染过程中无需对DOM进行频繁操作，对于性能的损耗低，因此有助于提高网页端的渲染速度。

当然，在对数据表格进行渲染的时候，也可以对数据表格的样式进行设置，例如可以引用第三方的css(Cascading Style Sheets，层叠样式表)来对表格进行装饰。其中，CSS表格属性可以帮助您极大地改善表格的外观，例如可以对表格边框、表格文本对齐方式、表格内边距、表格颜色等进行设置，从而使得数据表格更加优美。

在对表格进行渲染后，需要对数据进行展示。请参阅图1，在本实施例中，步骤S20后还包括：

步骤S30：获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示。

由于数据库中具有海量的数据，而在进行数据展示时，用户只希望展示其所关心的部分，因此需要根据用户需求来对数据进行筛选，并将筛选得到的数据映射到渲染的数据表格中。请参阅图3，具体过程可以为：

步骤S301：获取数据库中需要展示的数据。数据可以根据需要进行筛选，例如可以是就诊病人的年龄、病人的就诊时间、病人的疾病类型等等，此处不做限制。通过用户需求，可以获得经过筛选的需要展示的数据。

步骤S302：采用二维数组项对所述数据进行映射，以使得所述数据映射至所述数据表格。

目前在进行数据映射时，常采用的方式是一维数组项的数据映射，因此在遍历数据时的效率较低。本实施例采用二维数组项对数据进行映射，因此在遍历数据时的速率可以大大提高，从而有效提高数据渲染和展示的效率。

步骤S303：对所述数据表格进行展示。在完成了对数据的映射之后，即可对数据进行展示，用户可以根据数据表格直观获取需要了解的数据，从而可以获取数据的信息。

本实施例提供的数据表格展示方法的有益效果至少在于：

(1)本实施例通过对数据表格的参数进行预先配置，在对数据表格进行渲染时，直接根据预设配置参数进行渲染，避免了逐一对配置参数进行设置，极大降低了参数设置的复杂程度，加快了参数设置的过程，有助于加快数据表格渲染的过程，数据表格的展示效果更佳，从而有助于提高用户的使用体验。

(2)本实施例中采用二维数组项将待展示的数据映射至数据表格中，从而可以减少遍历时间，极大提高遍历效率。

请参阅图4，本实施例中，在对数据表格进行展示时，还可以对数据进行搜索，以及对搜索结果进行展示。因此，步骤S30后还包括：

步骤S40：根据获取的关键字段，在所述数据表格中搜索所述关键字段，以对包含所述关键字段的数据进行展示。

当用户需要获知数据表格所展示的数据中哪些数据包含关键字段时，可以提供想要查询的关键字段，从而可以根据关键字段在数据表格中进行搜索，以便进行展示。对于数据表格的设置字段中的搜索(search)，可以在设置字段配置项进行设置，用来辨识数据表格是否支持海量数据的字段搜索，当search设置为true时，通过数据表格提供的render()函数可以进行关键字段的数据搜索，this.search.query(this.exampleData)来锁定需要搜索的大数据表格,this.$refs.hotDataTable.hotInstance.render()来对搜索的关键字段进行重新映射，并高亮突出显示。请参阅图5，具体过程可以包括：

步骤S401：获取需要展示的关键字段。关键字段可以由用户根据需要进行提供。

步骤S402：根据所述关键字段对所述数据表格进行搜索，以获取所述关键字段对应的目标列头。

大数据表格由于列数往往高达100列以上，除了常见的数据搜索之外，用户往往希望通过关键字段迅速找到对应的列头，来找到数据的归属和具体的定位，方便数据信息的快速获取。搜索通常是对于tableData二维数组的遍历查找，本实施例为了支持列头数据的快速查找定位，巧妙的对列头特殊对象结构进行遍历，重新获取关键值，集成进colHeaders扩展的数组中，然后通过colHeaders与数据的遍历集成，让colHeaders成为数据的firstChild(父元素的首个子元素)，这样render()函数中便可得到数据的firstChild项，从而达到search支持对于列头的搜素定位。本实施例根据关键字段进行搜索，可以获得相应的目标列头。

步骤S403：在所述目标列头所在列中搜索所述关键字段，以在所述目标列头所在列中获取包含关键字段的目标数据。

步骤S404：对所述目标数据进行高亮展示。

在获取了目标数据以后，可以对目标数据进行高亮显示，高亮显示的方式可以根据需要进行选择，例如可以采用网页代码语法高亮库(highlight.js)对所述目标数据进行高亮控制，从而实现目标数据的高亮展示。

本实施例通过提供对于列头搜索的快速定位支持，方便用户快速的定位到某项数据的归属及定位，提升用户大数据信息获取的准确性及效率。

请参阅图6，本实施例目的还在于提供一种数据表格展示装置，包括初始化模块51、渲染模块52以及展示模块53。其中，初始化模块51用于对数据表格进行注册，以对所述数据表格进行初始化；渲染模块52用于根据预设配置参数，在网页端对所述数据表格进行渲染；展示模块53用于获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示。

请参阅图7，进一步地，渲染模块52包括参数获取单元521、封装单元522以及渲染单元523。其中，参数获取单元521用于获取数据表格的预设配置参数；封装单元522用于将所述预设配置参数封装至设置字段中；渲染单元523用于调用所述设置字段，以实现在网页端对所述数据表格进行渲染。

请参阅图8，进一步地，展示模块53包括数据获取单元531、映射单元532以及展示单元533。其中，数据获取单元531用于获取数据库中需要展示的数据；映射单元532用于采用二维数组项对所述数据进行映射，以使得所述数据映射至所述数据表格；展示单元533用于对所述数据表格进行展示。

请参阅图9，在一个实施例中，数据表格展示装置还包括搜索模块54，搜索模块54用于根据获取的关键字段，在所述数据表格中搜索所述关键字段，以对包含所述关键字段的数据进行展示。

图10是本发明一实施例提供的终端设备的示意图。如图10所示，该实施例的终端设备6包括：处理器60、存储器61以及存储在所述存储器61中并可在所述处理器60上运行的计算机程序62，例如数据表格展示程序。所述处理器60执行所述计算机程序62时实现上述各个数据表格展示方法实施例中的步骤，例如图1至图5所示的步骤S10至S40。或者，所述处理器60执行所述计算机程序62时实现上述各装置实施例中各模块/单元的功能，例如图6至图9所示模块51至模块54的功能。

示例性的，所述计算机程序62可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器61中，并由所述处理器60执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序62在所述终端设备6中的执行过程。

所述终端设备6可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述终端设备可包括，但不仅限于，处理器60、存储器61。本领域技术人员可以理解，图10仅仅是终端设备6的示例，并不构成对终端设备6的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器60可以是中央处理单元(Central Processing Unit，CPU)，还可以是其它通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器61可以是所述终端设备6的内部存储单元，例如终端设备6的硬盘或内存。所述存储器61也可以是所述终端设备6的外部存储设备，例如所述终端设备6上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器61还可以既包括所述终端设备6的内部存储单元也包括外部存储设备。所述存储器61用于存储所述计算机程序以及所述终端设备所需的其它程序和数据。所述存储器61还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本发明所提供的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (8)

1.一种数据表格展示方法，其特征在于，包括：

对数据表格进行注册，以对所述数据表格进行初始化；

根据预设配置参数，在网页端对所述数据表格进行渲染；

获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示；

根据获取的关键字段，在所述数据表格中搜索所述关键字段，以对包含所述关键字段的数据进行展示，具体包括：

获取需要展示的关键字段；

根据所述关键字段对所述数据表格进行搜索，以获取所述关键字段对应的目标列头；

在所述目标列头所在列中搜索所述关键字段，以在所述目标列头所在列中获取包含关键字段的目标数据；

对所述目标数据进行高亮展示。

2.如权利要求1所述的数据表格展示方法，其特征在于，所述根据预设配置参数，在网页端对所述数据表格进行渲染，包括：

获取数据表格的预设配置参数；

将所述预设配置参数封装至设置字段中；

调用所述设置字段，以实现在网页端对所述数据表格进行渲染。

3.如权利要求2所述的数据表格展示方法，其特征在于，所述预设配置参数至少包括以下参数中的一项：表格宽度、表格高度、显示列头、显示行头、行、列、列宽度、行高度、只读、搜索、控制列移动、控制行移动、控制列大小、控制行大小、冻结行、冻结列。

4.如权利要求1所述的数据表格展示方法，其特征在于，所述获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示，包括：

获取数据库中需要展示的数据；

采用二维数组项对所述数据进行映射，以使得所述数据映射至所述数据表格；

对所述数据进行展示。

5.如权利要求1所述的数据表格展示方法，其特征在于，所述对所述目标数据进行高亮展示步骤中，采用网页代码语法高亮库对所述目标数据进行高亮展示。

6.一种数据表格展示装置，其特征在于，包括：

初始化模块，用于对数据表格进行注册，以对所述数据表格进行初始化；

渲染模块，用于根据预设配置参数，在网页端对所述数据表格进行渲染；

展示模块，用于获取数据库中的数据，并将所述数据映射至所述数据表格，以实现对所述数据的展示；

搜索模块，用于根据获取的关键字段，在所述数据表格中搜索所述关键字段，以对包含所述关键字段的数据进行展示，具体包括：获取需要展示的关键字段；根据所述关键字段对所述数据表格进行搜索，以获取所述关键字段对应的目标列头；在所述目标列头所在列中搜索所述关键字段，以在所述目标列头所在列中获取包含关键字段的目标数据；对所述目标数据进行高亮展示。

7.一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述方法的步骤。

8.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述方法的步骤。