本发明涉及bootstraptable平台
技术领域：
：，特别涉及一种实现bootstraptable表格数据动态合并的方法。
背景技术：
：：bootstraptable基于bootstrap的jQuery表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤(扩展)等等的功能；目前面临的问题有：bootstraptable表格进行多行相同数据合并时，把无需合并的数据也给合并了，并不能通过设置主键列来选择是否合并单元格，这对用户体验不友好；而且从服务器加载数据时无法动态合并表格；不能满足表格合并多功能需求。技术实现要素：本发明解决bootstraptable进行多行合并时，可以通过设置主键列选择是否合并单元格，而且可用于服务器加载数据时动态合并表格，让用户体验更加友好。本发明解决上述技术问题的技术方案是：所述的方法包含以下几个步骤：步骤一、定义Html表格table；步骤二、初始化表格,从服务器加载远程数据；步骤三、实现表格动态合并的方法；步骤四、当表格数据加载完后自动调用合并方法。所述的实现均在客户端浏览器中执行，合并表格时与服务器端无数据交互。所述的步骤二中，调用bootstrapTable()方法从服务端加载数据所述的步骤三中，需要自定义获取合并对象的方法getObjFromTable()和表格合并方法mergeTable()；所述的步骤三中，自定义获取合并对象方法getObjFromTable()的主要实现过程为：创建一个空对象；获取表格最大列数；初始化参数、列索引、主键列索引；循环根据列ID、主键ID获取对应列索引、主键列索引；获取表格所有行；初始化参数；遍历所有行进行判断：当文本内容与上一行内容相同时且主键列内容也与上一行内容相同时，将合并行加一；否则重置参数，循环结束后返回合并对象；自定义表格合并方法mergeTable()的主要实现过程为：调用合并对象方法，遍历对象调用bootstrapTable合并方法,传入对应参数，完成表格合并。所述的步骤四中，自动调用合并方法时，与服务器无数据交互。本发明解决bootstraptable进行多行合并时，可以通过设置主键列选择是否合并单元格，而且可用于服务器加载数据时动态合并表格；让用户体验更加友好。附图说明下面结合附图对本发明进一步说明：附图1是本发明方法流程框图。具体实施方式如图1所示，本发明具体包含以下几个步骤：步骤一、定义Html表格table；<!DOCTYPEhtml><html><head><title>表格数据动态合并</title></head><body><tableid="table"></table><scripttype="text/javascript"src="jquery.min.js"></script><scripttype="text/javascript"src="bootstrap-table.min.js"></script></body></html>步骤二、初始化表格,从服务器加载远程数据；//表格初始化$('#table').bootstrapTable({//服务器后台路径url:'path',columns:[{field:'test1',title:'测试1',align:'center'},{field:'test2',title:'测试2',align:'center'},{field:'test3',title:'测试3',align:'center'},{field:'test4',title:'测试4',align:'center'},{field:'test5',title:'测试5',align:'center'},]})步骤三、实现表格动态合并的方法；//方法返回需要合并列的数据传入参数主键ID表格ID合并列IDfunctiongetObjFromTable(parimaryId,$table,field){//创建一个空对象varobj=[];//获取最大列数varmaxV=$table.find("th").length;//初始化列索引，主键列索引varcolumnIndex=0;varprimaryIndex=0;varfiledVar,parimaryVar;//循环根据列ID查找列索引for(columnIndex=0;columnIndex<maxV;columnIndex++){filedVar=$table.find("th").eq(columnIndex).attr("data-field");if(filedVar==field)break;}//循环根据主键ID查找主键索引for(primaryIndex=0;primaryIndex<maxV;primaryIndex++){parimaryVar=$table.find("th").eq(primaryIndex).attr("data-field");if(parimaryVar==parimaryId)break;}//获取表格所有行var$trs=$table.find("tbody>tr");//初始化参数var$tr;varindex=0;varcontent="";varparimary=""varrow=1;//遍历所有行for(vari=0;i<$trs.length;i++){$tr=$trs.eq(i);//获取列对应的文本varcontentItem=$tr.find("td").eq(columnIndex).html();//获取主键列对应的文本varparimaryItem=$tr.find("td").eq(primaryIndex).html();//exist//判断当文本内容与上一行相同时if(contentItem.length>0&&content==contentItem){//继续判断当主键文本内容与上一行相同时if(parimary==parimaryItem){//合并行++row++;}}else{//save//当合并行大于1时if(row>1){//将索引和行数保存到对象中obj.push({"index":index,"row":row});}//当本文与上一行不相同时，重置参数index=i;content=contentItem;parimary=parimaryItem;row=1;}}if(row>1)obj.push({"index":index,"row":row});//返回合并对象returnobj;}//表格合并方法functionmergeTable(parimaryId,field){$table=$("#table");varobj=getObjFromTable(parimaryId,$table,field);//遍历对象动态合并表格for(variteminobj){//调用bootstrapTable合并方法，传入参数$("#table").bootstrapTable('mergeCells',{index:obj[item].index,field:field,colspan:1,rowspan:obj[item].row,});}}步骤四、当表格加载完后调用合并方法。$('#table').bootstrapTable({//当表格数据加载完后自动调用合并方法onLoadSuccess：function(data){//传入合并列主键，合并列mergeTable(‘test1’,’test1’)mergeTable(‘test1’,’test2’)}｝)。.当前第1页1 2 3 当前第1页1 2 3 
1462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
