bootstrap table合并单元格（该版本是简单的应用）

Posted 2022-04-09 blogtt

 

//获取列表数据
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();