CN109948133B - 一种基于Layui的数据表格的实现方法 - Google Patents

Abstract

本发明特别涉及一种基于Layui的数据表格的实现方法。该基于Layui的数据表格的实现方法，针对Layui框架中数据表格的属性进行筛选，将满足当前系统需要的属性抽取出来，建立数据对象进行属性存取；包括数据集设置，属性设置和设置复杂表头三部分。该基于Layui的数据表格的实现方法，使得基于Layui的前端UI框架的数据展现变得更加丰富和多样化，能够有效应对快速变化的业务需求。

Description

一种基于Layui的数据表格的实现方法

技术领域

本发明涉及计算机应用技术领域，特别涉及一种基于Layui的数据表格的实现方法。

背景技术

目前，越来越多的传统大型应用系统(如浪潮ERP、HCM等)在做系统整合，在设计新功能时功能界面的舒适度、友好性都成了主要的关注对象。新功能实现互联网风格的界面转变是项目经理或者客户的一致目标，UI(UserInterface，用户界面)框架更加认可流行的UI框架，例如Bootstrap、AUI、Layui等。

但是，当UI框架确定后(比如确定使用Layui)，研发工程师会发现能实现客户想要效果的UI框架，往往不能实现像Easyui那么强大的控件功能。

Layui(谐音：类UI)是一款采用自身模块规范编写的前端UI架，兼容正在使用的全部浏览器(IE6/7除外)，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。它区别于那些基于MVVM(Model-View-ViewModel)底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。

当然，Layui框架并非简单至极，它也在数据表格模块中提供一定的API(应用程序编程接口)，尽可能的去满足客户多变的需求。但在实际应用中，往往很难切合研发工程师的需要，更多的时候需要进行二次开发。

基于此，本发明提出了一种基于Layui的数据表格的实现方法。

发明内容

本发明为了弥补现有技术的缺陷，提供了一种简单高效的基于Layui的数据表格的实现方法。

本发明是通过如下技术方案实现的：

一种基于Layui的数据表格的实现方法，其特征在于，针对Layui框架中数据表格的属性进行筛选，将满足当前系统需要的属性抽取出来，建立数据对象进行属性存取；

具体包括以下步骤：

(1)数据集设置

数据类型包括SQL语句定义，数据接口，Oracle程序包和存储过程四种方式；考虑到数据表格显示时是通过筛选条件过滤后的数据，在设置数据集时预置过滤器参数；

通过预置的参数，数据表格在加载数据时候，就会将预置参数用实际的过滤条件替换，从而获取到目标数据；将带有预置参数的SQL语句提交系统后，系统会自动识别出数据集的数据格式，并将列名称通过表格的形式呈现出来；

(2)属性设置

属性分为基础属性设置，分页参数设置和显示列定义；

(3)复杂表头

用户设置复杂表头用以应对复杂业务场景；复杂表头功能中，填写行数、列数，点击生成操作，即可生成出*行*列的表头设计区域。

所述步骤(1)中，系统允许重新对列名称做名称映射，映射的名称在数据表格呈现时作为表头来使用。

所述步骤(1)中，当数据类型选择Oracle程序包时需要填写包名和包体名，提交系统后，系统会自动判断出该程序包所包括的输入参数(IN)和输出参数(OUT)及参数的类型、位置等信息；用户对参数做预置参数映射，就可以在数据表格呈现时实现基于过滤条件的过滤。

当数据类型选择数据接口时，系统会通过跨域的方式来通过异构系统获取目标数据；在设置接口时，将完整的接口地址和参数配置到系统内。

所述基础属性设置包括主标题，主标题是否显示，宽度，高度和显示进度条；所述分页参数设置包括启用分页，每页条数，页码个数，条数选择项，显示首页，显示尾页，排序方式，排序列，自定义排版和总条数SQL；所述显示列定义包括编辑列和列属性定义。

所述列属性包括字段名，字段映射名称，列宽，最小宽度，排列方式，数据格式，设定列类型，是否全选，固定列，是否排序，拖拽列宽和单元格编辑。

