bootstrapTable mergeCells
来源:互联网 发布:云计算服务器价格 编辑:程序博客网 时间:2024/05/17 02:39
question
refmake the some content merge by the remark
resolution
- index.html
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css"></head><body> <h1>table</h1> <table id="table" data-toggle="table" data-toolbar="#toolbar" data-height="400" data-url="../json/data1.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>3</td><td>3</td><td>3</td> </tr> <tr> <td>3</td><td>3</td><td>3</td> </tr> <tr> <td>3</td><td>3</td><td>3</td> </tr> </tbody> </table> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="./bootstrap-table/bootstrap-table.min.js"></script> <script type="text/javascript" src="./index.js"></script></body></html>
- index.js
$(document).ready(function(){ var columnName="name"; mergeTable(columnName);});function mergeTable(field){ $table=$("#table"); var obj=getObjFromTable($table,field); for(var item in obj){ $("#table").bootstrapTable('mergeCells',{ index:obj[item].index, field:field, colspan:1, rowspan:obj[item].row, }); }}function getObjFromTable($table,field){ var obj=[]; var maxV=$table.find("th").length; var columnIndex=0; var filedVar; for(columnIndex=0;columnIndex<maxV;columnIndex++){ filedVar=$table.find("th").eq(columnIndex).attr("data-field"); if(filedVar==field) break; } var $trs=$table.find("tbody > tr"); var $tr; var index=0; var content=""; var row=1; for (var i = 0; i <$trs.length;i++) { $tr=$trs.eq(i); var contentItem=$tr.find("td").eq(columnIndex).html(); //exist if(contentItem.length>0 && content==contentItem ){ row++; }else{ //save if(row>1){ obj.push({"index":index,"row":row}); } index=i; content=contentItem; row=1; } } if(row>1)obj.push({"index":index,"row":row}); return obj; }
- img
1 0
- bootstrapTable mergeCells
- bootstrapTable
- bootstrapTable api
- bootstrapTable 举例
- bootstrapTable Rows
- BootstrapTable使用
- bootstrapTable demo
- [VB]MergeCells和MergeCol、MergeRow 属性
- bootstrapTable跨域问题
- bootstraptable的 showFooter属性
- bootstrapTable服务器分页
- bootstrapTable的参数设置
- bootstrapTable-显示序号
- BootStrapTable 隐藏列
- bootstrapTable excel导出
- bootstrapTable 使用范例
- BootStrapTable 自定义导出
- bootstrapTable 举例2
- 分页1-5之间跳转代码
- 我用Xamarin开发android应用,应用在真机上一打开就退出了
- servlet介绍
- JavaScript学习-DOM2和DOM3的变化
- 数据库系统概论学习攻略(第四期)
- bootstrapTable mergeCells
- c语言题目集合
- Java Socket 编程那些事(1)
- 短信猫实现短信验证小例子
- SpringBean的生命周期
- Hangman Judge- UVA 489
- 2017华东师范大学网络赛—F
- 领域驱动设计入门(一)【在线书店--简介】
- 排序算法