easyUI datagrid 跨行跨列操作

最新推荐文章于 2021-10-04 19:12:59 发布

转载最新推荐文章于 2021-10-04 19:12:59 发布 · 3.7k 阅读

jquery-easyui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用 EasyUI 的 DataGrid 控件展示数据的例子。通过 JavaScript 初始化 DataGrid，并从服务器获取模拟数据填充表格。展示了如何定义列配置及服务器端提供数据的方式。

datagrid_test.js

[javascript]view plaincopy 
   
 $(function(){  
         $('#dg').datagrid({  
             url:"http://localhost:8080/test/getTable.do",  
             width:400,   
             columns:[[      
                 {field:'date',title:'日期',rowspan:2,width:150,align:'center'},      
                 {title:'注册量',halign:'center',colspan:3,width:250},      
             ],[      
                 {field:'weixin',title:'微信',width:80,sortable:true,align:'center'},      
                 {field:'application',title:'APP',width:80,sortable:true,align:'center'},      
                 {field:'web',title:'网站',width:100,align:'center',sortable:true}    
             ]]      
         });  
     });  
 
  
 

controller

[java]view plaincopy 
   
 @RequestMapping("/getTable.do")  
     @ResponseBody  
     public List<Map<String, Object>> getTable()  
     {  
         Map<String, Object> rstMap = new HashMap<String, Object>();  
                   
         for (int i=0;i<1;i++) {  
             Map<String, Object> v1 = new HashMap<String, Object>();  
             v1.put("date", new Date().getTime());  
             v1.put("weixin", 123);  
             v1.put("application", 123);  
             v1.put("web", 123);  
               
             rowList.add(v1);  
         }     
           
         return rowList;   
     }  