jQuery easyUI中表格的跨行跨列

jQuery easyUI中表格的跨行跨列

代码:

页面访问数据的部分

$(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],
/* frozenColumns: [[    
                { title: '区域名称', field: 'regionname', width: 80, sortable: true,align:'center'}    
                       ]],  */  
            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根据字段动态合并单元格
* 参数 tableID 要合并table的id
* 参数 colList 要合并的列,用逗号分隔(例如:"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;
       }
   }
}
});


后端模拟的数据,只要前台能够收到数据,将最基本的表格显示出来,调用mergeCellsByField(tableID, colList)

即可,他是将数据加载完成之后在进行单元格合并的。数据只是为了测试是否能够正确显示


/**
     * 
     * 测试显示表格内容的方法
     * @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();
}
    }