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都給重置初始化.