考虑到数据表格在穿透联查时需要携带当前页面的过滤条件至目标页面或者新的数据表格，所述列属性定义中允许设置某一列的链接属性，在列的链接属性中，允许设置链接地址，引入页面参数，统一链接，新页面打开和添加当前参数。

当设置的穿透联查是某一列中的某一行或者某些行时，系统允许用户进行更加高级的过滤器设置；在高级设置中，选择链接类型，判断条件，链接地址，引入页面参数，新页面打开和添加当前参数，所述链接类型包括标识链接和行链接。

所述步骤(3)中，在设计区域对复杂表头进行设置，设置方法包括重新设计，预览，合并，映射，设置最大行SQL和/或发布。

本发明的有益效果是：该基于Layui的数据表格的实现方法，使得基于Layui的前端UI框架的数据展现变得更加丰富和多样化，能够有效应对快速变化的业务需求。

附图说明

附图1为本发明基于Layui的数据表格的实现方法示意图。

具体实施方式

为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图和实施例，对本发明进行详细的说明。应当说明的是，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

该基于Layui的数据表格的实现方法，针对Layui框架中数据表格的属性进行筛选，将满足当前系统需要的属性抽取出来，建立数据对象进行属性存取；

具体包括以下步骤：

(1)数据集设置

数据类型包括SQL语句定义，数据接口，Oracle程序包和存储过程四种方式；考虑到数据表格显示时是通过筛选条件过滤后的数据，在设置数据集时预置过滤器参数；

比如一个简单SQL语句定义：SELECT*FROM TABLENAME WHERE COLUMN＝@Params01，这里的@Params01就是预置的参数。

通过预置的参数，数据表格在加载数据时候，就会将预置参数用实际的过滤条件替换，从而获取到目标数据；将带有预置参数的SQL语句提交系统后，系统会自动识别出数据集的数据格式，并将列名称通过表格的形式呈现出来；

所述步骤(1)中，系统允许重新对列名称做名称映射，比如上边SQL语句中的COLUMN映射为“年度”。映射的名称在数据表格呈现时作为表头来使用。

所述步骤(1)中，当数据类型选择Oracle程序包时需要填写包名和包体名，例如PACKAGE_CESHI.PRO_PACKAGE_CESHI。提交系统后，系统会自动判断出该程序包所包括的输入参数(IN)和输出参数(OUT)及参数的类型、位置等信息；用户对参数做预置参数映射，比如输入参数“BN”，映射预置参数“@Params01”，这样就可以在数据表格呈现时实现BN列基于过滤条件的过滤。同样的，这里也支持数据集的设置，包括列名称映射的操作。数据类型现在存储过程的步骤和Oracle程序包基本类似。

当数据类型选择数据接口时，系统会通过跨域的方式来通过异构系统获取目标数据；在设置接口时，将完整的接口地址和参数配置到系统内。数据集映射的过程和以上类似。

(2)属性设置

属性分为基础属性设置，分页参数设置和显示列定义；

所述基础属性设置包括主标题，主标题是否显示，宽度，高度和显示进度条；所述分页参数设置包括启用分页，每页条数，页码个数，条数选择项，显示首页，显示尾页，排序方式，排序列，自定义排版和总条数SQL；所述显示列定义包括编辑列和列属性定义。

所述列属性包括字段名，字段映射名称，列宽，最小宽度，排列方式，数据格式，设定列类型，是否全选，固定列，是否排序，拖拽列宽和单元格编辑。

考虑到数据表格在穿透联查时需要携带当前页面的过滤条件至目标页面或者新的数据表格，所述列属性定义中允许设置某一列的链接属性，在列的链接属性中，允许设置链接地址，引入页面参数，统一链接，新页面打开和添加当前参数。

当设置的穿透联查是某一列中的某一行或者某些行时，系统允许用户进行更加高级的过滤器设置；在高级设置中，选择链接类型，判断条件，链接地址，引入页面参数，新页面打开和添加当前参数，所述链接类型包括标识链接和行链接。

通过列属性定义，可以实现数据表格上数据行中，任意一个位置的穿透操作，并且可以方便的携带本页面过滤条件、该位置作为过滤条件等。

