[发明专利]一种实现bootstrap table表格的数据动态合并的方法在审
申请号: | 201810378843.3 | 申请日: | 2018-04-26 |
公开(公告)号: | CN108572946A | 公开(公告)日: | 2018-09-25 |
发明(设计)人: | 赖名俊;张来卿;庞严冬 | 申请(专利权)人: | 珠海横琴盛达兆业科技投资有限公司 |
主分类号: | G06F17/24 | 分类号: | G06F17/24;G06F17/30 |
代理公司: | 暂无信息 | 代理人: | 暂无信息 |
地址: | 519031 广东省珠海*** | 国省代码: | 广东;44 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 表格数据 动态合并 数据动态 加载 合并 用户体验 源码文件 远程数据 自动调用 初始化 浏览器 服务器 兼容 主流 创建 | ||
本发明涉及bootstrap table技术领域,具体涉及一种实现bootstrap table表格的数据动态合并的方法。本发明所述的方法包含以下几个步骤:1、创建Html表格table;2、初始化表格,从服务器加载远程数据;3、实现表格动态合并的方法;4、当表格数据加载完后自动调用合并方法;本发明无需修改bootstrap table源码文件、兼容主流浏览器;实现了bootstrap table表格数据的动态合并,让用户体验更加友好。
技术领域
本发明涉及bootstrap table平台技术领域,特别涉及一种实现bootstrap table表格数据动态合并的方法。
背景技术
bootstrap table 基于bootstrap的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能;
目前面临的问题有:
bootstrap table 表格进行多行相同数据合并时,把无需合并的数据也给合并了,并不能通过设置主键列来选择是否合并单元格,这对用户体验不友好;而且从服务器加载数据时无法动态合并表格;不能满足表格合并多功能需求。
发明内容
本发明解决bootstrap table 进行多行合并时,可以通过设置主键列选择是否合并单元格,而且可用于服务器加载数据时动态合并表格,让用户体验更加友好。
本发明解决上述技术问题的技术方案是:
所述的方法包含以下几个步骤:
步骤一、定义Html表格table;
步骤二、初始化表格,从服务器加载远程数据;
步骤三、实现表格动态合并的方法;
步骤四、当表格数据加载完后自动调用合并方法。
所述的实现均在客户端浏览器中执行,合并表格时与服务器端无数据交互。
所述的步骤二中,调用bootstrapTable()方法从服务端加载数据
所述的步骤三中,需要自定义获取合并对象的方法getObjFromTable()和表格合并方法mergeTable();
所述的步骤三中,自定义获取合并对象方法getObjFromTable()的主要实现过程为:创建一个空对象;获取表格最大列数;初始化参数、列索引、主键列索引;循环根据列ID 、主键ID获取对应列索引、主键列索引;获取表格所有行;初始化参数;遍历所有行进行判断:当文本内容与上一行内容相同时且主键列内容也与上一行内容相同时,将合并行加一;否则重置参数,循环结束后返回合并对象;自定义表格合并方法mergeTable()的主要实现过程为:调用合并对象方法,遍历对象调用bootstrapTable合并方法,传入对应参数,完成表格合并。
所述的步骤四中,自动调用合并方法时,与服务器无数据交互。
本发明解决bootstrap table 进行多行合并时,可以通过设置主键列选择是否合并单元格,而且可用于服务器加载数据时动态合并表格;让用户体验更加友好。
附图说明
下面结合附图对本发明进一步说明:
附图1是本发明方法流程框图。
具体实施方式
如图1所示,本发明具体包含以下几个步骤:
步骤一、定义Html表格table;
<!DOCTYPE html>
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于珠海横琴盛达兆业科技投资有限公司,未经珠海横琴盛达兆业科技投资有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201810378843.3/2.html,转载请声明来源钻瓜专利网。
- 上一篇:创建报表的方法、系统、存储介质、及电子设备
- 下一篇:一种数据融合方法及装置