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],
       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();
}
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值