程序博客网 > c语言中的表达式

YUI的DataTable翻页和排序实现

来源：互联网 发布：c语言中的表达式 编辑：程序博客网 时间：2024/06/08 03:44
这两天用了一下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例子》。

这里是画面【查询】按钮的处理函数，要多发一个姓名作为查询参数：
Js代码 复制代码 收藏代码
  1. function searchButton_click() { 
  2.  
  3.     var searchName = document.getElementById("name").value; 
  4.      
  5.     var convertSex =function(sData) { 
  6.         if (sData =='0') { 
  7.             return'女'; 
  8.         } else { 
  9.             return'男'; 
  10.         } 
  11.     }; 
  12.      
  13.     //定义DataSource 
  14.     //其中responseSchema中要定义一个总记录数（totalRecords）的数据项 
  15.     var myDataSource =new YAHOO.util.DataSource("SearchPersonAction.action?");  //注意action后的？ 
  16.     myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
  17.     myDataSource.responseSchema = { 
  18.         resultsList :"returnObj.personList", 
  19.         fields : [ "name", {key:"sex", parser:convertSex},"birthday","company","phone" ], 
  20.         metaFields: {totalRecords: "returnObj.totalRecords" }    
  21.     }; 
  22.  
  23.     //定义表格的列 
  24.     var myColumnDefs = [ { 
  25.         key :"name", 
  26.         label :"姓名", 
  27.         width :100, 
  28.         sortable :true 
  29.     }, { 
  30.         key :"sex", 
  31.         label :"性别", 
  32.         width :50, 
  33.         sortable :true 
  34.     }, { 
  35.         key :"birthday", 
  36.         label :"出生日期", 
  37.         width :100, 
  38.         sortable :true 
  39.     }, { 
  40.         key :"company", 
  41.         label :"单位", 
  42.         width :200, 
  43.         sortable :true 
  44.     }, { 
  45.         key :"phone", 
  46.         label :"电话", 
  47.         width :100, 
  48.         sortable :true 
  49.     } ]; 
  50.  
  51.     //自定义的request参数构造函数，增加了一个姓名的参数 
  52.     var requestBuilder =function(oState, oSelf) { 
  53.         var sort = oState.sortedBy.key;    
  54.         var dir = oState.sortedBy.dir;    
  55.         var startIndex = oState.pagination.recordOffset;    
  56.         var results = oState.pagination.rowsPerPage;    
  57.         var personName = searchName; 
  58.          
  59.         var reqStr ="sort=" + sort + 
  60.                 "&dir=" + dir + 
  61.                 "&startIndex=" + startIndex + 
  62.                 "&results=" + results + 
  63.                 "&name=" + encodeURI(personName); 
  64.  
  65.            return reqStr; 
  66.     }; 
  67.  
  68.     //配置DataTable 
  69.     //dynamicData指定为true，动态获取数据 
  70.     //指定generateRequest为我们自己的函数 
  71.     //由于initialRequest指定对姓名排序，所以sortedBy要配置成与其一致 
  72.     var myConfigs = { 
  73.         paginator :new YAHOO.widget.Paginator( { 
  74.             rowsPerPage :5, 
  75.             firstPageLinkLabel : "第一页",  
  76.             lastPageLinkLabel : "尾页",  
  77.             previousPageLinkLabel:"上一页", 
  78.             nextPageLinkLabel:"下一页" 
  79.         }), 
  80.         sortedBy :{key:"name",dir:YAHOO.widget.DataTable.CLASS_ASC}, 
  81.         dynamicData :true, 
  82.         initialRequest: "sort=name&dir=" + YAHOO.widget.DataTable.CLASS_ASC +"&startIndex=0&results=5&name="+encodeURI(searchName), 
  83.         generateRequest : requestBuilder 
  84.     }; 
  85.  
  86.     var myDataTable =new YAHOO.widget.DataTable("resultContainer", 
  87.             myColumnDefs, myDataSource, myConfigs); 
  88.      
  89.     //动态更新总记录数 
  90.     myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {    
  91.         oPayload.totalRecords = oResponse.meta.totalRecords;    
  92.         return oPayload;    
  93.     }   
  94.  
  95. } 


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

Java代码 复制代码 收藏代码
  1. publicclass JSONResult { 
  2.     publicstaticfinalint RETCODE_OK =0; 
  3.     publicstaticfinalint RETCODE_ERR = -1; 
  4.      
  5.     privateint returnCode; 
  6.     private Object returnObj; 
  7.     private String errMessage; 
  8.  
  9.     public JSONResult() { 
  10.         this.returnCode = RETCODE_OK; 
  11.     } 
  12.      
  13.     public JSONResult(Object returnObj) { 
  14.         this.returnCode = RETCODE_OK; 
  15.         this.returnObj = returnObj; 
  16.     } 
  17.      
  18.     public JSONResult(String errMessage) { 
  19.         this.returnCode = RETCODE_ERR; 
  20.         this.errMessage = errMessage; 
  21.     } 
  22.      
  23.     publicvoid setReturnCode(int returnCode) { 
  24.         this.returnCode = returnCode; 
  25.     } 
  26.  
  27.     publicint getReturnCode() { 
  28.         return returnCode; 
  29.     } 
  30.      
  31.     publicvoid setReturnObj(Object returnObj) { 
  32.         this.returnObj = returnObj; 
  33.     } 
  34.  
  35.     public Object getReturnObj() { 
  36.         return returnObj; 
  37.     } 
  38.  
  39.     publicvoid setErrMessage(String errMessage) { 
  40.         this.errMessage = errMessage; 
  41.     } 
  42.  
  43.     public String getErrMessage() { 
  44.         return errMessage; 
  45.     } 
  46. } 


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

