``` <table id="data-table"></table> <script type="text/javascript"> /** * 合并指定表格（表格id為_t_id）指定列（列數為_t_colnum）的相同文本的相鄰單元格 * @param {[type]} _t_id 表格選擇器，如#table * @param {[type]} _t_colnum 需要合并單元格的所在列。為數字，從最左邊第一列為1開始算起。 */ function _table_rowspan(_t_id, _t_colnum) { //聲明合并數組 var _t_merge_arr = []; //合并起始行 var _t_start_index = 0; //合并多少行 var _t_merge_number = 0; //聲明臨時比較變量 var _t_compare_value = ''; //獲取數據行數 var _t_rows = null; //如果table的長度為1則此頁面只有一個表格(即只有一個table對象) if($(_t_id).length == 1){ //獲取要合并的列的對象 $("#data-table tr td:nth-child(1)") _t_rows = $(_t_id + " tr td:nth-child(" + _t_colnum + ")"); } else if($(_t_id).length > 1){ //多個表格時以最后一個表格為準 獲取要合并的列的對象 _t_rows = $(_t_id).eq($(_t_id).length - 1).find("tr td:nth-child(" + _t_colnum + ")"); } else { //沒有找到表對象直接返回 return; } //遍歷這列下的行 _t_rows.each(function(i,td) { //console.log(i) //獲取當前列下當前行的文本 td==this var _t_temp_value = $(this).text(); if (i==0) { //step 1 //此列的首行不比較,將首行的的文本內容賦值給_t_compare_value以便與下一行比較 _t_compare_value = _t_temp_value; //準備合并的行數+1(0+1=1) _t_merge_number ++; } else { //對比本行數據和上行數據是否一樣 if (_t_compare_value == _t_temp_value) { //此列和上列相同合并數+1 _t_merge_number ++; if(_t_merge_number > 1){ //聲明合并行大于1的對象 var _t_merge_object = {index: _t_start_index,rowspan: _t_merge_number}; //取出合并數組最后一個對象[{"index": 0,"rowspan": 3}] var _t_merge_arr_last_object = _t_merge_arr[_t_merge_arr.length - 1]; //step 2 4 9 if (_t_merge_arr.length > 0) { //step 5 10 //根據起始下標看是否是同一合并 if (_t_merge_arr_last_object.index == _t_merge_object.index) { //step 6 _t_merge_arr[_t_merge_arr.length - 1] = _t_merge_object; } else { //step 11 _t_merge_arr.push(_t_merge_object); } } else { //step 3 //第二次(下標為1)時追加_t_merge_object對象 _t_merge_arr.push(_t_merge_object); } } } else { //step 7 8 //當與上一行不相等時重置【準備合并的行數、與比較的值】且開始位置為當前行 _t_merge_number = 1; _t_start_index = i; _t_compare_value = _t_temp_value; } } }); for (var i = 0; i < _t_merge_arr.length; i++) { var item = _t_merge_arr[i]; var rowsnum = item.rowspan; for ( var j = 0; j < rowsnum-1; j++) { $(_t_rows[item.index+j+1]).css('display','none'); } $(_t_rows[item.index]).attr("rowSpan", item.rowspan); } } $(function(){ $("#data-table").bootstrapTable({ clickToSelect: true, singleSelect: true, columns: [ { title: "序號" , align: "center", sortable: false , formatter: function(value , row , rowIndex){ window.rowProps = (window.rowProps || {}); window.rowProps[row.country + "_" + row.city] = true; return Object.getOwnPropertyNames(window.rowProps).length; } }, { field: "city" , title: "城市" , align: "center", sortable: false , formatter: function (value , row , rowIndex) { return "<label style='display:none;'>" + row.country + "</label>" + value; } }, {field: "name" , title: "姓名" , align: "center", sortable: true}, {field: "remark" , title: "說明" , sortable: true, clickToSelect: false} ], data: [ {"country" : "中國" , "city" : "襄陽" , "name" : "龐統" , "remark" : "中國的襄陽"}, {"country" : "中國" , "city" : "襄陽" , "name" : "徐庶" , "remark" : "中國的襄陽"}, {"country" : "中國" , "city" : "襄陽" , "name" : "馬謖" , "remark" : "中國的襄陽"}, {"country" : "韓國" , "city" : "襄陽" , "name" : "不知道" , "remark" : "韓國的襄陽"}, {"country" : "韓國" , "city" : "漢城" , "name" : "不知道" , "remark" : "韓國的漢城"}, {"country" : "韓國" , "city" : "漢城" , "name" : "文在寅" , "remark" : "韓國的漢城"} ], onPostBody: function() { //在表體呈現并在DOM中可用之后觸發 window.rowProps = undefined; //合并第一列 _table_rowspan("#data-table" , 1); //合并第二列 _table_rowspan("#data-table" , 2); return true; }, responseHandler: function (result) { console.log($result) //在加載遠程數據之前，處理響應數據格式 var options = $("#data-table").bootstrapTable("getOptions"); var pageNumber = options.pageNumber; var pageSize = options.pageSize; var rows = result.rows; for(var i=0 ; i < rows.length ; i++){ var item = rows[i]; item.id = (pageNumber - 1) * pageSize + (i + 1); item.name = item.name + item.id; } console.log($result) return result; } }); }) </script> ```