YUI DataTable 服务器端翻页与排序

这两天试用了一下YUI的DataTable，翻页和排序都在后台实现，数据以JSON格式传输，现在总结一下。

简单地讲，主要有以下几点：
1）在DataTable的config中指定dynamicData=true，DataTable的翻页、排序就会自动通过DataSource获得。

2）DataSource默认发送的request参数格式如下：
sort={SortColumnKey}&dir={SortColumnDir}&startIndex={PaginationStartIndex}&results={PaginationRowsPerPage}
如果需要增加其他参数，就需要指定generateRequest为一个自己定义的函数，在这个函数中自己拼request参数。generateRequest的第一个参数是这样的：

pagination
offsetRecord：数字，当前页第一记录数
rowsPerPage：数字，每页记录数
sortedBy
key：String，排序列的Key
dir：String，排序方向，为YAHOO.widget.DataTable.CLASS_ASC 或者 YAHOO.widget.DataTable.CLASS_DESC

3）前端要动态修改总记录数，方法是定义DataTable的handleDataReturnPayload

4）后台根据前台的参数获取当前页的列表，另外还要有总记录数。

以下是部分代码，关于前后之间JSON数据传输的问题参见我另一篇文章《YUI + struts2实现基于JSON通讯的AJAX例子》。

这里是画面【查询】按钮的处理函数，要多发一个姓名作为查询参数：

	function searchButton_click() {

		var searchName = document.getElementById("name").value;

		var convertSex = function(sData) {
			if (sData == '0') {
				return '女';
			} else {
				return '男';
			}
		};

		//定义DataSource
		//其中responseSchema中要定义一个总记录数（totalRecords）的数据项
		var myDataSource = new YAHOO.util.DataSource("SearchPersonAction.action?");   //注意action后的？
		myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
		myDataSource.responseSchema = {
			resultsList :"returnObj.personList",
			fields : [ "name", {key:"sex", parser:convertSex}, "birthday", "company", "phone" ],
			metaFields: {totalRecords: "returnObj.totalRecords" }   
		};

		//定义表格的列
		var myColumnDefs = [ {
			key :"name",
			label :"姓名",
			width :100,
			sortable :true
		}, {
			key :"sex",
			label :"性别",
			width :50,
			sortable :true
		}, {
			key :"birthday",
			label :"出生日期",
			width :100,
			sortable :true
		}, {
			key :"company",
			label :"单位",
			width :200,
			sortable :true
		}, {
			key :"phone",
			label :"电话",
			width :100,
			sortable :true
		} ];

		//自定义的request参数构造函数，增加了一个姓名的参数
		var requestBuilder = function(oState, oSelf) {
		    var sort = oState.sortedBy.key;   
		    var dir = oState.sortedBy.dir;   
		    var startIndex = oState.pagination.recordOffset;   
		    var results = oState.pagination.rowsPerPage;   
		    var personName = searchName;

		    var reqStr = "sort=" + sort +
		            "&dir=" + dir +
		            "&startIndex=" + startIndex +
		            "&results=" + results +
		            "&name=" + encodeURI(personName);

            return reqStr;
		};

		//配置DataTable
		//dynamicData指定为true，动态获取数据
		//指定generateRequest为我们自己的函数
		//由于initialRequest指定对姓名排序，所以sortedBy要配置成与其一致
		var myConfigs = {
			paginator :new YAHOO.widget.Paginator( {
				rowsPerPage :5,
				firstPageLinkLabel : "第一页", 
	            lastPageLinkLabel : "尾页", 
	            previousPageLinkLabel:"上一页",
	            nextPageLinkLabel:"下一页"
			}),
			sortedBy :{key:"name",dir:YAHOO.widget.DataTable.CLASS_ASC},
			dynamicData :true,
			initialRequest: "sort=name&dir=" + YAHOO.widget.DataTable.CLASS_ASC + "&startIndex=0&results=5&name="+encodeURI(searchName),
			generateRequest : requestBuilder
		};

		var myDataTable = new YAHOO.widget.DataTable("resultContainer",
				myColumnDefs, myDataSource, myConfigs);

		//动态更新总记录数
	    myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {   
	   		oPayload.totalRecords = oResponse.meta.totalRecords;   
	    	return oPayload;   
		}  

	}

