Home > Web Front-end > JS Tutorial > How to implement a table across rows and columns in jQuery easyUI

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

一个新手
Release: 2017-10-17 10:20:22
Original
4554 people have browsed it


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'); 
    }
});
Copy after login

/**
* 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;
       }
   }
}
Copy after login

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();
}
    }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template