How to use bootstrap table to merge multiple rows

  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'],   // If set to All or Unlimited, all records will be displayed. 
 15 search: false , // Do not display the search box 
 16 showHeader: true ,
  17 showColumns: false , // Do not display the drop-down box (select the displayed column) 
 18 showExport: false , // Whether to display the export 
 19 paginationVAlign: "bottom" ,
  20 exportDataType: "all" ,
  21 sidePagination: "server", // server request 
 22          queryParams: queryParams,
 23 sortable: false ,     // whether to allow sorting. 
 24 minimunCountColumns: 2 ,
  25 queryParamsType: 'limit' ,
  26          columns: [{
  27 field: 'big item' ,
  28 title: 'evaluate big item' ,
  29 width: '7 %' ,
  30 align: 'left' ,
  31 valign: 'middle' ,
  32              formatter: joinPingGuDaXiang,
  33 sortable: true 
 34          }, {
  35 field: 'small item' ,
  36 title: 'evaluate small item',
 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 == "success" ) {
 100                  // console.log( $('#' + tableID)[" 0"].clientHeight); //This method can get the height of the bootstrap table 
101                  /*
102 Determine the cells of the merged table based on whether the large item of the current row == prevBigItem and whether the parentid of the small item of the current row is the same.
103                   */ 
104                  var prevBigItem = "";    // The evaluation item of the previous line 
105                  var prevSmallItem = ""; // The evaluation item of the previous line 
106                  var prevParentID = "";   // The id of the evaluation small item of the previous line No. 
107                  var currentRowBigIndex = 0;     // The subscript of the first row in the large item row group to be merged 
108                  var bigRowspan = 1;             // The number of large item rows to be rowspan.
109
110                  // The row index of the small item/the number of merged rows 
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. big item == prevBigItem) {
 129                          // The big item overlaps hahaha, it's actually good
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                              // The small items overlap
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: 'Number of attachments',
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;    // Reset initialization. 
171 bigRowspan = 1;     // Reset initialization. 
172 currentRowSmallIndex = parseInt(row.DISPID) - 1 ;
 173 smallRowspan = 1 ;
 174                      }
 175
176
177                     /*
178 Construct bootstrap switch buttons and drop-down boxes
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, you can get the height of the bootstrap table after it is successfully generated, which is one of the few methods to get the table.

The bootstrap table can add the height property in the initialization method: 500 (or 1000), which can also set the height. If it is not enough, there will be blank space, and if it is exceeded, a scroll bar will automatically appear.

Table merging, here is taken after the table is loaded successfully, and then give the 'mergeCells' cell to merge. Compare the current size item with the parentid and the previous same indicator, if they are the same,
Both currentRowBigIndex and bigRowspan change accordingly,
are merged; otherwise, both currentRowBigIndex and bigRowspan are reset initialized.