bootstrap表格 合并多行的使用方法

  1 function initTable(tableID) {
  2     $("#" + tableID).bootstrapTable('destroy');
  3     $('#' + tableID).bootstrapTable({
  4         method: 'post',
  5         url: primary_url,
  6         contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  7         showRefresh: false,
  8         // height: $(window).height()+500,
  9         striped: true,
 10         pagination: false,
 11         paginationLoop: false,
 12         singleSelect: false,
 13         // pageSize: 300,
 14         pageList: ['All'],  //设置为 All 或者 Unlimited，则显示所有记录。
 15         search: false, //不显示 搜索框
 16         showHeader: true,
 17         showColumns: false, //不显示下拉框（选择显示的列）
 18         showExport: false,//是否显示导出
 19         paginationVAlign: "bottom",
 20         exportDataType: "all",
 21         sidePagination: "server", //服务端请求
 22         queryParams: queryParams,
 23         sortable: false,    //是否允许排序.
 24         minimunCountColumns: 2,
 25         queryParamsType: 'limit',
 26         columns: [{
 27             field: '大项',
 28             title: '评估大项',
 29             width: '7%',
 30             align: 'left',
 31             valign: 'middle',
 32             formatter: joinPingGuDaXiang,
 33             sortable: true
 34         }, {
 35             field: '小项',
 36             title: '评估小项',
 37             width: '10%',
 38             align: 'left',
 39             valign: 'middle',
 40             formatter: joinPingGuXiaoXiang,
 41             sortable: true
 42         }, {
 43             field: '小项序号',
 44             title: '序号',
 45             width: '3%',
 46             align: 'center',
 47             valign: 'middle',
 48             sortable: true
 49         }],
 95         onLoadError: function (data) {
 96 
 97         },
 98         onLoadSuccess: function (data) {
 99             if (data.code == "1" && data.message == "成功") {
100                 // console.log( $('#' + tableID)["0"].clientHeight);    //这种办法可以取到bootstrap表格的高度
101                 /*
102                 要根据当前行的大项 == prevBigItem,和当前行的小项的parentid是否相同,结合来判定合并表格的单元格.
103                  */
104                 var prevBigItem = "";   //前一行的评估大项
105                 var prevSmallItem = ""; //前一行的评估小项
106                 var prevParentID = "";  //前一行的评估小项的id号
107                 var currentRowBigIndex = 0;    //要合并的大项行组里第一行的下标
108                 var bigRowspan = 1;            //要rowspan的大项行数.
109 
110                 //小项的行下标/合并的行数
111                 var currentRowSmallIndex = 0;
112                 var smallRowspan = 1;
113 
114                 for (var i = 0; i < data.total; i++) {
115                     var row = data.rows[i];
116                     var wd_name = data.v_wd;
121                    
128                     if (row.大项 == prevBigItem) {
129                         //大项重合了 哈哈哈居然好啦
130 
131                         bigRowspan++;
132                         $("#" + tableID).bootstrapTable('mergeCells', {
133                             index: currentRowBigIndex,
134                             field: '大项',
135                             colspan: 1,
136                             rowspan: bigRowspan
137                         });
138 
139 
140                         if (row.PARENTID == prevParentID) {
141                             //小项重合了
142 
143                             smallRowspan++;
144 
145                             $("#" + tableID).bootstrapTable('mergeCells', {
146                                 index: currentRowSmallIndex,
147                                 field: '小项',
148                                 colspan: 1,
149                                 rowspan: smallRowspan
150                             });
151 
152                             /*$("#" + tableID).bootstrapTable('mergeCells', {
153                                 index: currentRowSmallIndex,
154                                 field: '附件数量',
155                                 colspan: 1,
156                                 rowspan: smallRowspan
157                             });*/
158 
159                             $("#" + tableID).bootstrapTable('mergeCells', {
160                                 index: currentRowSmallIndex,
161                                 field: '小项得分',
162                                 colspan: 1,
163                                 rowspan: smallRowspan
164                             });
165                         } else {
166                             currentRowSmallIndex = parseInt(row.DISPID) - 1;
167                             smallRowspan = 1;
168                         }
169                     } else {
170                         currentRowBigIndex = parseInt(row.DISPID) - 1;   //重置初始化.
171                         bigRowspan = 1;    //重置初始化.
172                         currentRowSmallIndex = parseInt(row.DISPID) - 1;
173                         smallRowspan = 1;
174                     }
175 
176 
177                     /*
178                     构造bootstrap的开关按钮和下拉框
179                      */
182                     prevBigItem = row.大项;
183                     prevSmallItem = row.小项;
184                     prevParentID = row.PARENTID;
196             }
197 
198         },
199         onRefresh: function () {
200             afterflash = 1;
201 
202         },
203         onPostBody: function () {
204 
205         }
206 
207     });
208 }

 

$('#' + tableID)["0"].clientHeight,可以在bootstrap的表格成功生成后取得其高度,是为数不多的能取得表格的方法之一.

bootstrap table可以在初始化方法里,加入height属性:500(或1000),这样也能定下高度.不够会有留白,超出了会自动出现滚动条.

表格合并,这里采取是表格加载成功后,再给予'mergeCells'单元格合并.以当前大小项和parentid和上一个同指标相比较,如果相同,
currentRowBigIndex和bigRowspan都进行相应的变化,
就加以合并;否则,currentRowBigIndex和bigRowspan都给重置初始化.