bootstrap table合並單元格（該版本是簡單的應用）

 

//獲取列表數據
function loadTableData(tableId, request, data) {
    $.ajax({
        type : "GET",
        url : request,
        contentType : 'application/json',
        dataType : "json",
        data : data,
        success : function(json) {
            //從后台獲取到數據后進行表格的渲染
            $('#featureBusinessClassifyTable').bootstrapTable('load', json);
            //合並單元格，獲取單元格中的數據
            var data = $(tableId).bootstrapTable('getData', true);
            //合並單元格
             mergeCells(data, "business", 1, $(tableId));
             mergeCells(data, "sm", 1, $(tableId));
             mergeCells(data, "technicalCore", 1, $(tableId));
        },
        error : function(json) {
            console.log("失敗" + json);
        }
    })
}

 

以下是核心方法

function mergeCells(data,fieldName,colspan,target){
//聲明一個map計算相同屬性值在data對象出現的次數和
var sortMap = {};
for(var i = 0 ; i < data.length ; i++){
for(var prop in data[i]){
if(prop == fieldName){
var key = data[i][prop]
if(sortMap.hasOwnProperty(key)){
sortMap[key] = sortMap[key] * 1 + 1;
} else {
sortMap[key] = 1;
}
break;
} 
}
}
for(var prop in sortMap){
console.log(prop,sortMap[prop])
}
var index = 0;
for(var prop in sortMap){
var count = sortMap[prop] * 1;
$(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count}); 
index += count;
}
}

 后台從數據庫獲取全部數據時，要根據要合並的例進行order by，最大類在最前面然后以此類推，如下：

  public List<NbBusinessClassify> getAllOrderBy(String col,String search) {
          String sql = null;
          if("".equals(search)||search==null){
             sql = "select * from nb_feature_business_classify order by "+col +",SM,technical_core,group_leader";
          }else{
              //sql = "select * from nb_feature_business_classify where business_name like "+ search +" or SM like " +search+" or business_child like "+search+" order by "+col +",SM,technical_core,group_leader";
              sql = "select * from nb_feature_business_classify  where LOCATE('"+search+"',business_name) >0 or LOCATE('"+search+"',SM) >0 or LOCATE('"+search+"',business_child) >0 order by "+col +",SM,technical_core,group_leader";  
          }
          return getSession().createSQLQuery(sql).addEntity(NbBusinessClassify.class).list();
    }