CN106294301B - 报表生成方法和装置 - Google Patents

报表生成方法和装置 Download PDF

Info

Publication number
CN106294301B
CN106294301B CN201610649885.7A CN201610649885A CN106294301B CN 106294301 B CN106294301 B CN 106294301B CN 201610649885 A CN201610649885 A CN 201610649885A CN 106294301 B CN106294301 B CN 106294301B
Authority
CN
China
Prior art keywords
report
displayed
page
menu
data
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.)
Active
Application number
CN201610649885.7A
Other languages
English (en)
Other versions
CN106294301A (zh
Inventor
朱华武
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Vipshop Guangzhou Software Co Ltd
Original Assignee
Guangzhou Pinwei Software Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Guangzhou Pinwei Software Co Ltd filed Critical Guangzhou Pinwei Software Co Ltd
Priority to CN201610649885.7A priority Critical patent/CN106294301B/zh
Publication of CN106294301A publication Critical patent/CN106294301A/zh
Application granted granted Critical
Publication of CN106294301B publication Critical patent/CN106294301B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • G06F40/177Editing, e.g. inserting or deleting of tables; using ruled lines
    • G06F40/18Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • G06F40/174Form filling; Merging
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • G06F40/177Editing, e.g. inserting or deleting of tables; using ruled lines

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种报表生成方法,所述方法包括:初始化报表的菜单框架,根据所述菜单框架生成所述报表的子表数据;根据所述子表数据渲染所述报表,确定渲染后的所述报表中各表头的父子关系;根据各表头的父子关系确定所述报表的级联菜单,以生成报表。本发明还公开了一种报表生成装置。本发明实现了通过web报表展现插件生成所需要的报表,使所生成的Bootstrap table报表相对于传统的Bootstrap table报表功能更加丰富。

Description

报表生成方法和装置
技术领域
本发明涉及数据处理的技术领域,尤其涉及一种报表生成方法和装置。
背景技术
Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML(HyperText Markup Language,超级文本标记语言)、CSS(Cascading Style Sheets,层叠样式表)、JavaScript的,它简洁灵活,使得web开发更加快捷。bootstrap table是基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等。如图1所示,bootstrap table实现了单行表头的固定,单行可选列。现有的bootstrap table功能比较单一,存在很多缺陷,如不支持多行表头、不支持多行可选列、不支持数据列排序、不支持数据列指标预警、不支持交叉报表显示、不支持数据分页、大数据量载入时页面等待时间过长,用户体验较差、大数据量展现时选择列的显示或隐藏会因操作过多的DOM(Document Object Model,文档对象模型)元素,容易引发内存不足从而造成页面崩溃,无法渲染报表等。
发明内容
本发明的主要目的在于提供一种报表生成方法和装置,旨在解决现有bootstraptable功能单一的技术问题。
为实现上述目的,本发明提供的一种报表生成方法,所述报表生成方法应用于web报表展现插件,所述报表生成方法包括:
初始化报表的菜单框架,根据所述菜单框架生成所述报表的子表数据;
根据所述子表数据渲染所述报表,确定渲染后的所述报表中各表头的父子关系;
根据各表头的父子关系确定所述报表的级联菜单,以生成报表。
优选地,所述根据各表头的父子关系确定所述报表的级联菜单,以生成报表的步骤包括:
根据各表头的父子关系确定所述报表树状的级联菜单;
根据所接收的对所述级联菜单的操作指令,以及所述级联菜单中各菜单选项当前的状态属性,生成对应的报表。
优选地,所述根据各表头的父子关系确定所述报表的级联菜单的步骤之后,还包括:
确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件。
优选地,所述确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件的步骤之后,还包括:
当所述报表为多页报表时,设置所述报表的分页方式;
若所述分页方式为第一分页方式,则确定所述报表中待显示数据的行数,以及每页报表所能显示数据的行数;
根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数;
若所述分页方式为第二分页方式,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。
优选地,所述根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数的步骤之后,还包括:
判断各页报表所显示的行数是否小于每页报表所能显示的行数;
若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表;
根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。
此外,为实现上述目的,本发明还提供一种报表生成装置,所述报表生成装置应用于web报表展现插件,所述报表生成装置包括:
生成模块,用于初始化报表的菜单框架,根据所述菜单框架生成所述报表的子表数据;
渲染模块,用于根据所述子表数据渲染所述报表,确定渲染后的所述报表中各表头的父子关系;
确定模块,用于根据各表头的父子关系确定所述报表的级联菜单,以生成报表。
优选地,所述确定模块包括:
确定单元,用于根据各表头的父子关系确定所述报表树状的级联菜单;
处理单元,用于根据所接收的对所述级联菜单的操作指令,以及所述级联菜单中各菜单选项当前的状态属性,生成对应的报表。
优选地,所述报表生成装置还包括图标设置模块,用于确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件。
优选地,所述报表生成装置还包括:
分页设置模块,用于当所述报表为多页报表时,设置所述报表的分页方式;
所述确定模块还用于若所述分页方式为第一分页方式,则确定所述报表中待显示数据的行数,以及每页报表所能显示数据的行数;
计算模块,用于根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数;
所述计算模块还用于若所述分页方式为第二分页方式,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。
优选地,所述报表生成装置还包括:
判断模块,用于判断各页报表所显示的行数是否小于每页报表所能显示的行数;
标记模块,用于若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表;
补齐模块,用于根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。
本发明通过根据初始化后的菜单框架生成报表的子表数据,根据所述子表数据渲染所述报表,根据渲染后的所述报表中各表头的父子关系确定各表头的级联菜单,以生成报表。实现了通过web报表展现插件生成所需要的报表,使所生成的Bootstrap table报表相对于传统的Bootstrap table报表功能更加丰富。
附图说明
图1为目前bootstrap table的一种示意图;
图2本发明报表生成方法的较佳实施例的流程示意图;
图3为本发明实施例中根据各表头的父子关系确定所述报表的级联菜单,以生成报表的一种流程示意图;
图4为本发明报表生成装置的较佳实施例的功能模块示意图;
图5为本发明实施例中确定模块的一种功能模块示意图;
图6为本发明实施例中渲染后的报表的一种示意图;
图7为本发明实施例中报表中各表头父子关系的一种示意图;
图8为本发明实施例中报表的级联菜单的一种示意图;
图9为本发明实施例中待补齐分页报表补齐高度之后的一种示意图;
图10为本发明实施例中一种具体实施方式的示意图。
本发明目的的实现、功能特点及优点将结合实施例,参照附图做进一步说明。
具体实施方式
应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
本发明提供一种报表生成方法。
参照图2,图2为本发明报表生成方法较佳实施例的流程示意图。
在本实施例中,所述报表生成方法包括:
步骤S10,初始化报表的菜单框架,根据所述菜单框架生成所述报表的子表数据;
在本实施例中,通过使用web报表展现插件(FTable)生成报表,所述FTable采用JQuery和Bootstrap技术对传统HTML表格进行了功能扩充,所述JQuery用于操作DOM,所述Bootstrap用于CSS/HTML布局。所述JQuery是继prototype之后又一个优秀的Javascript库。所述JQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供ajax交互。所述JQuery是一个兼容多浏览器的javascript库。
当在生成报表过程中,所述FTable先初始化报表的菜单框架。其中,所述报表的菜单框架包括所述报表所在的div容器、所述报表的标题、所述报表中各数据的单位、所述报表中每页报表所能记录数据的行数、所述报表的起始记录数、所述报表的分页方式、所述报表tbody中需要合并的列、所述报表中需要预警显示的列、是否在所述报表中显示选择菜单和是否在所述报表中显示下载按钮及下载类型等。如通过params.divid='container'表示所述报表所在的div容器。
当所述FTable初始化所述报表的菜单框架时,所述FTable根据所述菜单框架设置所述子表的参数,生成所述报表的子表数据,得到所述报表的子表。所述子表的参数包括所述报表中每页报表所能记录的行数,即每页报表中的记录数,以及每页报表的起始行的记录数。如通过params.rownum=10以及params.rowth=0生成所述报表的子表,其中,所述params.rownum=10表示所述报表中每页所能记载的记录数为10,当所述报表中一共只有10页,且所述报表中的记录数超过100条时,所述报表只会显示100条记录数,超过的则不会显示。所述params.rownum可为空,所述报表中每页所能记载的记录数默认为每页报表自适应的记录数。所述params.rowth=0表示所述报表的起始记录数,所述params.rowth可为空,所述params.rowth默认为0,表示从所述报表的第一条记录数开始显示。
步骤S20,根据所述子表数据渲染所述报表,确定渲染后的所述报表中各表头的父子关系;
步骤S30,根据各表头的父子关系确定所述报表的级联菜单,以生成报表。
当生成所述报表的子表数据后,根据所述子表数据渲染所述报表,得到渲染后的报表,如图6所示。进一步地,在渲染过程中,只渲染所述报表中的当前页所显示的DOM元素,以避免所述报表在选择需要显示或者隐藏的列时,因操作过多的DOM元素,引发内存不足从而造成页面崩溃,无法渲染报表的情况出现。
当得到渲染后的报表后,还原所述报表中表头合并的行和列,确定所述报表中各表头的父子关系。如图7所示,在本实施例,合并后的填充单元用HB表示。由图6可知,E02-套餐与E0201-版本,以及E0202222-数量为父子关系,E02-套餐为父,E0201-版本和E0202222-数量为子,而E0201-版本与E020101、E020102以及合计为父子关系,E0201-版本为父,E020101、E020102和合计为子。由图7可知,由于E0201-版本和E0202222-数量的父选项都为E02-套餐,则还原所述报表之后,E0202222-数量所对应的父选项用HB表示;而E020101、E020102和合计的父选项都为E02-版本,因此,还原所述报表之后,E020102和合计所对应的父选项用HB表示。
当确定所述报表中各表头的父子关系之后,根据各表头的父子关系确定所述报表的级联菜单,以生成报表。
在本实施例中,当得到渲染后的报表后,还原所述报表中表头合并的行和列,确定所述报表中各表头的父子关系,不需要人为判定所述报表中各表头之间的父子关系,降低了开发者的难度和工作量。
本实施例通过根据初始化后的菜单框架生成报表的子表数据,根据所述子表数据渲染所述报表,根据渲染后的所述报表中各表头的父子关系确定各表头的级联菜单,以生成报表。实现了通过web报表展现插件生成所需要的报表,使所生成的Bootstrap table报表相对于传统的Bootstrap table报表功能更加丰富。
参照图3,图3为本发明实施例中根据各表头的父子关系确定所述报表的级联菜单,以生成报表的一种流程示意图。
在本实施例中,所述步骤S30包括:
步骤S31,根据各表头的父子关系确定所述报表树状的级联菜单;
步骤S32,根据所接收的对所述级联菜单的操作指令,以及所述级联菜单中各菜单选项当前的状态属性,生成对应的报表。
当确定所述报表中各表头的父子关系之后,根据各表头的父子关系确定所述报表树状的级联菜单,所述树状的级联菜单用checkbox,ul,li,Glyphicons字体图标组合定制而成。所述checkbox是在HTML中让使用者与首页上的素材发生交互作用的一种方法,其中包含checkbox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。所述li表示列表项,所述ul表示无序排列。如图8所示,在图8中,所述报表的右上角上显示有所述报表中各表头的级联菜单,从所述级联菜单中,我们可以清楚地知道所述报表中各表头的父子关系。在本实施例中,所述级联菜单一共包括三级,第一级菜单有E01-颜色、E02-套餐、E03-数量、E04-姓名、E05-姓名和E06-姓名;第二级菜单为E02-套餐的子选项,包括E0201-版本和E0202222-数量;第三级菜单为E0201-版本的子选项,包括E020101、E020102和合计。需要说明的是,所述报表的级联菜单的级数并不限制于本实施例所描述的三级,具体的可以根据具体需要而设置。
当确定所述报表树状的级联菜单之后,接收到用户对于所述级联菜单的操作指令时,确定所述级联菜单中各菜单选项当前的状态属性,以生成对应的报表。所述级联菜单中各菜单选项当前的状态属性为显示状态或者隐藏状态。当所述菜单选项当前的状态属性为显示状态,且接收到用户点击该菜单选项的操作指令时,则将所述菜单选项从显示状态转换为隐藏状态;当所述菜单选项当前的状态属性为隐藏状态,且接收到用户点击该菜单选项的操作指令时,则将所述菜单选项从隐藏状态转换为显示状态。进一步地,在接收到用户点击所述菜单选项的点击操作指令时,需要根据所述报表中各表头的父子关系对应显示或者隐藏相应的列。如图8所示,若用户在第三级菜单同时取消E020101,E020102,合计三个菜单选项,则这三个菜单选项的父选项E0201-版本也要同步取消选中,如果E0202222-数量此时也是处于取消选中状态,即E0202222-数量也要从显示状态转换为隐藏状态,则E0201-版本和E0202222-数量的父选项E02-套餐也要同步取消,即E02-套餐也要被隐藏,则与各个菜单所对应的tbody数据也要做同步隐藏、显示处理,所述tbody是一个HTML语言标签表格主体,该标签用于组合HTML表格的主体内容。如当要隐藏E020101菜单选项时,则与E020101菜单对应的数据0002、0102、0202、0302、0402、0502、0602、0702、0802和0902也要对应隐藏。进一步地,根据所述报表中列属性visibility的值处理隐藏列,删除之前还原所述报表时用HB填充的列,以生成对应的报表并显示所生成的报表。
进一步地,所述报表生成方法还包括:
确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件。
进一步地,当需要对所述报表中的一列或者多列的数据进行排序时,将所述报表中需要排序的列记为待排序列,设置所述待排序列对应的排序图标,并注册所述图标的点击事件。当侦测到用户点击所述排序图标的点击事件时,根据预设的排序算法对所述报表中的待排序列进行排序。在本实施例中,排序所用的算法为冒泡算法。需要说明的是,排序算法包括但不限于冒泡排序算法,还可以为鸡尾酒排序算法、计数排序算法和合并排序算法等。如可以通过params.order函数所对应的配置信息设置排序图标,通过排序函数F.bubble=function(parm){...}实现冒泡算法的排序。
需要说明的是,当对所述报表中的待排序列进行排序之后,因为改变了所述报表中所显示数据的顺序,所以需要再次生成所述报表的子表数据、渲染所述报表等。
本实施例通过生成所述报表的树状的级联菜单,供用户可以通过所述报表的级联菜单选择显示或者隐藏所述报表中相应的数据。进一步地,通过设置所述报表的排序图标,实现对所述报表的排序功能,扩充了所生成报表的功能。
进一步地,为了增加所生成的报表的功能,提出本实施例。
在本实施例中,所述报表生成方法还包括:
步骤a,当所述报表为多页报表时,设置所述报表的分页方式;
步骤b,若所述分页方式为第一分页方式,则确定所述报表中待显示数据的行数,以及每页报表所能显示数据的行数;
步骤c,根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数;
当所述报表为多页报表时,可以根据需要设置所述报表的分页方式。所述FTable支持的分页方式包括两种分页方式,第一分页方式为传统分页,第二分页方式为滚动分页。当所述报表的分页方式为传统分页方式时,通过使用jPage插件(Jquery)实现所述报表的传统分页。在采用传统分页对所述报表进行分页过程中,要确定所述报表中待显示数据的行数,即所述报表中待显示的记录数,以及每页报表所能显示数据的行数,然后根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数。
步骤d,若所述分页方式为第二分页方式,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。
若所述分页方式为第二分页方式,即采用滚动分页方式显示所述报表中的数据,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。需要说明的是,在采用滚动分页方式显示所述报表中的数据时,用户可以根据需要设置是显示所述报表中当前所显示的部分数据,还是将所述报表中的全部数据都通过所述滚动分页方式显示出来。进一步地,通过所述滚动分页方式可以实现交叉分页显示所述报表中的数据,即可以将所述报表中的前面一页的部分数据与后面一页的部分数据同时显示出来,供用户查看。
进一步地,所述报表生成方法还包括:
步骤e,判断各页报表所显示的行数是否小于每页报表所能显示的行数;
步骤f,若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表;
步骤g,根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。
当采用传统分页方式显示所述报表中的数据时,判断所述报表中各页报表所显示的行数是否小于每页报表所能显示的行数。若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表,根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。如若一页报表能显示20行数据,而某页报表只显示了18行数据,则将只显示了18行数据的这页报表标记为待补齐分页报表,根据显示20行数据的该页报表补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。如图9所示,通过在所述待补齐分页报表中补充“-”,以使所述报表中各分页报表的高度一致,使所述报表的页面美观,而且,若需要通过滚动方式显示所述报表中的数据时,在计算滚动分页方式滚动条的长度时,由于所述报表各页报表的高度一致,降低了计算滚动分页方式滚动条的长度的计算量。
进一步地,在本实施例中,通过所述FTable得到所述报表的具体实施方式可为:
Figure GDA0002613112370000101
Figure GDA0002613112370000111
在本实施例中,在用params.warning设置所述报表的预警列时,ActureValue表示所述报表中对应列的实际值,TargetValue表示所述报表中对应的列的目标值,rule表示所述报表中预警列的显示规则,区分正向和负向指标,在本实施例中,用1表示正向指标,值越大越好,用0表示负向指标,值越小越好(如利润指标就是正向指标,越高越好,能耗就是负向指标,越低越好);color表示所述报表中异常指标所对应的数值的显示颜色。Class和style表示控制所述报表中各字段样式,即在所述报表中是显示还是隐藏隐藏该字段。tbody是所述报表的记录数据,即所述报表中所含有的数据,通过Jquery的$.ajax的方式从服务器端获取所述报表需展现的数据,其格式为List<Map>,用JSONArray.fromObject()把List<Map>数据转成json数据格式以进行显示。通过FTable的buildFTableTbody方法把data转成FTable.tbody,其中所述报表中的数值字段默认靠右对齐,文字字段靠左对齐。然后配置所述报表所需的params.thead和params.tbody后,调用FTableF.biTable(params),即可生成如图10所示的报表。在图10中,用方框圈起来的数字24.638、23.897、3.833、4.122、1.12、1.069、0.185、0.143、0.162、0.512、0.13和0.157为预警列,表示这几个的数值已超过设定的标准值。在显示这个几个数值的时候,可以设置与其他数值不同颜色进行显示,以达到警示用户的效果。
本发明进一步提供一种报表生成装置。
参照图4,图4为本发明报表生成装置的较佳实施例的功能模块示意图。
在本实施例中,所述报表生成装置包括:
生成模块10,用于初始化报表的菜单框架,根据所述菜单框架生成所述报表的子表数据;
在本实施例中,通过使用web报表展现插件(FTable)生成报表,所述FTable采用JQuery和Bootstrap技术对传统HTML表格进行了功能扩充,所述JQuery用于操作DOM,所述Bootstrap用于CSS/HTML布局。所述JQuery是继prototype之后又一个优秀的Javascript库。所述JQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供ajax交互。所述JQuery是一个兼容多浏览器的javascript库。
当在生成报表过程中,所述FTable先初始化报表的菜单框架。其中,所述报表的菜单框架包括所述报表所在的div容器、所述报表的标题、所述报表中各数据的单位、所述报表中每页报表所能记录数据的行数、所述报表的起始记录数、所述报表的分页方式、所述报表tbody中需要合并的列、所述报表中需要预警显示的列、是否在所述报表中显示选择菜单和是否在所述报表中显示下载按钮及下载类型等。如通过params.divid='container'表示所述报表所在的div容器。
当所述FTable初始化所述报表的菜单框架时,所述FTable根据所述菜单框架设置所述子表的参数,生成所述报表的子表数据,得到所述报表的子表。所述子表的参数包括所述报表中每页报表所能记录的行数,即每页报表中的记录数,以及每页报表的起始行的记录数。如通过params.rownum=10以及params.rowth=0生成所述报表的子表,其中,所述params.rownum=10表示所述报表中每页所能记载的记录数为10,当所述报表中一共只有10页,且所述报表中的记录数超过100条时,所述报表只会显示100条记录数,超过的则不会显示。所述params.rownum可为空,所述报表中每页所能记载的记录数默认为每页报表自适应的记录数。所述params.rowth=0表示所述报表的起始记录数,所述params.rowth可为空,所述params.rowth默认为0,表示从所述报表的第一条记录数开始显示。
渲染模块20,用于根据所述子表数据渲染所述报表,确定渲染后的所述报表中各表头的父子关系;
确定模块30,用于根据各表头的父子关系确定所述报表的级联菜单,以生成报表。
当生成所述报表的子表数据后,根据所述子表数据渲染所述报表,得到渲染后的报表,如图6所示。进一步地,在渲染过程中,只渲染所述报表中的当前页所显示的DOM元素,以避免所述报表在选择需要显示或者隐藏的列时,因操作过多的DOM元素,引发内存不足从而造成页面崩溃,无法渲染报表的情况出现。
当得到渲染后的报表后,还原所述报表中表头合并的行和列,确定所述报表中各表头的父子关系。如图7所示,在本实施例,合并后的填充单元用HB表示。由图6可知,E02-套餐与E0201-版本,以及E0202222-数量为父子关系,E02-套餐为父,E0201-版本和E0202222-数量为子,而E0201-版本与E020101、E020102以及合计为父子关系,E0201-版本为父,E020101、E020102和合计为子。由图7可知,由于E0201-版本和E0202222-数量的父选项都为E02-套餐,则还原所述报表之后,E0202222-数量所对应的父选项用HB表示;而E020101、E020102和合计的父选项都为E02-版本,因此,还原所述报表之后,E020102和合计所对应的父选项用HB表示。
当确定所述报表中各表头的父子关系之后,根据各表头的父子关系确定所述报表的级联菜单,以生成报表。
在本实施例中,当得到渲染后的报表后,还原所述报表中表头合并的行和列,确定所述报表中各表头的父子关系,不需要人为判定所述报表中各表头之间的父子关系,降低了开发者的难度和工作量。
本实施例通过根据初始化后的菜单框架生成报表的子表数据,根据所述子表数据渲染所述报表,根据渲染后的所述报表中各表头的父子关系确定各表头的级联菜单,以生成报表。实现了通过web报表展现插件生成所需要的报表,使所生成的Bootstrap table报表相对于传统的Bootstrap table报表功能更加丰富。
参照图5,图5为本发明实施例中确定模块的一种功能模块示意图。
在本实施例中,所述确定模块30包括:
确定单元31,用于根据各表头的父子关系确定所述报表树状的级联菜单;
处理单元32,用于根据所接收的对所述级联菜单的操作指令,以及所述级联菜单中各菜单选项当前的状态属性,生成对应的报表。
当确定所述报表中各表头的父子关系之后,根据各表头的父子关系确定所述报表树状的级联菜单,所述树状的级联菜单用checkbox,ul,li,Glyphicons字体图标组合定制而成。所述checkbox是在HTML中让使用者与首页上的素材发生交互作用的一种方法,其中包含checkbox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。所述li表示列表项,所述ul表示无序排列。如图8所示,在图8中,所述报表的右上角上显示有所述报表中各表头的级联菜单,从所述级联菜单中,我们可以清楚地知道所述报表中各表头的父子关系。在本实施例中,所述级联菜单一共包括三级,第一级菜单有E01-颜色、E02-套餐、E03-数量、E04-姓名、E05-姓名和E06-姓名;第二级菜单为E02-套餐的子选项,包括E0201-版本和E0202222-数量;第三级菜单为E0201-版本的子选项,包括E020101、E020102和合计。需要说明的是,所述报表的级联菜单的级数并不限制于本实施例所描述的三级,具体的可以根据具体需要而设置。
当确定所述报表树状的级联菜单之后,接收到用户对于所述级联菜单的操作指令时,确定所述级联菜单中各菜单选项当前的状态属性,以生成对应的报表。所述级联菜单中各菜单选项当前的状态属性为显示状态或者隐藏状态。当所述菜单选项当前的状态属性为显示状态,且接收到用户点击该菜单选项的操作指令时,则将所述菜单选项从显示状态转换为隐藏状态;当所述菜单选项当前的状态属性为隐藏状态,且接收到用户点击该菜单选项的操作指令时,则将所述菜单选项从隐藏状态转换为显示状态。进一步地,在接收到用户点击所述菜单选项的点击操作指令时,需要根据所述报表中各表头的父子关系对应显示或者隐藏相应的列。如图8所示,若用户在第三级菜单同时取消E020101,E020102,合计三个菜单选项,则这三个菜单选项的父选项E0201-版本也要同步取消选中,如果E0202222-数量此时也是处于取消选中状态,即E0202222-数量也要从显示状态转换为隐藏状态,则E0201-版本和E0202222-数量的父选项E02-套餐也要同步取消,即E02-套餐也要被隐藏,则与各个菜单所对应的tbody数据也要做同步隐藏、显示处理,所述tbody是一个HTML语言标签表格主体,该标签用于组合HTML表格的主体内容。如当要隐藏E020101菜单选项时,则与E020101菜单对应的数据0002、0102、0202、0302、0402、0502、0602、0702、0802和0902也要对应隐藏。进一步地,根据所述报表中列属性visibility的值处理隐藏列,删除之前还原所述报表时用HB填充的列,以生成对应的报表并显示所生成的报表。
进一步地,所述报表生成装置还包括:图标设置模块,用于确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件。
进一步地,当需要对所述报表中的一列或者多列的数据进行排序时,将所述报表中需要排序的列记为待排序列,设置所述待排序列对应的排序图标,并注册所述图标的点击事件。当侦测到用户点击所述排序图标的点击事件时,根据预设的排序算法对所述报表中的待排序列进行排序。在本实施例中,排序所用的算法为冒泡算法。需要说明的是,排序算法包括但不限于冒泡排序算法,还可以为鸡尾酒排序算法、计数排序算法和合并排序算法等。如可以通过params.order函数所对应的配置信息设置排序图标,通过排序函数F.bubble=function(parm){...}实现冒泡算法的排序。
需要说明的是,当对所述报表中的待排序列进行排序之后,因为改变了所述报表中所显示数据的顺序,所以需要再次生成所述报表的子表数据、渲染所述报表等。
本实施例通过生成所述报表的树状的级联菜单,供用户可以通过所述报表的级联菜单选择显示或者隐藏所述报表中相应的数据。进一步地,通过设置所述报表的排序图标,实现对所述报表的排序功能,扩充了所生成报表的功能。
进一步地,为了增加所生成的报表的功能,提出本实施例。
在本实施例中,所述报表生成装置还包括:
分页设置模块,用于当所述报表为多页报表时,设置所述报表的分页方式;
所述确定模块还用于若所述分页方式为第一分页方式,则确定所述报表中待显示数据的行数,以及每页报表所能显示数据的行数;
计算模块,用于根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数;
当所述报表为多页报表时,可以根据需要设置所述报表的分页方式。所述FTable支持的分页方式包括两种分页方式,第一分页方式为传统分页,第二分页方式为滚动分页。当所述报表的分页方式为传统分页方式时,通过使用jPage插件(Jquery)实现所述报表的传统分页。在采用传统分页对所述报表进行分页过程中,要确定所述报表中待显示数据的行数,即所述报表中待显示的记录数,以及每页报表所能显示数据的行数,然后根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数。
所述计算模块还用于若所述分页方式为第二分页方式,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。
若所述分页方式为第二分页方式,即采用滚动分页方式显示所述报表中的数据,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。需要说明的是,在采用滚动分页方式显示所述报表中的数据时,用户可以根据需要设置是显示所述报表中当前所显示的部分数据,还是将所述报表中的全部数据都通过所述滚动分页方式显示出来。进一步地,通过所述滚动分页方式可以实现交叉分页显示所述报表中的数据,即可以将所述报表中的前面一页的部分数据与后面一页的部分数据同时显示出来,供用户查看。
进一步地,所述报表生成装置还包括:
判断模块,用于判断各页报表所显示的行数是否小于每页报表所能显示的行数;
标记模块,用于若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表;
补齐模块,用于根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。
当采用传统分页方式显示所述报表中的数据时,判断所述报表中各页报表所显示的行数是否小于每页报表所能显示的行数。若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表,根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。如若一页报表能显示20行数据,而某页报表只显示了18行数据,则将只显示了18行数据的这页报表标记为待补齐分页报表,根据显示20行数据的该页报表补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。如图9所示,通过在所述待补齐分页报表中补充“-”,以使所述报表中各分页报表的高度一致,使所述报表的页面美观,而且,若需要通过滚动方式显示所述报表中的数据时,在计算滚动分页方式滚动条的长度时,由于所述报表各页报表的高度一致,降低了计算滚动分页方式滚动条的长度的计算量。
进一步地,在本实施例中,通过所述FTable得到所述报表的具体过程可为:
Figure GDA0002613112370000171
Figure GDA0002613112370000181
在本实施例中,在用params.warning设置所述报表的预警列时,ActureValue表示所述报表中对应列的实际值,TargetValue表示所述报表中对应的列的目标值,rule表示所述报表中预警列的显示规则,区分正向和负向指标,在本实施例中,用1表示正向指标,值越大越好,用0表示负向指标,值越小越好(如利润指标就是正向指标,越高越好,能耗就是负向指标,越低越好);color表示所述报表中异常指标所对应的数值的显示颜色。Class和style表示控制所述报表中各字段样式,即在所述报表中是显示还是隐藏隐藏该字段。tbody是所述报表的记录数据,即所述报表中所含有的数据,通过Jquery的$.ajax的方式从服务器端获取所述报表需展现的数据,其格式为List<Map>,用JSONArray.fromObject()把List<Map>数据转成json数据格式以进行显示。通过FTable的buildFTableTbody方法把data转成FTable.tbody,其中所述报表中的数值字段默认靠右对齐,文字字段靠左对齐。然后配置所述报表所需的params.thead和params.tbody后,调用FTableF.biTable(params),即可生成如图10所示的报表。在图10中,用方框圈起来的数字24.638、23.897、3.833、4.122、1.12、1.069、0.185、0.143、0.162、0.512、0.13和0.157为预警列,表示这几个的数值已超过设定的标准值。在显示这个几个数值的时候,可以设置与其他数值不同颜色进行显示,以达到警示用户的效果。
上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。

Claims (6)

1.一种报表生成方法,其特征在于,所述报表生成方法应用于web报表展现插件,所述报表生成方法包括:
web报表展现插件初始化报表的菜单框架,根据所述菜单框架生成所述报表的子表数据;
根据所述子表数据渲染所述报表当前页所显示的文档对象模型元素,并还原渲染后的所述报表中表头合并的行和列,以确定渲染后的所述报表中各表头的父子关系;
根据各表头的父子关系确定所述报表树状的级联菜单;
在接收到对所述级联菜单的操作指令时,确定所述级联菜单中各菜单选项当前的状态属性,根据所述报表中各表头的父子关系对应显示或者隐藏相应的列,以生成对应的报表;其中,所述级联菜单中各菜单选项当前的状态属性为显示状态或者隐藏状态;
判断各页报表所显示的行数是否小于每页报表所能显示的行数;
若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表;
根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。
2.如权利要求1所述的报表生成方法,其特征在于,所述根据各表头的父子关系确定所述报表的级联菜单的步骤之后,还包括:
确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件。
3.如权利要求2所述的报表生成方法,其特征在于,所述确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件的步骤之后,还包括:
当所述报表为多页报表时,设置所述报表的分页方式;
若所述分页方式为第一分页方式,则确定所述报表中待显示数据的行数,以及每页报表所能显示数据的行数;
根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数;
若所述分页方式为第二分页方式,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。
4.一种报表生成装置,其特征在于,所述报表生成装置应用于web报表展现插件,所述报表生成装置包括:
生成模块,用于web报表展现插件初始化报表的菜单框架,根据所述菜单框架生成所述报表的子表数据;
渲染模块,用于根据所述子表数据渲染所述报表当前页所显示的文档对象模型元素,并还原渲染后的所述报表中表头合并的行和列,以确定渲染后的所述报表中各表头的父子关系;
确定单元,用于根据各表头的父子关系确定所述报表树状的级联菜单;
处理单元,用于在接收到对所述级联菜单的操作指令时,确定所述级联菜单中各菜单选项当前的状态属性,根据所述报表中各表头的父子关系对应显示或者隐藏相应的列,以生成对应的报表;其中,所述级联菜单中各菜单选项当前的状态属性为显示状态或者隐藏状态;
判断模块,用于判断各页报表所显示的行数是否小于每页报表所能显示的行数;
标记模块,用于若某页报表所显示行数小于每页报表所能显示的行数,则将该页报表标记为待补齐分页报表;
补齐模块,用于根据每页报表所能显示的行数补齐所述待补齐分页报表的行高,以使所述报表中各分页报表的高度一致。
5.如权利要求4所述的报表生成装置,其特征在于,所述报表生成装置还包括图标设置模块,用于确定所述报表中需要排序的待排序列,设置所述待排序列对应的排序图标,并注册所述排序图标的点击事件。
6.如权利要求5所述的报表生成装置,其特征在于,所述报表生成装置还包括:
分页设置模块,用于当所述报表为多页报表时,设置所述报表的分页方式;
所述确定单元还用于若所述分页方式为第一分页方式,则确定所述报表中待显示数据的行数,以及每页报表所能显示数据的行数;
计算模块,用于根据所述待显示数据的行数和每页报表所能显示数据的行数计算所述报表的页数;
所述计算模块还用于若所述分页方式为第二分页方式,则根据所述报表中数据的总行数,以及渲染后的所述报表中各行的行高计算滚动条的长度,以得到所述第二分页方式中滚动条的长度。
CN201610649885.7A 2016-08-09 2016-08-09 报表生成方法和装置 Active CN106294301B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610649885.7A CN106294301B (zh) 2016-08-09 2016-08-09 报表生成方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610649885.7A CN106294301B (zh) 2016-08-09 2016-08-09 报表生成方法和装置

Publications (2)

Publication Number Publication Date
CN106294301A CN106294301A (zh) 2017-01-04
CN106294301B true CN106294301B (zh) 2020-10-13

Family

ID=57667524

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610649885.7A Active CN106294301B (zh) 2016-08-09 2016-08-09 报表生成方法和装置

Country Status (1)

Country Link
CN (1) CN106294301B (zh)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109582938B (zh) * 2017-09-28 2023-01-13 北京国双科技有限公司 报表生成方法和装置
CN107967248A (zh) * 2017-12-13 2018-04-27 机械工业第六设计研究院有限公司 一种基于Bootstrap配置式实现表单的方法
CN108009145A (zh) * 2017-12-18 2018-05-08 深圳市康必达控制技术有限公司 报表生成方法及装置
CN110569300A (zh) * 2018-05-17 2019-12-13 江苏优瀛科技有限公司 一种实现树状层级结构报表数据排序的方法及系统
CN112000687A (zh) * 2020-07-14 2020-11-27 金蝶医疗软件科技有限公司 业务账表的生成方法、装置、计算机设备和存储介质
CN112597750A (zh) * 2020-12-28 2021-04-02 珠海新华通软件股份有限公司 在线设计动态检测报告模板的方法、编辑器及介质
CN115034691A (zh) * 2022-08-11 2022-09-09 四川弘和通讯集团有限公司 一种油气站安全预警及管理方法、装置、电子设备及介质
CN118095237A (zh) * 2024-03-11 2024-05-28 一汽—大众汽车有限公司 表格生成方法、电子设备和存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101876971A (zh) * 2010-06-22 2010-11-03 北京伟库电子商务科技有限公司 报表展现方法和装置
CN102841938A (zh) * 2012-08-14 2012-12-26 北京久其软件股份有限公司 一种参数化报表的生成方法及系统
CN103176702A (zh) * 2011-12-22 2013-06-26 北大方正集团有限公司 一种应用于b/s结构的表格类信息显示、操作方法
CN103714127A (zh) * 2013-12-11 2014-04-09 金蝶软件(中国)有限公司 表格分信息组展示方法和系统
CN103902718A (zh) * 2014-04-09 2014-07-02 浪潮软件股份有限公司 一种报表控件及其应用
CN105095249A (zh) * 2014-05-05 2015-11-25 中国石油化工股份有限公司 一种生成多维度报表的方法
CN105718436A (zh) * 2015-12-18 2016-06-29 武汉开目信息技术有限责任公司 一种新型表格数据管理方法

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9411797B2 (en) * 2011-10-31 2016-08-09 Microsoft Technology Licensing, Llc Slicer elements for filtering tabular data
CN103559292A (zh) * 2013-11-07 2014-02-05 大连东方之星信息技术有限公司 一种自定义动态创建并显示多级表格的方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101876971A (zh) * 2010-06-22 2010-11-03 北京伟库电子商务科技有限公司 报表展现方法和装置
CN103176702A (zh) * 2011-12-22 2013-06-26 北大方正集团有限公司 一种应用于b/s结构的表格类信息显示、操作方法
CN102841938A (zh) * 2012-08-14 2012-12-26 北京久其软件股份有限公司 一种参数化报表的生成方法及系统
CN103714127A (zh) * 2013-12-11 2014-04-09 金蝶软件(中国)有限公司 表格分信息组展示方法和系统
CN103902718A (zh) * 2014-04-09 2014-07-02 浪潮软件股份有限公司 一种报表控件及其应用
CN105095249A (zh) * 2014-05-05 2015-11-25 中国石油化工股份有限公司 一种生成多维度报表的方法
CN105718436A (zh) * 2015-12-18 2016-06-29 武汉开目信息技术有限责任公司 一种新型表格数据管理方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
用级联菜单高效管理多个工作簿方法的研究;连瑞梅;《办公自动化杂志》;20070831(第113期);29-30,20 *

Also Published As

Publication number Publication date
CN106294301A (zh) 2017-01-04

Similar Documents

Publication Publication Date Title
CN106294301B (zh) 报表生成方法和装置
CN107992458B (zh) 表格规则的生成方法和装置、存储介质以及电子设备
US9043698B2 (en) Method for users to create and edit web page layouts
TWI453658B (zh) 一種顯示畫面之動態排版方法
US20140258849A1 (en) Automatic Alignment of a Multi-Dimensional Layout
US20050183008A1 (en) Method and system for separation of content and layout definitions in a display description
US20110219321A1 (en) Web-based control using integrated control interface having dynamic hit zones
CN111259303A (zh) 一种web信息系统前端页面自动生成的系统及其方法
US20130042190A1 (en) Systems and methods for remote dashboard image generation
CN103605502B (zh) 表单页面显示方法及服务器
CN112667330B (zh) 一种页面显示方法及计算机设备
US20130151944A1 (en) Highlighting of tappable web page elements
CN110674227A (zh) 数据可视化图表和页面的生成方法、系统、介质及终端
EP4033438A1 (en) Video generation method and device, and terminal and storage medium
US8732615B2 (en) Unified interface for display and modification of data arrays
CN104820589A (zh) 一种动态适配网页的方法及其装置
CN109885301B (zh) 一种可缩放矢量图形的生成方法、装置、存储介质和设备
JP2021512415A (ja) デジタルコンポーネントのバックドロップレンダリング
CN110990431A (zh) 一种实现中国地图和折线图数据同步联动轮播的方法
CN112667226A (zh) 一种页面文件的设置方法、装置、设备及存储介质
CN109753612B (zh) 问卷显示的控制方法、装置、存储介质和电子设备
CN103049430A (zh) 一种基于idf格式文件的页面显示方法
CN111539186A (zh) 一种应用于html5的大数据树组件实现方法及系统
CN115421691A (zh) 一种基于虚拟列表的数据滚动方法、装置及计算机设备
CN115408627A (zh) 一种菜单显示方法、装置、设备及介质

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20171207

Address after: 510000 Guangzhou City, Guangzhou, Guangdong, Fangcun Avenue, one of the 314 self compiled

Applicant after: Guangzhou Pinwei Software Co., Ltd.

Address before: Liwan District Fangcun Huahai street Guangzhou city Guangdong province 510000 No. 20 self 1-5 building (only for office use)

Applicant before: Guangzhou VIPSHOP Information and Technology Co., Ltd.

GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20220104

Address after: 510000 Room 601, 128 Dingxin Road, Haizhu District, Guangzhou City, Guangdong Province (office only)

Patentee after: Vipshop (Guangzhou) Software Co.,Ltd.

Address before: 510000 No. 314, Fangcun Avenue, Liwan District, Guangzhou City, Guangdong Province

Patentee before: GUANGZHOU PINWEI SOFTWARE Co.,Ltd.