- 浏览: 183223 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
di1984HIT:
记录一下。嘿嘿
eclipse中关闭js报错的方法 -
di1984HIT:
谢谢,学习了
jdk输出带缩进格式xml的方法 -
雪狐狼:
为何,每次查询需要 构建datatable?
YUI DataTable 服务器端翻页与排序 -
lijunwyf41:
nd:"nd", // 表示已经发送请求的 ...
jqGrid <-- json --> spring,hibernate之服务器端分页,排序 -
yiyu:
最近不看YUI了,发现一个国产的前端框架,是金蝶出的,叫Ope ...
YUI 3 学习笔记(5)- Attribute类
这两天试用了一下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; } }
这里是前后台传递的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中的一个属性吗?
发表评论
-
log4j日志中输出sessionID的方法
2015-05-13 19:51 2361在web应用中,如果使用log4j做日志输出时,如果要输出s ... -
jdk输出带缩进格式xml的方法
2011-11-04 16:28 5411jdk自己带有xml处理的功能,好像是用的xerces和xal ... -
JasperReport与spring集成的三种方式
2011-08-10 14:38 16363最近要用JasperReport,试 ... -
jqGrid <-- json --> spring,hibernate之服务器端分页,排序
2011-06-07 16:22 7029最近做了一个以jqGrid实现的数据表格,与服务器端(spri ... -
在javax.servlet.Filter里设置Paramter
2011-02-17 16:04 1216今天碰到一个冷僻的需求,需要在Filter里增加request ... -
WebDav的java客户端开发包:Jackrabbit
2011-01-25 16:39 4687上一篇帖子“WebDav的java客户端开发包:sardine ... -
WebDav的java客户端开发包:sardine
2011-01-24 13:27 6354最近需要对WebDav服务器进行操作,查找了一下,基于java ... -
读取xml文件时不做validation的方法
2010-06-21 11:49 1609今天遇到一个问题,我使用dom4j读取一个xml文件的内容,该 ... -
jquery<--json-->spring(3.0)之DataTables的服务器端翻页
2010-05-15 10:45 5245本文是jquery<--json--> ... -
jquery<--json-->spring(3.0)之后台校验
2010-05-05 17:27 4098前一段试了一下前台用jquery(1.3.2),后台用spri ... -
jquery(1.3.2)<--json-->spring(3.0)
2010-04-23 14:09 3983发现spring 3已经对ajax支持的很好了,前端可以只使用 ... -
使用HTML Parser获取需要HTTP认证的页面的方法
2010-04-09 13:48 1266HTML Parser(http://htmlparser.s ... -
使用javamail通过需要身份验证的smtp服务器发送邮件
2010-04-09 11:51 1690使用javamail发送邮件时,如果smtp服务器需要身份验证 ... -
Hibernate tools使用简介
2009-10-15 11:33 1447简单描述在Eclipse Java EE版中使用Hiberna ... -
关于ProcessBuilder执行dir命令报错
2009-05-15 10:09 2095今天无事,试一下ProcessBuilder,没想到这么一段简 ... -
使用json-lib的JSONObject.toBean( )时碰到的日期属性转换的问题
2009-01-22 16:21 2842今天碰到这样一个问题: 当前台以JSON格式向后台传递数据的 ... -
YUI + struts2实现基于JSON通讯的AJAX例子
2009-01-08 10:35 2380近来做了个小例子,前端使用YUI,后端使用struts2+sp ... -
Tiles与YUI LayoutManager的结合
2009-01-04 10:16 1522最近在学习YUI,深感功能全面,正在试探是否可以作为页面部分的 ...
相关推荐
NULL 博文链接:https://zhengjj-2009.iteye.com/blog/666091
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
NULL 博文链接:https://pouyang.iteye.com/blog/581021
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
YUI3.7.3 服务器上最新的版本 快来下载 带API
yui3-master.zip
YUI2 库与例子都有了。很强大。 YUI2 库与例子都有了。很强大。
YUI Compressor 支持类库,用于服务器端压缩与混淆 JS、CSS
YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...
yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2
雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了
yui 源码下载,3.9.0 r2 包,最新版本
YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。 网上已有...
它也透过XMLHttpReqeust支援服务器端资料源。 按钮 让用户制作功能像传统HTML表单按钮般多样、图形化的按钮。 月历 图形式、动态的控制,用于日期选择。 容器 支援大量的DHTML视窗规范包括 提示框(Tooltip)、...
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行...YUI是个“学院派”的框架,以性能和严谨著称,易用性相对而言弱了一些。它能否在已经拉开的 JavaScript 框架大战中胜出,让我们拭目以待。
从YUI2到YUI3看前端的演变
YAHOO YUI 中文文档 AJAX 详细 比较好用
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com
利用Yahoo YUI库做的一个TREE实例,很详细的阐述了YUI的使用原理