Heim > Web-Frontend > js-Tutorial > So implementieren Sie eine zeilen- und spaltenübergreifende Tabelle in jQuery easyUI

So implementieren Sie eine zeilen- und spaltenübergreifende Tabelle in jQuery easyUI

一个新手
Freigeben: 2017-10-17 10:20:22
Original
4555 Leute haben es durchsucht


So implementieren Sie eine zeilen- und spaltenübergreifende Tabelle in jQuery easyUI
Code:
Teil der Seitenzugriffsdaten

$(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'); 
    }
});
Nach dem Login kopieren

/**
* EasyUI DataGrid führt Zellen dynamisch basierend auf Feldern zusammen
* Parameter tableID Die ID der zusammenzuführenden Tabelle
* Parameter colList Die zusammenzuführenden Spalten, getrennt durch Kommas (zum Beispiel: „Name, Abteilung, Büro");
*/

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;
       }
   }
}
Nach dem Login kopieren

Solange das Front-End die Daten empfangen kann, zeigen Sie bei simulierten Back-End-Daten die einfachste Tabelle an und rufen Sie mergeCellsByField(tableID, colList) auf.
Dadurch werden die Zellen zusammengeführt, nachdem die Daten geladen wurden . von. Die Daten dienen lediglich zum Testen, ob sie korrekt angezeigt werden können

/**
* *
* Testen Sie die Methode zur Anzeige von Tabelleninhalten
* @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();
}
    }
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine zeilen- und spaltenübergreifende Tabelle in jQuery easyUI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage