实现的功能:用YUI的datatable实现从服务器端获取数据,在前台页面展示,并实现分页的功能
使用的开发工具:jdk6+myeclipse6.6+tomcat6+yui2.8+struts2+spring+json
所需要的jar包: 13个
commons-beanutils-1.7.0.jar
commons-collections-3.1.jar
commons-httpclient-3.0.jar
commons-lang-2.0.jar
commons-logging-1.1.jar
ezmorph-1.0.5.jar
freemarker-2.3.8.jar
json-lib-2.2.2-jdk15.jar
ognl-2.6.11.jar
spring.jar
struts2-core-2.0.11.1.jar
struts2-spring-plugin-2.0.14.jar
xwork-2.0.4.jar
我的个人联系方式是QQ 604320137 手机是1343917 2635 或 133 9175 8739,加我请注明是javaeye的yui。
具体步骤如下:
1、新建工程yuiapp,导入所需要的jar和配置好tomcat,并能正常启动。
2、在yuiapp/WebRoot新建appjs/yuijs/build,具体的路径是/yuiapp/WebRoot/appjs/yuijs/build,然后把yui的build下的所有文件放进来。
3、配置web的内容,如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<filter>
<filter-name>struts</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
4、配置src下新建struts.xml,具体的路径是/yuiapp/src/struts.xml,具体的内容是
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<include file="struts-default.xml"/>
<constant name="struts.objectFactory" value="spring" />
<package name="yuitab" namespace="/yuitab" extends="struts-default">
<action name="do_*" method="{1}" class="com.demo.action.YuiTabAction">
</action>
</package>
</struts>
5、配置applicationContext.xml,具体的路径是/yuiapp/WebRoot/WEB-INF/applicationContext.xml,具体的内容是
<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd">
</beans>
其实就是一个空文件
6、编写Action和Bean类
6.1 YuiTabAction.java
package com.demo.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("all")
public class YuiTabAction extends ActionSupport{
@Override
public String execute() {
System.out.println("............ execute() is called....");
return SUCCESS;
}
public void getBookList(){
System.out.println(" getBookList is called....startIndex="+startIndex);
List<Book> bookList = new ArrayList<Book>();
recordsReturned = 10;
for(int i=1; i<10; i++){
Book book = new Book();
book.setId(startIndex+i);
book.setAmount(startIndex+i+10);
book.setQuantity(startIndex+i+100);
book.setTitle("title("+startIndex+i+")");
bookList.add(book);
}
pageSize = 10;
totalRecords = 20;//假设总记录数是20条,
YUIPagination yuiPage = new YUIPagination();
yuiPage.setRecordsReturned(recordsReturned);
yuiPage.setTotalRecords(totalRecords);
yuiPage.setStartIndex(startIndex);
yuiPage.setPageSize(pageSize);
yuiPage.setSort("ASC");
yuiPage.setRecords(bookList);
this.outJson(yuiPage);
}
public HttpServletRequest getRequest() {
return ServletActionContext.getRequest();
}
public HttpServletResponse getResponse() {
return ServletActionContext.getResponse();
}
public void outJsonString(String str) {
getResponse().setContentType("text/javascript;charset=UTF-8");
outString(str);
}
public void outJson(Object obj) {
outJsonString(JSONObject.fromObject(obj).toString());
}
public void outJsonArray(Object array) {
outJsonString(JSONArray.fromObject(array).toString());
}
public void outString(String str) {
try {
PrintWriter out = getResponse().getWriter();
out.write(str);
} catch (IOException e) {
}
}
public void outXMLString(String xmlStr) {
getResponse().setContentType("application/xml;charset=UTF-8");
outString(xmlStr);
}
protected int recordsReturned;
protected int totalRecords;
protected int startIndex;
protected String sort;
protected String dir;
protected List records;
protected int pageSize;
//getter and setter
}
6.2 YUIPagination.java
package com.demo.action;
import java.util.List;
@SuppressWarnings("all")
public class YUIPagination {
private int recordsReturned;
private int totalRecords;
private int startIndex;
private String sort;
private String dir;
private List records;
private int pageSize;
//getter and setter
}
6.3 Book.java
package com.demo.action;
public class Book {
private Integer id;
private Integer quantity;
private Integer amount;
private String title;
//getter and setter
}
分享到:
相关推荐
在本教程中,我们将深入探讨如何使用Yahoo User Interface (YUI) 2.8 版本来实现一个从服务器端动态获取数据并具备分页功能的DataTable。YUI 是一个强大的JavaScript库,提供了丰富的组件和工具,用于创建交互式和...
综上所述,通过结合使用 JavaScript YUI 2.8 的 DataTable 和 jQuery form 插件,我们可以创建一个动态、交互式的表格,能够异步请求数据并实现分页功能。在实际项目中,还需要注意性能优化,比如使用服务器端分页...
使用YUI2.8 仿照JQuery UI 的select插件写的一个函数 详情见我的博客http://hi.baidu.com/hjzheng
这是对YUI拖拽例子的改编,大家可以去访问的博客 http://hi.baidu.com/hjzheng
DWR (Direct Web Remoting) 是一个开源的Java库,它允许JavaScript在浏览器端与...DWR提供了便捷的前后端通信机制,而YUI提供了强大的UI组件,两者结合使得开发者能够快速、高效地构建具有分页功能的动态Web应用。
6. **数据管理**:YUI Data模块提供了数据存储和操作的功能,例如数据模型、数据视图和数据绑定,为复杂的数据驱动应用提供了基础。 7. **布局管理**:YUI的Layout Manager模块可以帮助开发者创建响应式和自适应的...
http://hi.baidu.com/hjzheng
1. **数据管理**:YUI提供了一些用于处理和展示数据的插件,例如DataGrid,它可以将数据以表格形式呈现,支持排序、过滤和分页等功能。还有DataSource组件,可以方便地从服务器获取和管理数据。 2. **图表和可视化*...
1. **DataTable**:用于创建交互式表格,支持排序、分页、筛选等功能。 2. **Charts**:基于SVG或VML的图表库,可以生成各种统计图表,如柱状图、饼图、线图等。 3. **Uploader**:提供文件上传功能,支持多文件...
5. **数据表格**:YUI的DataTable组件可用于展示和操作大量数据,支持排序、过滤和分页等功能。 通过学习和实践这些示例,开发者可以深入了解YUI的功能和用法,提高自己的前端开发技能。 总结来说,YUI是一个强大...
5. **数据绑定**:YUI的数据绑定功能,让数据和视图之间的同步变得容易,减少了DOM操作,提高性能。 二、YUI的组件体系 1. **DOM操作**:YUI的Node和Selector模块提供了高效的DOM操作接口,包括选择、操作、遍历DOM...
在"YUI-ajax框架开发文档"中,我们可以深入探讨YUI如何通过其Ajax组件实现异步数据通信。 YUI中的Ajax框架主要由`YAHOO.util.Connect`和`YAHOO.widget.DataSource`两个关键部分组成。`YAHOO.util.Connect`是YUI的...
在“YUI3 中tree的两种实现”博文中,作者可能介绍了利用Gallery中的扩展来创建更复杂或具有特定功能的树。例如,可能使用了`treeview-dragdrop`模块,允许用户通过拖放操作重新排序或移动节点。 ```javascript var...
2. **YUI作为前端展示**:利用YUI的组件和API,可以创建丰富的用户界面,如使用YUI的DataTable展示从服务器获取的JSON数据,或者使用YUI的Form组件进行表单验证,并通过AJAX发送到Struts2 Action进行处理。...
YUI的DataSource和Model组件支持异步数据获取和数据模型的建立,可以方便地与服务器进行数据交互,并通过ModelList进行数据集合的管理。 6. **动画效果** Animation模块提供了丰富的动画效果,可以实现平滑的元素...
标题:“YUI+Ant 实现JS CSS压缩” 在Web开发中,为了提高页面加载速度和优化用户体验,开发者通常会使用代码压缩工具来减少JavaScript(JS)和CSS文件的大小。YUI Compressor是 Yahoo! 推出的一款开源的压缩工具,...
layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一、引入layUI的相关资源 <link rel=stylesheet href=${ctxPath}/vendor/layui/css/layui.css > [removed][removed] 二、html页面代码 ...
在提供的链接中,博主`ttwang`分享了关于如何实现这个功能的具体示例代码,你可以通过阅读博客文章获取更详细的步骤和代码实现。此外,了解和掌握`YUI3`的相关文档和API参考也非常重要,它们将帮助你更好地理解和...
6. **工具提示(Tooltips)**:YUI-EXT还提供了强大的工具提示功能,允许自定义内容、样式和行为,使用户能够获取更多关于界面上元素的信息。 7. **可扩展性(Extensibility)**:YUI-EXT的组件和类系统设计得非常...
通过“yui3-master.zip”,我们可以研究并理解这些动画是如何实现的。 6. **IO与Ajax** 在“io”模块中,YUI3提供了对异步数据请求的支持,如GET、POST等HTTP方法,这在构建Web应用时非常关键。开发者可以通过...