How to implement a table across rows and columns in jQuery easyUI

Code:
Part of page access data

$(function (){
    $('#dg').datagrid({    
       url:'tableController.do?getTable&field=itemid,productid,listprice,unitcost,attr1,status',    
       singleSelect:true,
       collapsible:true,//收起表格的内容
       width: 700,
       height: 450,
       loadMsg: '数据加载中...',
       singleSelect:true,
       fitColumns:true,
       rownumbers: true,//显示行数
       idField: 'itemid',
       pagination:true,//显示分页
       pageSize:20,
       pageNumber:1,
       pageList:[20,40,60,80,100],
       columns:[[      
            {field:'',title:'95598账目计算表',colspan:6,align:'center',height:30}      
          ],[
          {field:'itemid',title:'部门名称',rowspan:2,align:'center'}, 
          {field:'',title:'统计各部门的账目总和：50亿美元',colspan:5,align:'right'}
          ],[
          {field:'productid',title:'目录',width:100,align:'center'}, 
          {field:'listprice',title:'部门一',width:100,align:'center'}, 
          {field:'unitcost',title:'部门二',width:100,align:'center'}, 
          {field:'attr1',title:'部门三',width:100,align:'center'}, 
          {field:'status',title:'部门四',width:100,align:'center'}
          ]],  
          onLoadSuccess: function (data) {
             if (data.rows.length > 0) {                 //调用mergeCellsByField()合并单元格
                 mergeCellsByField("dg", "itemid");                 // 重新载入当前页面数据
                 setTimeout("$('#dg').datagrid('reload');",5000);
              }
          }

}); 
$('#dg').datagrid('getPager').pagination({
        beforePageText:'',
        afterPageText:'/{pages}',
        displayMsg:'{from}-{to}共 {total}条',
        showPageList:true,
        showRefresh:true,
        onBeforeRefresh:function(pageNumber, pageSize){ 
        $(this).pagination('loading');
        $(this).pagination('loaded'); 
    }
});

/**
* EasyUI DataGrid dynamically merges cells based on fields
* Parameter tableID The id of the table to be merged
* Parameter colList The columns to be merged, separated by commas (for example: "name, department, office");
*/

function mergeCellsByField(tableID, colList) {
   var ColArray = colList.split(",");   
   var tTable = $("#" + tableID);   
   var TableRowCnts = tTable.datagrid("getRows").length;   
   var tmpA;   
   var tmpB;   
   var PerTxt = "";   
   var CurTxt = "";  
   var alertStr = "";   
   for (j = ColArray.length - 1; j >= 0; j--) {
       PerTxt = "";
       tmpA = 1;
       tmpB = 0;       
           for (i = 0; i <= TableRowCnts; i++) {           
           if (i == TableRowCnts) {
               CurTxt = "";
           }           else {
               CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
           }           if (PerTxt == CurTxt) {
               tmpA += 1;
           }           else {
               tmpB += tmpA;

               tTable.datagrid("mergeCells", {
                   index: i - tmpA,
                   field: ColArray[j],　　//合并字段
                   rowspan: tmpA,
                   colspan: null
               });
               tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
                   index: i - tmpA,
                   field: "Ideparture",
                   rowspan: tmpA,
                   colspan: null
               });

               tmpA = 1;
           }
           PerTxt = CurTxt;
       }
   }
}

For the back-end simulated data, as long as the front-end can receive the data, display the most basic table and call mergeCellsByField(tableID, colList)
, it will merge the cells after the data is loaded. The data is just for testing whether it can be displayed correctly

/**
* *
* Test the method of displaying table content
* @return
​*/

    @RequestMapping(params = "getTable")    
    public void getTable(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) {

        List<Map<String, Object>> listResults=new ArrayList<Map<String,Object>>();

        String[] str = {"满意数","不满意数","满意率","合计","部门的总共数","部门满意率"};
        String[] item = {"满意度","消息","评价","总计"};        
        int j = 0;int k = 0;        
        try {            
        for (int i = 0; i < 24 ; i++) {
                Map<String, Object> map = new HashMap<String, Object>();                if(i/6==j){                map.put("itemid", item[j]);                map.put("productid", str[k]);                map.put("listprice", new Random().nextInt(100));                map.put("unitcost", new Random().nextInt(100));                map.put("attr1", new Random().nextInt(100));                map.put("status", new Random().nextInt(100));
                k++;
                }else{
                ++j;
                k=0;                
                map.put("itemid", item[j]);                
                map.put("productid", str[k]);                
                map.put("listprice", new Random().nextInt(100));                
                map.put("unitcost", new Random().nextInt(100));                
                map.put("attr1", new Random().nextInt(100));                
                map.put("status", new Random().nextInt(100));
                k++;
            }

        listResults.add(map);
    }        int page = dataGrid.getPage();        
    int rows = dataGrid.getRows();
        List<Map<String, Object>> listResultsEnd=new ArrayList<Map<String,Object>>();        
        for (int i = (page-1)*rows; i < page*rows; i++) {        
        if(listResults.size()>=(i+1)){
        listResultsEnd.add(listResults.get(i));
        }
    }

    dataGrid.setResults(listResultsEnd);
    dataGrid.setTotal(listResults.size());
    TagUtil.datagrid(response, dataGrid);

} catch (Exception e) {
e.printStackTrace();
}
    }

The above is the detailed content of How to implement a table across rows and columns in jQuery easyUI. For more information, please follow other related articles on the PHP Chinese website!