easyui datagrid使用

​

加载相关js和css，因为easyui依赖jquery，所有加载easyui前要先加载jquery，否则为提示找不到datagrid

1. 1. 
      
2. <!-- 加载jquery -->  
3.         <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>  
4.         <!-- 加载jquery-easyui -->  
5.         <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">  
6.         <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">  
7.         <script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>  
   1. 
      

界面加入

1. 1. 
      
2. <table id="cxdm"></table>  
   1. 
      

加载datagrid的js代码

1. 1. 
      
2. //页面加载  
3. $(document).ready(function(){  
4.             loadGrid();  
5. });  
6. 
   
7. //加载表格datagrid  
8. function loadGrid()  
9. {  
10.     //加载数据  
11.     $('#cxdm').datagrid({  
12.                 width: 'auto',  
13.                 height:300,               
14.                 striped: true,  
15.                 singleSelect : true,  
16.                 url:'getPsNewConsultList.action',  
17.                 //queryParams:{},  
18.                 loadMsg:'数据加载中请稍后……',  
19.                 pagination: true,  
20.                 rownumbers: true,     
21.                 columns:[[  
22.                     {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},  
23.                     {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),  
24.                         //添加超级链，并将来文号作为参数传入  
25.                         formatter:function(val,rec){  
26.                             //alert(rec.adviceid);  
27.                             return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";  
28.                        }  
29.                     },  
30.                     {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},  
31.                     {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}                                                          
32.                 ]]  
33.             });  
34. }  
35. 
    
36. //为loadGrid()添加参数  
37.         var queryParams = $('#cxdm').datagrid('options').queryParams;  
38.         queryParams.who = who.value;  
39.         queryParams.type = type.value;  
40.         queryParams.searchtype = searchtype.value;  
41.         queryParams.keyword = keyword.value;  
42.         //重新加载datagrid的数据  
43.         $("#cxdm").datagrid('reload');  
    1. 
       

 datagrid添加参数的方式

1. 1. 
      
2. //为loadGrid()添加参数  
3. var queryParams = $('#cxdm').datagrid('options').queryParams;  
4.         queryParams.who = who.value;  
5.         queryParams.type = type.value;  
6.         queryParams.searchtype = searchtype.value;  
7.         queryParams.keyword = keyword.value;  
8.         //重新加载datagrid的数据  
9.         $("#cxdm").datagrid('reload');  
   1. 
      

 或者直接添加在url中

1. 1. 
      
2. $('#repeatpspolal').datagrid({  
3.      title:'重复的未初分提案',  
4.      loadMsg:"数据加载中，请稍后……",  
5.      region:'north',  
6.      url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,  
7. 。。。。。。  
   1. 
      

Action层

1. 1. 
      
2. //当前页码  
3. private int page;  
4. .........  
5. //征询意见结果集  
6. private List<Object> rows;  
7. ...........  
8. 
   
9. @SuppressWarnings("unchecked")  
10. public String getPsNewConsultList() throws GlobalException {  
11.         //获取每页显示的行数  
12.         int pageRows=10;  
13.         if(null!=request.getParameter("rows")) {  
14.             pageRows=Integer.parseInt(request.getParameter("rows").toString());  
15.         }  
16.         ...........  
17.         //获取结果集  
18.         this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));  
19.         //获取总记录数  
20.         this.setTotal(100);  
21.         ...............  
22. }  
    1. 
       

其中的page由datagrid传入，当用户在datagrid左下角选择每页显示的行数时，datagrid会将该值已参数形式附加到url后面传入action中，名字就叫page，还要将结果总行数total传给datagrid，用于分页

不知道是datagrid配置有误还是datagrid的bug，datagrid的结果集和每页显示的行数都叫rows，重名了

解决办法如上，结果集还是叫rows，但是List的类型改为Object而不能用实体的类型，每页显示的行数通过request获取

action配置时，要继承json-default，json-default继承自struts-default，还要配置输出结果类型为json

1. 1. 
      
2. <action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList">  
3.         <result name="success" type="json">  
4.              <param name="includeProperties">  
5.                     ^rows\[\d+\]\.\w+,total  
6.              </param>  
7.              <param name="noCache">true</param>    
8.             <param name="ignoreHierarchy">false</param>   
9.               </result>  
10.     </action>  
    1. 
       

service层

1. 1. 
      
2. @SuppressWarnings("unchecked")  
3.     public List getPsNewConsultList(String consulter,String consultee,String type,String psId,String psContent,int pageRows,int page) throws Exception {  
4.         return proposalDAO.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows,page);  
5.     }  
   1. 
      

dao层只需要将ResultSet中的数据循环加入实体属性，然后将实体实例加入List即可，形式如下：

1. 1. 
      
2. List<Person> list=new ArrayList<Person>();  
3. Person person=null;  
4. while(rs.next())  
5. {  
6.     person=new Person();  
7.     person.setId(i);  
8.     person.setName("名字"+i);  
9.     list.add(person);  
10. }  
11. .........  
12. return list;   
    1.