(3)复杂表头

用户设置复杂表头用以应对复杂业务场景；复杂表头功能中，填写行数、列数，点击生成操作，即可生成出*行*列的表头设计区域。

所述步骤(3)中，在设计区域对复杂表头进行设置，设置方法包括重新设计，预览，合并，映射，设置最大行SQL和/或发布。

如果感觉设计过程中，与实际不符，可以点击“重置”实现设计区域重置。系统在该功能中有“重新设计”、“预览”、“合并”、“映射”、“最大行SQL”、“发布”。在设计区域中，用户点选区域，通过“合并”操作，将相邻区域合并，系统通过逻辑控制，自动判断不同区域是否允许合并，出现错误，系统也会提醒用户。“最大行SQL”是需要用户单独设置，系统考虑到用户输入的SQL语句或者其他数据类型比较复杂，系统不能自动识别可替换区域，所以这里需要用户单独提供获取最大行的SQL语句，该语句执行的结果作为分页的属性设置。如果数据表格不分页，请忽略。“发布”是复杂表头定义的最后一个环节，发布时会使用步骤(2)中定义的属性。发布后系统会实现列映射，列名称映射等内容。

该基于Layui的数据表格的实现方法，是运行在一套基于ASP.NET MVC+EF6开发的平台之上，前端采用Razor视图引擎进行渲染。Razor为视图表示提供了一种精简的语法，最大限度地减少了语法和额外的字符。它是一个干净的、轻量级的、简单的视图引擎。

该基于Layui的数据表格的实现方法中的数据表格是基于Layui框架的Table模块，是Layui最核心的组成之一。它用于对表格进行一系列功能和动态化数据操作，涵盖了很多项目中Table的需求。但是在支持用户基于系统的自定义方面却难以满足业务需求，无法应对复杂业务场景。

该基于Layui的数据表格的实现方法，对应后台技术支撑和前台应用实现。技术支撑的用户为软件开发人员、实施人员，提供数据源、属性等内容的配置。前台应用实现的用户为终端用户，提供最终的数据表格展示。

在使用Layui框架的Table模块后，针对Layui框架中数据表格的属性进行筛选，将满足当前系统需要的属性抽取出来，在本发明中建立数据对象进行属性存取。首先，对于Table模块的基础属性，单独建立列属性数据对象(DF_PluginsLUDTColsAttr)，包括列GS_ColumnName(列，即对应SQL语句中的列，用于标明该属性隶属关系)、列GS_Attr(列属性)、列GS_Values(属性值)。列GS_Attr的属性不是都要保存到数据库，而是根据用户的设定，系统通过判空的方式，将非空值保存到数据库。

复杂表头是无限极的。因为考虑到读取列属性的效率问题，采用“预生成”模式。

首先，建立复杂表头的数据对象(DF_PluginsLUDTSetTH)，包括GS_Name、GS_Xaxis、GS_Yaxis、GS_MergeType01、GS_MergeNum01、GS_MergeType02、GS_MergeNum02、GS_Datas。系统根据用户填写的行数(Rn)列数(Cn)，生成Rn*Cn条数据保存至数据库。每条数据的GS_Name类似于data_R0_C0，即从下标值0开始到n-1。在设计态中，用户可以去勾选这样的区域，然后点击合并。系统在合并操作中会检测是否勾选的个数>1、勾选的区域是否连续。这里的连续区域是分为两种情况：横向的连续(比如，data_Rm_Cm、data_Rm_Cm+1、data_Rm_Cm+2…data_Rm_Cm+*)、竖向的连续(比如，data_Rm_Cm、data_Rm+1_Cm、data_Rm+2_Cm…data_Rm+*_Cm)。在实际业务场景中，一个区域会既是行合并(rowspan)又是列合并(colspan)，所以在数据对象中用GS_MergeType01、GS_MergeType02来进行区分。用户的合并操作类型顺序是不固定的，系统默认一个合并类型保存至GS_MergeType01中，时间顺序的第二个操作类型保存至GS_MergeType02中。GS_MergeNum01、GS_MergeNum02是合并的区域个数。系统执行合并的操作是一个删除和修改的过程，删除即除了最左上的区域外都删除掉，修改即修改最左上区域的MergeType和MergeNum，执行以上逻辑。

