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 병합할 테이블의 ID
* 매개변수 colList 병합할 열은 쉼표로 구분됩니다(예: "이름, 부서, 사무실").*/

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

위 내용은 jQuery easyUI에서 행과 열에 걸쳐 테이블을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!