Java代码 复制代码 收藏代码
  1. publicclass PersonSearchList { 
  2.     privateint totalRecords; 
  3.     private List<PersonVO> personList; 
  4.      
  5.     publicvoid setTotalRecords(int totoalRecords) { 
  6.         this.totalRecords = totoalRecords; 
  7.     } 
  8.     publicint getTotalRecords() { 
  9.         return totalRecords; 
  10.     } 
  11.     publicvoid setPersonList(List<PersonVO> personList) { 
  12.         this.personList = personList; 
  13.     } 
  14.     public List<PersonVO> getPersonList() { 
  15.         return personList; 
  16.     } 
  17. } 


这里是后台的检索处理：

Java代码 复制代码 收藏代码
  1. public String search() { 
  2.  
  3.     //获取request参数 
  4.     ActionContext context = ActionContext.getContext();  
  5.     Map parameters = context.getParameters(); 
  6.     String[] paramName = (String[])parameters.get("name"); 
  7.     String[] paramSort = (String[])parameters.get("sort"); 
  8.     String[] paramDir = (String[])parameters.get("dir"); 
  9.     String[] paramStartIdx = (String[])parameters.get("startIndex"); 
  10.     String[] paramResults = (String[])parameters.get("results"); 
  11.      
  12.     JSONResult ret; 
  13.     try { 
  14.         PersonSearchList searchList = new PersonSearchList(); 
  15.          
  16.         int firstResult = Integer.parseInt(paramStartIdx[0]); 
  17.         int maxResult = Integer.parseInt(paramResults[0]); 
  18.  
  19.         //检索总记录数 
  20.         int count = personService.countByName(paramName[0]); 
  21.         searchList.setTotalRecords(count); 
  22.          
  23.         //检索当前页记录数 
  24.         List<PersonVO> personList = personService.getByName(paramName[0], paramSort[0], paramDir[0], firstResult, maxResult); 
  25.         searchList.setPersonList(personList); 
  26.          
  27.         //生成返回前台的数据 
  28.         ret = new JSONResult(searchList); 
  29.     } catch (BusinessException e) { 
  30.         ret = new JSONResult(e.getMessage()); 
  31.         logger.error(e.getMessage()); 
  32.     } 
  33.  
  34.     //将返回前台的数据转成JSON串 
  35.     JsonConfig jsonConfig = new JsonConfig(); 
  36.     jsonConfig.registerJsonValueProcessor(Date.class,new DateJsonValueProcessor()); 
  37.     JSONObject jsonRet = JSONObject.fromObject(ret, jsonConfig); 
  38.     String strRet = jsonRet.toString(); 
  39.      
  40.     //输出JSON串 
  41.     try { 
  42.         setInputStream(new ByteArrayInputStream(strRet.getBytes("utf-8"))); 
  43.     } catch (UnsupportedEncodingException e) { 
  44.         logger.error(e.getMessage(), e); 
  45.     } 
  46.      
  47.     return SUCCESS; 
  48. } 


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


c语言中的表达式 c语言中的表达式
原创粉丝点击
热门IT博客
iphone6s看电影的软件iphone6s看电影的软件
端口辅助是什么意思端口辅助是什么意思
淘宝卖家三天不发货
pc制作mac os x启动盘
昆瑙·内亚的等级 知乎
外汇模拟交易软件
淘宝什么助手好
专业绘画软件手机
2017明星淘宝店铺
linux下samba配置
servo guide软件下载
网络暴力议论文
golang 连接mongodb
java之父 aws
域名出售平台哪个好
夏普lcd70tx8008a知乎
知有儿童挑促织怎么读
linux终端退出命令
知乎三国和战国
龙岗大运软件小镇
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 怀孕生气大哭动了胎气 动脉瘤夹闭术 肺动脉瓣轻度返流 肺动脉瓣返流怎么办 主动脉瓣轻度返流严重吗 主动脉瓣返流什么意思 主动脉瓣返流怎么回事 主动脉瓣返流是什么意思 肺动脉返流轻度返流 二三尖瓣肺动脉瓣轻度返流 肺动脉返流 轻度主动脉瓣返流 三尖瓣肺动脉瓣轻度返流 主动脉关闭不全体征 主动脉关闭不全 动脉瓣 肺动脉瓣反流 肺动脉瓣反流轻度 肺动脉瓣增厚 主动脉瓣反流能自愈吗 主动脉瓣重度关闭不全 心脏主动脉瓣关闭不全 主动脉瓣区 主动脉瓣关闭不全杂音 主动脉瓣轻度关闭不全 主动脉瓣关闭不全的体征 主动脉瓣疾病 主动脉瓣夹层 主动脉瓣狭窄饮食 椎动脉血管狭窄 下肢动脉狭窄 心脏动脉狭窄 心脏冠状动脉狭窄 先心病动脉导管未闭 脑动脉血管瘤 假性动脉瘤 颈动脉体瘤 动脉瘤的症状 动脉瘤症状 颈动脉瘤 脑动脉瘤早期症状

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里