在所有的区域根据要求完成“合并”操作后，用户可以点击“发布”完成数据的“预生成”。“预生成”是指根据用户设定的列属性，遵从Layui的API要求生成对应格式的数据，并将数据保存至列GS_Datas。比如，设置“DWMC”的宽度(100)、名称(单位名称)，即GS_Datas的值为：{'field':'DWMC','width':100,'title':'单位名称'}。这里也可以看到不是界面中所有的属性都入库，而是只有field、width、title三个属性。

同时，在Table模块中的数据动态配置是最重要的，本发明中的数据源的取数逻辑是用户自定义的。即用户通过配置数据(分四种数据类型)，设定列的含义，设定列的排序来完成的。存储过程、Oracle程序包类型中，系统要求必须要有输入参数Pagesize、PageNum，输出参数totalCount。在数据接口类型中，系统会根据不同异构系统封装对应的处理方法，使最终前端调用的方法得到的数据格式为：{"code":0,"msg":"","count":1000,"data":[{…}]}。在本实施例中，使用的是SQL语句的配置方式，可直接填写读取数据的SQL语句逻辑，系统会自动根据设定的Pagesize、PageNum进行分页操作。只不过在本实施例中，考虑到实际的业务场景SQL语句往往比较复杂，系统难以实现自动分割SQL，从而执行COUNT操作，所以在设计复杂表头时，可以注意到功能“最大行SQL”，即需要用户填写计算总条数的SQL语句，当然，如果不分页，请忽略次操作。这里的SQL语句会被保存到数据对象(DF_PluginsLUDTSQL)，在使用分页的数据表格时，会首先通过后台调用并执行这个SQL，从而获取到总条数，赋值给Layui的分页控件，从而实现分页的页面渲染效果。

本发明中，复杂表头的数据表格分为两种：_DT_Thread(不分页+复杂表头)、_DT_ThreadPaging(分页+复杂表头)。用户可以根据业务场景选择使用。比如_DT_ThreadPaging的页面定义方式为：

页面通过Div作为整个Table模块的容器，定义id＝"tb_Content"的Table，定义id＝"tb_thead"thead，定义id＝"tb_Page"分页模块，并在外层预置div作为分页的容器。文档载入完毕后执行AJAX操作，从/DAttr/LayUI/GetTheadList中通过“get”请求，获取到thead初始内容，通过逻辑组合，完成最终符合Layui的API要求的html代码。当该thead内容赋值完成后，从/API/DataTable/PagingDataRowsCount中通过“get”请求获取总条数，这里使用“最大行SQL”中预置的SQL语句执行查询操作。成功获取总条数后，执行table.render分页控件渲染操作，并在分页控件的jump事件中，非首次执行中，调用table.init渲染静态数据。

在文档载入完毕后需要通过layui.use([‘table’,’laypage’])将模块引入到页面，并在其内部调用table.init渲染静态数据。

在大多的业务场景中都会使用数据穿透联查功能，本发明也支持这样的操作。本发明支持统一联查设置、标识联查设置、行联查设置，并且允许“引入页面参数”、“添加当前参数”、“添加额外参数”。系统建立数据对象DF_PluginsLUDTLink、DF_PluginsLUDTLinkFilter。数据对象DF_PluginsLUDTLink关键列包括：GS_ColumnName(列)、GS_Import(引入页面参数)、GS_AddParams(添加额外参数)、GS_Params(使用当前列)、GS_Blank(新页面打开)、GS_IsUnify(统一链接)、GS_UnifyURL(链接地址)。如果系统是统一的链接方式，则直接在第一个配置界面中完成配置即可，当然，如果业务场景复杂，那么可以通过增加过滤器的方式使用联查功能。数据对象DF_PluginsLUDTLinkFilter关键列包括：GS_ColumnName(列)、GS_Type(行过滤/值过滤)、GS_Filter(行过滤：具体行号，数值类型；值过滤：具体的值，字符类型)、GS_Import(引入页面参数)、GS_AddParams(添加额外参数)、GS_Params(使用当前列)、GS_Blank(新页面打开)、GS_URL(链接地址)。在过滤器的联查中，可以通过配置行过滤或者是值过滤方式，实现联查的绝对定位，并为目标设定联查的属性。

