这两天用了一下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例子》。
这里是画面【查询】按钮的处理函数,要多发一个姓名作为查询参数:
这里是前后台传递的JSON数据的格式,在这个例子里只有returnObj是我们关心的,关于returnObj的组成见下面的代码。
这里是前后台传递的JSON数据中的returnObj部分,上面代码中DataSource的responseSchema是根据它定义的:
这里是后台的检索处理:
最后来一张UI图,只是个例子,不怎么好看
简单地讲,主要有以下几点:
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;
- }
- }
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 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;
- }
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图,只是个例子,不怎么好看