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图，只是个例子，不怎么好看

评论

5 楼 雪狐狼 2015-04-07  

为何，每次查询需要 构建datatable?

4 楼 jkfzero 2009-08-11  

ls的杀毒软件是用的瑞星之类的么？换成诺顿试试。

3 楼 takezo 2009-04-21  

楼主试过YUI Datatable的row selection吗？我在IE7和IE8下都出了问题，不能选中行，也没有鼠标hover时的高亮效果，IE6和其他所有浏览器都可以正常选择。这几天都崩溃中。

2 楼 yiyu 2009-03-18  

inputStream是一个属性，setInputStream是这个属性的setter函数

1 楼 tommas2006 2009-03-10  

能附上你完整的例子吗？ 那个setInputStream 是在Action中的一个属性吗？