``` <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> ```