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接触的时间不长。