easyUI之datagrid 及struts2如何配置

datagrid可以说是easyUI最重要的一个控件。下面我们来看看它有哪些功能，以及如何来实现。

$('#firmresult').datagrid({singleSelect:true,//设置只能选择单选pagination:true,//显示分页//fit:true,//自动土适应父容器的大小fitColumns:true,//列宽的自动适应rownumbers: true,//显示第几行pageList:[5,10,15],//每页显示记录条数pageNumber:1,//当前第几页pageSize:10,//当前每页的大小height:300,//高度//url:"firmManager.action",    columns:[[//每列上的属性、名称设置        {field:'userId',checkbox:true},        {field:'devId',title:'设备ID',formatter:function(value,rowData,rowIndex){        var devId=rowData.userId;        return devId;        }        },        {field:'snStart',title:'snStart'},        {field:'snEnd',title:'snEnd'},        {field:'registerDate',title:'注册时间'}    ]]});

datagrid初始化好后，我们不得不说一下我们如何将数据在datagrid中显示出来。

首先来看一下struts2中配置是如何配置的。如果要struts支持josn格式有两种方式：

1.直接继承支持json的配置

2.在配置文件中我们设置拦截器

我们选用第二种方式，当然必要的jar包是必不可少的。见如下配置

<result-types><span style="white-space:pre"></span><result-type name="json" class="org.apache.struts2.json.JSONResult"/></result-types><interceptors>        <interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/></interceptors>                                                                                                                                           <action name="firmInfoManager" class="com.dbstar.uaas.firmmng.action.FirmRegisterManagerAction" method="searchFirmInfos">        <result type="json" >            <param name="root">result</param><!--这里比较关键，action必须要有result属性的json对象-->         </result></action>

这样配置好后，我们再来看一下如何将查询的数据在datagrid中分页显示出来，有同学可能遇到查出来的结果怎么在第一页就全部显示出来。可能遇到的问题是你虽然设置了分页，但是你将所有的记录都查寻出来了，当然这样也有解决办法，你可以使用前端分页。但是我们这里使用的是后端分页，也就是每页显示几条记录我就查询多少条记录并将其放入josn对象中。

// 查询function subSerach() {var startDate = $("#startDate").datebox('getValue');var endDate = $("#endDate").datebox('getValue');var firmId = $("#firmId").val();var userType = $("#userType").combobox('getValue');if(startDate == '') {$.messager.alert('Warning','请输入开始日期。');$("#startDate").focus();return;}if(endDate == '') {$.messager.alert('Warning','请输入结束日期。');$("#endDate").focus();return;}if(startDate > endDate) {$.messager.alert('Warning','结束日期应不小于开始日期。');$("#endDate").focus();return;}var grid = $('#firmresult');  //这个地方很关键，是分页的关键地方。这里我们获娶分页的一些属性，如第几页、每页显示多少条记录等var options = grid.datagrid('getPager').data("pagination").options; var num = options.pageNumber; var size = options.pageSize;var params = {//这里的参数是我们传到后台的查询条件，后台我们使用的是一个查询条件的对象，以及用于分页的对象'firmQueryBean.startDate':startDate,'firmQueryBean.endDate':endDate,'firmQueryBean.firmId':firmId,'firmQueryBean.userType':userType,'pagination.pageNo':num,'pagination.pageSize':size};$.post("firmInfoManager.action", params,//通过ajax的方式提交表单   function(data){if(data && data.reusltList){var ret=[];var json = data.reusltList;var atotal = data.counts;for(var i=0;i<json.length;i++){ret.push(json[i]);}var dgData = {};//设置datagrid中显示的记录，以及分页显示用到的总记录条数dgData.total = atotal;dgData.rows = ret;$('#firmresult').datagrid('loadData',dgData);}else{$.messager.alert('Warning','查询异常。');}   }, "json");//document.forms[0].submit();}

package com.dbstar.uaas.utils;import java.util.List;public class Pagination {//这就是我们的分页对象/** * 总记录数 */private long counts;/** * 第几页 */private Integer pageNo=1;/** * 每页显示记录的条数,默认值为10 */private Integer pageSize=10;/** * 总页数 */private int pageCount;/** * 是否成功 */private boolean suc;/** * 当前页显示的记录 */private List reusltList;public Integer getPageNo() {return pageNo;}public void setPageNo(Integer pageNo) {this.pageNo = pageNo;}public Integer getPageSize() {return pageSize;}public void setPageSize(Integer pageSize) {this.pageSize = pageSize;}public int getPageCount() {return pageCount;}public void setPageCount(int pageCount) {this.pageCount = pageCount;}public List<Object> getReusltList() {return reusltList;}public void setReusltList(List reusltList) {this.reusltList = reusltList;}public long getCounts() {return counts;}public boolean isSuc() {return suc;}public void setSuc(boolean suc) {this.suc = suc;}public void setCounts(long counts) {if(counts % pageSize == 0) {pageCount = (int)counts / pageSize;}else {pageCount = (int)(counts + pageSize) / pageSize;}if(pageNo<1){pageNo = 1;}else if(pageNo > pageCount) {pageNo = pageCount;}this.counts = counts;}}

好了，我们来看一下后台的查询方法

/** * 查询厂商信息 * @return */public String searchFirmInfos(){try {if(firmManager==null)firmManager = new FirmManager();if(firmQueryBean==null){firmQueryBean = new FirmQueryBean();}if(pagination==null){pagination = new Pagination();}pagination = firmManager.searchFirmInfosByPage(firmQueryBean, pagination);pagination.setSuc(true);} catch (Exception e) {pagination.setSuc(false);logger.error("ther operate DB error..");e.printStackTrace();}result=JSONObject.fromObject(pagination); return SUCCESS;}

最后我们再来看一下显示效果的页面

好了，这样我们就大功告成，如果有什么疑问的朋友，我们可以再一起讨论。因为毕竟也对easyUI接触的时间不长。