数据穿透联查功能中，本发明并未使用Layui本身提供的模板方式，而是将设置的属性进行逻辑组装，形成<a>标签，并将整个<a>标签作为列内容显示到表格中。这里特别注意的是GS_Import(引入页面参数)，因为在实际页面中，参数并不是固定的，所以，需要系统动态的获取当前页面的参数。所以在组装这个属性的时候，生成的<a>标签带有click事件，<a href＝"javascript:void(0)；"onclick＝"$.DTLinkEvent('"+LinkURL+"','"+filterItem.GS_Blank+"')；"class＝"layui-table-link">***</a>。这样就可以调用页面对应的JS函数获取到最终的联查URL。

该基于Layui的数据表格的实现方法，在项目应用过程中，由于在Layui提供的原始API中数据表格的列属性包含很多，因此在Table模块的实例中都是按需使用。后台技术支撑中，提供的属性是经过项目应用后精简的，在后台配置环节，操作人员并非是所有的属性都要设置或选择，而也是按需来使用。数据存放过程中，系统会自动判断操作人员使用了哪些属性，并将这些属性按照每个属性一条数据的方式存放到数据库。在前台应用实现过程中，读取所有的属性，并根据数据库的列名，找到该列对应的所有属性，并将这些属性应用到Table模块中。

这样“按需”存取的方式，不仅可以让后台使用人员更少的去配置API属性，减少实施工作量，还能让表格属性数据以最小的数据量存放，从而加快前台表格渲染的速度。

该基于Layui的数据表格的实现方法，在项目应用过程中针对Table模块的多级表头做了更加灵活有效的二次开发。后台技术支撑中，提供多级表头的设计界面，允许使用人员定义N行M列的表头。在最原始的表头上，使用人员可以选择相邻的模块，进行横向合并或者竖向合并，甚至是两种类型同时发生的合并。

总结合并之后的数据规律发现，Table模块中永远是“最下边”的表头和Layui的API属性对应；数据库保存的表头永远都是“最左上角”的这个TH标签；如果发生一次合并，可以直接将合并的类型(colspan或者rowspan)和合并数量保存到数据对象的第一次合并中；如果发生两次合并，就需要按照合并的顺序，把这些有效数据保存到数据库。这样的表头定义允许使用人员可以完成复杂表头的灵活定制，并且让表头的定义变得非常简单和直观。

下面以在Oracle数据库环境下以SQL语句的数据类型并制作带有复杂表头的分页的数据表格为实施例进行详细的描述。

步骤一：新增数据表格。在制作之前，需要先做一个简单的登记，定义插件的属性，即一个数据表格定义。新增之后就可以在列表中使用这个数据表格的“属性”、“数据”等功能。

步骤二：点击“数据”，在弹出的界面中，选择SQL语句定义的数据类型，在SQL语句中填写SQL，并将year的参数预置为@Params01。点击“确定”按钮，系统会自动将数据集列到当前页面。在这个功能中，还需要在“数据集设置”中编辑自定义名称、字段位置信息。自定义名称将来映射到表头，字段位置即是数据表中列显示的先后顺序。

步骤三：点击“属性”，在弹出的界面中填写基础参数设置、分页参数设置等信息。在显示列定义中，发现在步骤二中的操作结果已经被自动带到当前功能中，在具体列中点击“编辑”设置具体列的宽度信息，属性简单设置完毕。

步骤四：点击“我要建立复杂表头”，在弹出的界面中生成一个2行2列的设计区域，并将“data_R0_C0”与“data_R0_C1”合并，合并后“data_R0_C1”被删除掉，在“映射”功能中将“data_R0_C0”映射为“表头合并”。需要使用分页时，通过“最大行SQL”功能提交selectCOUNT(1)from ceshi where year＝@Params01，注意到这里也是支持过滤条件参数化。点击“发布”即可实现表头信息发布操作。

