easyui datagrid使用

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

 

Html代码

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

 

界面加入

 

 

Html代码

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

<table id="cxdm"></table>

 

加载datagrid的js代码

 

 

Java代码

 

//页面加载$(document).ready(function(){loadGrid();});//加载表格datagridfunction loadGrid(){//加载数据$('#cxdm').datagrid({width: 'auto',height:300,striped: true,singleSelect : true,url:'getPsNewConsultList.action',//queryParams:{},loadMsg:'数据加载中请稍后……',pagination: true,rownumbers: true,columns:[[    {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},{field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),//添加超级链，并将来文号作为参数传入formatter:function(val,rec){//alert(rec.adviceid);                return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";               }},{field:'content',title: '状态',align: 'center',width: getWidth(0.2)},{field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}]]});}//为loadGrid()添加参数var queryParams = $('#cxdm').datagrid('options').queryParams;    queryParams.who = who.value;    queryParams.type = type.value;    queryParams.searchtype = searchtype.value;    queryParams.keyword = keyword.value;    //重新加载datagrid的数据    $("#cxdm").datagrid('reload');

 

 datagrid添加参数的方式

Js代码

//为loadGrid()添加参数var queryParams = $('#cxdm').datagrid('options').queryParams;    queryParams.who = who.value;    queryParams.type = type.value;    queryParams.searchtype = searchtype.value;    queryParams.keyword = keyword.value;    //重新加载datagrid的数据    $("#cxdm").datagrid('reload');

 或者直接添加在url中

Js代码

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

 

Action层

 

Java代码

//当前页码private int page;.........//征询意见结果集private List<Object> rows;...........@SuppressWarnings("unchecked")public String getPsNewConsultList() throws GlobalException {//获取每页显示的行数int pageRows=10;if(null!=request.getParameter("rows")) {pageRows=Integer.parseInt(request.getParameter("rows").toString());}...........//获取结果集this.setRows(proposalService.getPsNewConsultList(consulter,consultee,type,psId,psContent,pageRows*(page-1)+1,pageRows*page));//获取总记录数this.setTotal(100);...............}

 

其中的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

 

Java代码

<action name="getPsNewConsultList" class="proposalConsultAction" method="getPsNewConsultList"><result name="success" type="json">          <param name="includeProperties">          ^rows\[\d+\]\.\w+,total         </param>         <param name="noCache">true</param>          <param name="ignoreHierarchy">false</param>               </result></action>

 

service层

 

Java代码

 

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

 

 

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

 

Java代码

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

http://www.cnblogs.com/zgqys1980/archive/2011/01/04/1925775.html 原文地址