首页 > 代码库 > easyUI之datagrid 及struts2如何配置

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 = http://www.mamicode.com/{};//设置datagrid中显示的记录,以及分页显示用到的总记录条数>
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接触的时间不长。