jQuery easyUI中表格的跨行跨列

来源:互联网 发布:oracle sql 去掉重复 编辑:程序博客网 时间:2024/06/11 14:36

这里写图片描述
代码:
页面访问数据的部分

$(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();}    }
原创粉丝点击