`
zhengjj_2009
  • 浏览: 153608 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

YUI2.8 实现datatable从server端动态获取数据,并实现分页功能(上)

阅读更多

实现的功能:用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

}

 

 

分享到:
评论

相关推荐

    YUI2.8 实现datatable从server端动态获取数据,并实现分页功能(下)

    在本教程中,我们将深入探讨如何使用Yahoo User Interface (YUI) 2.8 版本来实现一个从服务器端动态获取数据并具备分页功能的DataTable。YUI 是一个强大的JavaScript库,提供了丰富的组件和工具,用于创建交互式和...

    JavaScript YUI 2.8: DataTable jquery form 异步请求显示数据分页

    综上所述,通过结合使用 JavaScript YUI 2.8 的 DataTable 和 jQuery form 插件,我们可以创建一个动态、交互式的表格,能够异步请求数据并实现分页功能。在实际项目中,还需要注意性能优化,比如使用服务器端分页...

    使用YUI2.8 实现多选 ,支持Ctrl 和Shift

    使用YUI2.8 仿照JQuery UI 的select插件写的一个函数 详情见我的博客http://hi.baidu.com/hjzheng

    使用YUI2.8 实现多个LI拖拽

    这是对YUI拖拽例子的改编,大家可以去访问的博客 http://hi.baidu.com/hjzheng

    dwr-yui实现分页

    DWR (Direct Web Remoting) 是一个开源的Java库,它允许JavaScript在浏览器端与...DWR提供了便捷的前后端通信机制,而YUI提供了强大的UI组件,两者结合使得开发者能够快速、高效地构建具有分页功能的动态Web应用。

    YUI2.8.1包括demo api是学习的好东西

    6. **数据管理**:YUI Data模块提供了数据存储和操作的功能,例如数据模型、数据视图和数据绑定,为复杂的数据驱动应用提供了基础。 7. **布局管理**:YUI的Layout Manager模块可以帮助开发者创建响应式和自适应的...

    YUI2 Tabview分页

    http://hi.baidu.com/hjzheng

    Yahoo YUI 插件库

    1. **数据管理**:YUI提供了一些用于处理和展示数据的插件,例如DataGrid,它可以将数据以表格形式呈现,支持排序、过滤和分页等功能。还有DataSource组件,可以方便地从服务器获取和管理数据。 2. **图表和可视化*...

    yui_3.8.1.zip

    1. **DataTable**:用于创建交互式表格,支持排序、分页、筛选等功能。 2. **Charts**:基于SVG或VML的图表库,可以生成各种统计图表,如柱状图、饼图、线图等。 3. **Uploader**:提供文件上传功能,支持多文件...

    YUI.rar_html_javascript YUI_yui_yui javascript

    5. **数据表格**:YUI的DataTable组件可用于展示和操作大量数据,支持排序、过滤和分页等功能。 通过学习和实践这些示例,开发者可以深入了解YUI的功能和用法,提高自己的前端开发技能。 总结来说,YUI是一个强大...

    yui 资源包

    5. **数据绑定**:YUI的数据绑定功能,让数据和视图之间的同步变得容易,减少了DOM操作,提高性能。 二、YUI的组件体系 1. **DOM操作**:YUI的Node和Selector模块提供了高效的DOM操作接口,包括选择、操作、遍历DOM...

    YUI-ajax框架开发文档

    在"YUI-ajax框架开发文档"中,我们可以深入探讨YUI如何通过其Ajax组件实现异步数据通信。 YUI中的Ajax框架主要由`YAHOO.util.Connect`和`YAHOO.widget.DataSource`两个关键部分组成。`YAHOO.util.Connect`是YUI的...

    YUI3 中tree的两种实现

    在“YUI3 中tree的两种实现”博文中,作者可能介绍了利用Gallery中的扩展来创建更复杂或具有特定功能的树。例如,可能使用了`treeview-dragdrop`模块,允许用户通过拖放操作重新排序或移动节点。 ```javascript var...

    Struts2+JSON+YUI组合应用之二构建RichClient

    2. **YUI作为前端展示**:利用YUI的组件和API,可以创建丰富的用户界面,如使用YUI的DataTable展示从服务器获取的JSON数据,或者使用YUI的Form组件进行表单验证,并通过AJAX发送到Struts2 Action进行处理。...

    针对YUI框架API

    YUI的DataSource和Model组件支持异步数据获取和数据模型的建立,可以方便地与服务器进行数据交互,并通过ModelList进行数据集合的管理。 6. **动画效果** Animation模块提供了丰富的动画效果,可以实现平滑的元素...

    YUI+Ant 实现JS CSS压缩

    标题:“YUI+Ant 实现JS CSS压缩” 在Web开发中,为了提高页面加载速度和优化用户体验,开发者通常会使用代码压缩工具来减少JavaScript(JS)和CSS文件的大小。YUI Compressor是 Yahoo! 推出的一款开源的压缩工具,...

    layui实现数据表格table分页功能(ajax异步)

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一、引入layUI的相关资源 &lt;link rel=stylesheet href=${ctxPath}/vendor/layui/css/layui.css &gt; [removed][removed] 二、html页面代码 ...

    YUI3 实现overlay展开是tree,并且树节点可以拖拽-drag和drop

    在提供的链接中,博主`ttwang`分享了关于如何实现这个功能的具体示例代码,你可以通过阅读博客文章获取更详细的步骤和代码实现。此外,了解和掌握`YUI3`的相关文档和API参考也非常重要,它们将帮助你更好地理解和...

    YUI-EXT使用详解

    6. **工具提示(Tooltips)**:YUI-EXT还提供了强大的工具提示功能,允许自定义内容、样式和行为,使用户能够获取更多关于界面上元素的信息。 7. **可扩展性(Extensibility)**:YUI-EXT的组件和类系统设计得非常...

    yui3-master.zip

    通过“yui3-master.zip”,我们可以研究并理解这些动画是如何实现的。 6. **IO与Ajax** 在“io”模块中,YUI3提供了对异步数据请求的支持,如GET、POST等HTTP方法,这在构建Web应用时非常关键。开发者可以通过...

Global site tag (gtag.js) - Google Analytics