这里是前后台传递的JSON数据的格式，在这个例子里只有returnObj是我们关心的，关于returnObj的组成见下面的代码。

public class JSONResult {
	public static final int RETCODE_OK = 0;
	public static final int RETCODE_ERR = -1;

	private int returnCode;
	private Object returnObj;
	private String errMessage;

	public JSONResult() {
		this.returnCode = RETCODE_OK;
	}

	public JSONResult(Object returnObj) {
		this.returnCode = RETCODE_OK;
		this.returnObj = returnObj;
	}

	public JSONResult(String errMessage) {
		this.returnCode = RETCODE_ERR;
		this.errMessage = errMessage;
	}

	public void setReturnCode(int returnCode) {
		this.returnCode = returnCode;
	}

	public int getReturnCode() {
		return returnCode;
	}

	public void setReturnObj(Object returnObj) {
		this.returnObj = returnObj;
	}

	public Object getReturnObj() {
		return returnObj;
	}

	public void setErrMessage(String errMessage) {
		this.errMessage = errMessage;
	}

	public String getErrMessage() {
		return errMessage;
	}
}

这里是前后台传递的JSON数据中的returnObj部分，上面代码中DataSource的responseSchema是根据它定义的：

public class PersonSearchList {
	private int totalRecords;
	private List<PersonVO> personList;

	public void setTotalRecords(int totoalRecords) {
		this.totalRecords = totoalRecords;
	}
	public int getTotalRecords() {
		return totalRecords;
	}
	public void setPersonList(List<PersonVO> personList) {
		this.personList = personList;
	}
	public List<PersonVO> getPersonList() {
		return personList;
	}
}

这里是后台的检索处理：

	public String search() {

		//获取request参数
		ActionContext context = ActionContext.getContext(); 
		Map parameters = context.getParameters();
		String[] paramName = (String[])parameters.get("name");
		String[] paramSort = (String[])parameters.get("sort");
		String[] paramDir = (String[])parameters.get("dir");
		String[] paramStartIdx = (String[])parameters.get("startIndex");
		String[] paramResults = (String[])parameters.get("results");

		JSONResult ret;
		try {
			PersonSearchList searchList = new PersonSearchList();

			int firstResult = Integer.parseInt(paramStartIdx[0]);
			int maxResult = Integer.parseInt(paramResults[0]);

			//检索总记录数
			int count = personService.countByName(paramName[0]);
			searchList.setTotalRecords(count);

			//检索当前页记录数
			List<PersonVO> personList = personService.getByName(paramName[0], paramSort[0], paramDir[0], firstResult, maxResult);
			searchList.setPersonList(personList);

			//生成返回前台的数据
			ret = new JSONResult(searchList);
		} catch (BusinessException e) {
			ret = new JSONResult(e.getMessage());
			logger.error(e.getMessage());
		}

		//将返回前台的数据转成JSON串
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.registerJsonValueProcessor(Date.class, new DateJsonValueProcessor());
		JSONObject jsonRet = JSONObject.fromObject(ret, jsonConfig);
		String strRet = jsonRet.toString();

		//输出JSON串
		try {
			setInputStream(new ByteArrayInputStream(strRet.getBytes("utf-8")));
		} catch (UnsupportedEncodingException e) {
			logger.error(e.getMessage(), e);
		}

		return SUCCESS;
	}

最后来一张UI图，只是个例子，不怎么好看

[img]/upload/attachment/71150/1acb289b-d8c4-3534-9314-660fc2f81bf5.jpg[/img]