步骤五：想要在项目名称这列中添加联查的操作时，可以设置联查到指定网络。

步骤六：通过以上步骤的设置，数据表格已经设置完成。在系统预览功能中，可以手动的在参数信息中输入内容，比如本例中的Params01＝2018，点击“开始预览”就可以看到预期的效果。在真正页面中，参数是系统自动映射的，不需要实施人员手动输入内容参数。

Claims (9)

1.一种基于Layui的数据表格的实现方法，其特征在于：针对Layui框架中数据表格的属性进行筛选，将满足当前系统需要的属性抽取出来，建立数据对象进行属性存取；

具体包括以下步骤：

(1)数据集设置

通过SQL语句定义，数据接口，Oracle程序包和存储过程四种方式设置数据类型；考虑到数据表格显示时是通过筛选条件过滤后的数据，在设置数据集时预置过滤器参数；

通过预置的参数，数据表格在加载数据时候，就会将预置参数用实际的过滤条件替换，从而获取到目标数据；将带有预置参数的SQL语句提交系统后，系统会自动识别出数据集的数据格式，并将列名称通过表格的形式呈现出来；

(2)属性设置

包括基础属性设置，分页参数设置和显示列定义；

(3)设置表头

用户设置表头用以应对不同业务场景，在表头中填写行数与列数，点击生成操作，即可生成出n行m列的表头设计区域，n与m均为自然数。

2.根据权利要求1所述的基于Layui的数据表格的实现方法，其特征在于：所述步骤(1)中，系统允许重新对列名称做名称映射，映射的名称在数据表格呈现时作为表头来使用。

3.根据权利要求1或2所述的基于Layui的数据表格的实现方法，其特征在于：所述步骤(1)中，当数据类型选择Oracle程序包时需要填写包名和包体名，提交系统后，系统会自动判断出该程序包所包括的输入参数IN和输出参数OUT及参数的类型与位置信息；用户对参数做预置参数映射，就可以在数据表格呈现时实现基于过滤条件的过滤。

4.根据权利要求3所述的基于Layui的数据表格的实现方法，其特征在于：当数据类型选择数据接口时，系统会通过跨域的方式来通过异构系统获取目标数据；在设置接口时，将完整的接口地址和参数配置到系统内。

5.根据权利要求1所述的基于Layui的数据表格的实现方法，其特征在于：所述基础属性设置包括主标题，主标题是否显示，宽度，高度和显示进度条；所述分页参数设置包括启用分页，每页条数，页码个数，条数选择项，显示首页，显示尾页，排序方式，排序列，自定义排版和总条数SQL；所述显示列定义包括编辑列和列属性定义。

6.根据权利要求5所述的基于Layui的数据表格的实现方法，其特征在于：所述列属性包括字段名，字段映射名称，列宽，最小宽度，排列方式，数据格式，设定列类型，是否全选，固定列，是否排序，拖拽列宽和单元格编辑。

7.根据权利要求5所述的基于Layui的数据表格的实现方法，其特征在于：考虑到数据表格在穿透联查时需要携带当前页面的过滤条件至目标页面或者新的数据表格，所述列属性定义中允许设置某一列的链接属性，在列的链接属性中，允许设置链接地址，引入页面参数，统一链接，新页面打开和添加当前参数。

8.根据权利要求7所述的基于Layui的数据表格的实现方法，其特征在于：当设置的穿透联查是某一列中的某一行或者某些行时，系统允许用户进行更加高级的过滤器设置；在高级设置中，选择链接类型，判断条件，链接地址，引入页面参数，新页面打开和添加当前参数，所述链接类型包括标识链接和行链接。

9.根据权利要求1所述的基于Layui的数据表格的实现方法，其特征在于：所述步骤(3)中，在设计区域对复杂表头进行设置，设置方法包括重新设计，预览，合并，映射，设置最大行SQL和/或发布。

Images