登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery easyUI中实现表格的跨行跨列的方法

一个新手
发布: 2017-10-17 10:20:22
原创
4300人浏览过


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

$(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();
}
    }
登录后复制

以上就是jQuery easyUI中实现表格的跨行跨列的方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号