eXtremeTable具体使用步骤

1.简介
eXtremeTable是目前流行的优秀分页组件之一,和 Displsytag,ValueList相比,即美观又使用。在介绍eXtremeTable以前先了解一下eXtremeComponents,它是一系列的开源的jsp自定义标签库,eXtremeTable是它中的一个功能强大而又容易配置、扩展、自定义的组件。它是以表格的形式来显示数据,具备分页组件应具备的大部分功能,好比:设定每页显示的记录数,排序等,除此以外它还具备过滤,导出,利用数据库的limit功能局部取数据,自定义列样式等等。eXtremeTable它不依赖任何框架和容器。
2.安装和测试
2.1 下载
eXtremeTable的最新版本为1.0.1,能够从它的官方网站http://www.extremecomponents.org下载最新版本,也能够从http://sourceforge.net/projects/extremecomp/下载.下载的压缩包为eXtremeComponents-1.0.1-with-dependencies.zip,解压后的主要目录以下所示:
(1)source:存放源文件
(2)lib:存放使用eXtremeTable一些功能所必需的jar包
(3)dist:使用eXtremeTable所必须的jar包和一些样式表,tld文件和js脚本文件。
(4)images:存放用表格显示数据时所用的图片。
(5)test:存放一个测试eXtremeTable的一个jsp文件。
2.2 安装
1.首先把必须的extremecomponents-1.0.1.jar放入WEB-INF/lib目录下,而后根据须要把解压包中lib目录下的jar文件拷贝到WEB-INF/lib目录下。尤为是minimum目录下的jar包也必须放入WEB-INF/lib目录下。
2.把css文件放到web应用的任意目录。
3.把images中的图片放到web应用的任意目录。
4.在/source/org/extremecomponents/table/core 目录中找到extremetable.properties文件,并把它复制到WEB-INF/classes里面(类加载器能够加载的地方)而后根据须要进行相应修改,固然也能够不使用该文件,可是使用的时候须要指定,后面的例子中就会说到。
2.3 测试该标签库
按照上面的步骤下载并安装后,咱们就能够运行一个eXtremeTable例子。首先新建一个web工程并搭建好环境,而后写一个jsp页面来测试一下,代码以下:(固然咱们也能够利用eXtremeTable压缩包中自带的例子test.jsp来测试,一样也能够看到效果)
 
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/styles/extremecomponents.css">
<%
    List countries = new ArrayList();
    for (int i = 1; i <= 10; i++)
    {
        Map cinfo = new java.util.HashMap();
        cinfo.put("cno", "coutry"+i);
        cinfo.put("cname", "国家"+i);
        cinfo.put("area", "所在州"+i);
        cinfo.put("born",new Date());
        countries.add(cinfo);
    }
    request.setAttribute("cinfos", countries);
%>
<ec:table
    items="cinfos"
    action="${pageContext.request.contextPath}/index.jsp"
    imagePath="${pageContext.request.contextPath}/images/table/*.gif"
    cellpadding="1"
    title="您好!这是eXtremeTable的一个测试例子">
<ec:row highlightRow="true">
<ec:column property="cno"/>
<ec:column property="cname"/>
<ec:column property="area"/>
<ec:column property="born" cell="date" format="yyyy-MM-dd"/>
</ec:row>
</ec:table>
把上面的工程部署到tomcat容器下,而后在浏览器地址栏里面输入:http://localhost:8080/pagination/index.jsp 浏览器显示的结果以下图所示:
 
图 2-1
3.eXtremeTable分页的原理
Extremecomponents默认从数据库中查找全部记录,若是结果集较大时,ec会使用Limit对象向Controller传递PageNo,PageSize,OrderBy等分页信息。而服务器端将向ec返回总记录数和当前页的内容。具体实现:
(1)从数据库获取数据并保存到Collection中
(2)将Collection保存在session或者request变量中
(3)在页面用TableTag设定什么被显示而且如何进行显示。默认的eXtremeTable在servlet范围(按照page,request, session,applicaton的顺序)寻找具备名称和items属性设置相同的Beans集合。表将遍历全部列,它使用var属性将当前行对应的bean从集合传到page范围,所以你能够从page范围中从新获得这些数据进行操做。
4. eXtremeTable的应用
4.1 分页功能
分页是web应用程序最多见的功能,也是一个web开发者必须掌握的技能之一,在目前的IT开发节奏下不须要本身从头写分页功能,而是应该集成一个功能完善的分页组件。下面咱们经过一个例子来看一下如何使用eXtremeTable的分页功能。
1. 首先构建一个web应用程序pagination,目录结构以下:

(1)itcast.cn.domain目录下存放的是employee.java,该程序是一个域对象与数据库中表employee相对应。
(2)itcast.cn.dao目录下存放的是EmployeeDao.java,该程序是一个接口负责定义操做数据库的CRUD方法。
(3)itcast.cn.dao.imp目录下存放的是接口EmployeeDao的实现类EmployeeDaoImp,该实现类负责从数据表employee中读取全部的记录。
(4)itcast.cn.dao.service目录下存放的是一个Servlet,负责把查询出来的结果集存放到request域中,并控制页面的跳转。
(5)images目录下存放显示页面所要用到的图片
(6)styles目录下存放的是css样式表
2. 把eXtremeComponents-1.0.1-with-dependencies.zip解压包中的dist目录和lib/minimum目录
   下的jar包拷贝到该应用程序的WEB-INF/lib目录下,把images目录下的图片拷贝到该应
   用程序下的images文件夹下面,把dist目录下的css样式表拷贝到该应用程序的styles目
   录下面。
3. 经过以上两步使用eXtremeComponents的环境基本上已经搭建好了,接下来就是具体的编
   码,为了减小篇幅,简单的代码就不给列出来了,相信你们都会写。
(1)模型组件employee代码以下:
例程4-1 employee.java
package itcast.cn.domain;
 
public class employee {
       private int emp_no;
       private String emp_name;
       private String emp_sex;
       private int dep_no;
       private String phone;
       public int getDep_no() {
              return dep_no;
       }
 
       public void setDep_no(int dep_no) {
              this.dep_no = dep_no;
       }
 
       public String getEmp_name() {
              return emp_name;
       }
 
       public void setEmp_name(String emp_name) {
              this.emp_name = emp_name;
       }
 
       public int getEmp_no() {
              return emp_no;
       }
 
       public void setEmp_no(int emp_no) {
              this.emp_no = emp_no;
       }
 
       public String getEmp_sex() {
              return emp_sex;
       }
 
       public void setEmp_sex(String emp_sex) {
              this.emp_sex = emp_sex;
       }
 
       public String getPhone() {
              return phone;
       }
 
       public void setPhone(String phone) {
              this.phone = phone;
       }
}
(2)context.xml,该文件负责建立数据源,存放到META-INF目录下,代码以下:
例程4-2 context.xml
<Context debug="5" reloadable="true" crossContext="true">
       <Resource name="jdbc/pagertest" auth="Container"
              type="javax.sql.DataSource" username="root" password="wang"
              driverClassName="com.mysql.jdbc.Driver"
              url="jdbc:mysql://localhost/pager?useUnicode=true&amp;characterEncoding=utf-8"
              maxActive="100" maxIdle="30" maxWait="10000" />
</Context>
 
(3)EmployeeDaoImp.java,代码以下:
例程4-3 EmployeeDaoImp.java
package itcast.cn.dao.imp;
 
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
 
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import itcast.cn.dao.EmployeeDao;
import itcast.cn.domain.employee;
 
public class EmployeeDaoImp implements EmployeeDao {
              public List getemployees() {
              Context initCtx = null;
              List list = new ArrayList();
              try {
           //初始化一个InitialContext对象
                     initCtx = new InitialContext();
           //利用JNDI的名称获得数据源对象
                     DataSource ds = (DataSource) initCtx
                                   .lookup("java:comp/env/jdbc/pagertest");
          /* JdbcTemplate是Spring中的一个类,是对JDBC的一种封装,抽象出咱们经常使用的方法。
          */
                     JdbcTemplate jdbctemplate = new JdbcTemplate(ds);
                     list = jdbctemplate.query("select * from employee",
                                   new RowMapper() {
             /*@ResultSet rs结果集,rnum当前行号*/
                                          public Object mapRow(ResultSet rs, int rnum)
                                                        throws SQLException {
                     //---------判断结果集的游标是否指向第一行以前
                                                 if (rnum < 0)
                                                        return null;
                                                 employee employee = new employee();
                                                 employee.setDep_no(rs.getInt(1));
                                                 employee.setEmp_name(rs.getString(2));
                                                 employee.setEmp_sex(rs.getString(3));
                                                 employee.setEmp_no(rs.getInt(4));
                                                 employee.setPhone(rs.getString(5));
                                                 return employee;
                                          }
                                   });
              } catch (Exception e) {
                     // TODO Auto-generated catch block
                     e.printStackTrace();
              }
              return list;
       }
}
(4)EmployeeServlet.java 代码以下:
例程4-4 EmployeeServlet.java
package itcast.cn.service;
 
import itcast.cn.dao.imp.EmployeeDaoImp;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class EmployeeServlet extends HttpServlet {
       public void doGet(HttpServletRequest request, HttpServletResponse response)
                     throws ServletException, IOException {
 
              EmployeeDaoImp edao = new EmployeeDaoImp();
              List employees = edao.getemployees();
      // 把得到的list集合存放到request域中
              request.setAttribute("employees", employees);
      // 请求转发到test.jsp页面
              request.getRequestDispatcher("/test.jsp").forward(request,response);
       }
 
       public void doPost(HttpServletRequest request, HttpServletResponse response)
                     throws ServletException, IOException {
           doGet(request,response);
       }
}
(5)test.jsp,利用eXtremeComponents的标签库把查询出来的结果集以表格的形式显示出来
例程4-5 test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!--引入extremecomponents 的标签库-->
<%@taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<!--引入extremecomponents 的样式表-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/styles/extremecomponents.css">
<ec:table
items="employees"
var="employee"
    action="${pageContext.request.contextPath}/servlet/EmployeeServlet"
    imagePath="${pageContext.request.contextPath}/images/table/*.gif"
    rowsDisplayed="5"
    width="700"
    title="员工信息">
<ec:row highlightRow="true">
<ec:column property="emp_no" alias="员工编号">
 ${employee.emp_no}
</ec:column>
<ec:column property="emp_name" alias="员工姓名"/>
<ec:column property="emp_sex" alias="性别"/>
<ec:column property="dep_no" alias="部门编号"/>
<ec:column property="phone" alias="联系电话"/>
</ec:row>
</ec:table>
说明:
(1)上面代码中的extremecomponents.css若是不引入仍然能够显示分页的效果,可是不会出现奇偶换行和高亮的效果。
 (2)<ec:table>显示表格,其中的items属性用来设值存放在request域中的集合对象的名称。var属性:eXtremeTable使用var属性将当前行对应的bean从集合传到page范围,所以你能够从page范围中从新获得这些数据进行操做。tableId用来惟一标识表,若是在JSP页面里包含两个或两个以上的表时须要设置它,该例子没有用到。action被用来告诉eXtremeTable当过滤或排序时如何回到当前的页面,本例中是经过EmployeeServlet来得到全部记录的集合。imagePath属性是用来显示图片的,以上这几个属性都是必须的。rowsDisplayed是用来设置每一页显示的记录条数,若是不指定的话会使用默认的。width和title属性分别用来指定表格的宽度和标题,是可选的。另外还有一个属性tableId用来惟一标识表,若是在JSP页面里包含两个或两个以上的表时须要设置它。
(3)<ec:row>表示一行,其中highlightRow表示是否显示高亮,若是属性值为true表示显示,不然不显示。<ec:column>表示列,property属性值对应前面定义的域对象employee中的属性,alials为列起一个别名。
4. 把整个pagination工程发部到tomcat的webapps下面,启动tomcat后在浏览器的地址栏中输入:http: //localhost:8080/pagination/servlet/EmployeeServlet,将会看到以下所示的显示效果:
图 4-1
点击上面的next图标,在浏览器中将会看到以下结果:
 
图 4-2
一样点击Last图标将会看到最后几条记录。
5. 从上面运行的结果可知每一页显示的是5条记录,你也能够从右上角的下拉列表框中选择其它的记录条数,假如你选择的是10将会看到以下的结果:
                                                                  图 4-3         
 
若是你想要修改下拉列表框中的值,只需在src的根目录下添加一个属性文件extremecomponents.properties(名字能够是任意的)并设置相应的属性,代码以下:
table.rowsDisplayed=8
table.medianRowsDisplayed=10
table.maxRowsDisplayed=12
而后在web.xml中指定,代码以下:
       <context-param>
              <param-name>extremecomponentsPreferencesLocation</param-name>
              <param-value>/extremecomponents.properties</param-value>
       </context-param>
固然也能够直接在extremetable.properties中修改,可是仍需在web.xml中指定。
【注】若是在属性文件和jsp页面同时设置了rowsDisplayed属性,会以jsp页面的为主。
注意:必定要合理的使用alias ,title和property属性,若是使用不当就会影响页面的显示效果,通常会遇到下列状况:
(1)若是是经过<ec:column property=" emp_name "/>来显示从数据库中查询出一列的值则" emp_name "必须是表映射的实体中定义的属性,若是采用如<ec:column property="user" >${employee. emp_name }</ec:column>这种形式时,property属性的值能够任意指定。固然也能够用alias取别名代替但不能够仅仅用title来代替。若是使用<ec:column title=" emp_name ">${employee. emp_name }</ec:column>就会抛出java.lang.NullPointerException。
(2)若是是使用<ec:column alias=" emp_name "/>则不能显示该列的数据,也就是说若是不使用EL表达式的形式来显示数据,那么就必须使用property属性且属性值必需是表映射的实体中定义的属性。
(3)若是三者同时使用优先级为title>alias>property,也就是说若是同时使用时以title设置的属性值为准,其次是alias,而后是property. 属性名相同时要制定alias。
4.2 排序功能
eXtremeTable除了具备分页功能以外还内嵌了过滤和排序功能,你只须要决定是否使用他们。接下来咱们就利用上面的例子来看一下它的排序功能。
1. 默认状况下全部列的sortable 的属性值都为true,咱们只需把前面例子中的test.jsp中的alias属性去掉,这时在浏览器地址栏中访问能够看到和上面同样的效果,而后点击任意列的名称能够看到一个三角符号,三角朝上表示是升序,朝下则表示是降序,例如点击部门编号这一列即可看到以下的结果:
图 4-4
可是注意:在排序时会遇到下列问题
(1)若是使用<ec:column alias="name">${employee. emp_name }</ec:column>时点击该列进行排序时就会在浏览器的状态栏下面出现一个警告的图标,从而致使不能正确的实现排序功能。
这时只需把alias的值改成”emp_name”(对应实体的属性)即可。
(2)使用<ec:column property="name">${ employee. emp_name }</ec:column>和使用<ec:column property="name" alias=" emp_name ">${ employee. emp_name }</ec:column> 同(1)同样,需把property的属性值设置为emp_name即可。这说明若是想使用eXtremeTable 的排序功能就必须设置property的属性值为对应的属性名,这也是前面为什么要去掉alias的缘由之一,查看源代码就会发现eXtremeTable 的排序是和property属性相关联的,另外eXtremeTable对中文不是很好的支持(这也是eXtremeTable的缺陷之一),若是把前面的alias的属性值改成英文则能够看到正常的效果。
2. 若是不想使用排序功能只需把标签<ec:table>中的sortable的属性值设置为false即可;若是仅仅想指定某一列不用排序,那么只需在<ec:column>中把sortable的属性值设置为false即可。
4.3 过滤功能
eXtremeTable的过滤功能就至关与一个条件查询,只显示知足条件的,过滤掉不知足条件的。默认状况下全部列都可过滤。
1. 使用过滤功能
紧接上面的例子。例如在test.jsp的页面中的Dep_no列上面的文本框中输入一个编号,而后点击右上角的filter,能够看到以下的结果:
图 4-6
你会发现并非咱们预期的结果,咱们本来只是想显示部门号为1的员工的信息。可见eXtremeTable在实现过滤时,相似SQL语言中的模糊查询。我认为这个过滤没有太大的意义。感兴趣的话能够本身查看源代码去扩展它的过滤功能使之更清晰,更人性化一点。点击clear图标就可清除过滤条件并显示最初的结果。
2. 不使用过滤功能
若是你不想使用eXtremeTable的过滤功能,只需在tabel标签中加入filterable="false" 即可。例如在<ec:column property=" emp_name "/>中设置filterable="false"则该列上面的文本框就会被隐藏,即不能输入过滤条件进行过滤。
4.4 导出功能
eXtremeTable默认支持xls,pdf,csv格式的文件,也可自定义导出格式。若是想使用eXtremeTable的导出功能导出excel文件,在前面例子的基础上还须要如下几步的操做:
(1)首先把压缩包中lib/xls目录下的jar包放入WEB-INF/lib目录下
(2)在web.xml中注册一个过滤器,代码以下:
 <filter>
              <filter-name>eXtremeExport</filter-name>
              <filter-class>
                     org.extremecomponents.table.filter.ExportFilter
              </filter-class>
 </filter>
 <filter-mapping>
              <filter-name>eXtremeExport</filter-name>
              <url-pattern>/*</url-pattern>
 </filter-mapping>
(3)在test.jsp中加入下面一行代码以下:
<ec:exportXls fileName="presidents.xls" tooltip="Export Excel"/>
(4)在浏览器的地址栏中从新访问http://localhost:8080/pagination/servlet/EmployeeServlet,能够看到以下结果:
图 4-8
页面上多了一个Expert XLS图标,点击右上角的导出图标能够弹出以下所示的窗口:
而后点击保存按钮即可以把全部记录导入到employees.xls文件中。一样若是想导出pdf格式
的文件只需使用<ec:exportPdf/>即可。
注意:前面已经提到过alias,title和property三者之间的关系,若是使用不当导出的文件内容也会出现问题。例如若是使用<ec:column alias=” emp_name”>${employee. emp_name }</ec:column>或者<ec:column property=”name”>${ employee.emp_name }
</ec:column>导出的excel文件内容以下:
能够看到员工姓名这一列没有内容,查看源代码就会发现只需改成<ec:column property=”emp_name”/>即可。
4.5 容许和不容许视图
默认状况下只要在标签<ec:column>中指定了正确的属性该列就会导出到指定的视图中。可是在实际的应用中可能只需导出其中的某些列,这时就须要设置viewsDenied或viewsAllowed的属性值来制定类容许和不容许使用的视图(html、pdf、xls、csv,以及任何定制的视图)。固然也能够经过控制后台程序来实现。
(1)不容许视图
例如:
导出的excel文件中没有必要含有性别这一列的内容,也即不容许excel导出时,只需设置viewsDenied即可。以下:
<ec:column alias=” emp_sex” viewsDenied=” xls”>
一样对于其它格式的文件(html、pdf、xls、csv,等)也是相似的操做,若是指定多个视图则该列不能应用于指定的视图。
(2)容许视图
指定列容许使用的视图只需设置属性viewsAllowed即可。viewsAllowed与viewsDenied正好相反,可是能够获得一样的效果。
5. eXtremeTable的扩展
5.1扩展属性
大多数标签包含一系列的固定属性,这样那些已经实现的功能可以被使用。然而,eXtremeTable具备一种更具弹性的架构,能够添加本身的标签属性实现更多的定制工做。此外,eXtremeTable提供了很是清晰的钩子(hooks)容许你获得那些定制的标签属性来作一些你须要的工做。
1.扩展TableTag
扩展TableTag,只需覆盖addExtendedAttributes()方法,而后添加本身的属性到表对象中。
一个定制的TreeTag示例以下:
public class TreeTag extends TableTag {
    private String parentAttribute;
    private String identifier;
    public void setParentAttribute(String parentAttribute) {
        this.parentAttribute = parentAttribute;
    }
    public void setIdentifier(String identifier) {
        this.identifier = identifier;
    }
    public void addExtendedAttributes(Table table) {
        table.addAttribute(TableConstants.PARENT_ATTRIBUTE, TagUtils.evaluateExpressionAsString("parentAttribute",parentAttribute, this,pageContext));
        table.addAttribute(TableConstants.IDENTIFIER, TagUtils.evaluateExpressionAsString("identifier",
                identifier, this, pageContext));
        table.setFilterRowsCallback("org.extremecomponents.tree.ProcessTreeRowsCallback");
        table.setSortRowsCallback("org.extremecomponents.tree.ProcessTreeRowsCallback");
    }
}
另外,你也能够定制本身的标签和本身的TLD文件。不须要修改extremecomponents.tld文件,就能像使用eXtremeTable里的标签同样使用本身的标签。假如标签参照为mycompany 而且标签为customTable,就能够像下面同样使用他们:
<mycompany:customTable
    items="presidents"
    action="${pageContext.request.contextPath}/public/demo/presidents.jsp"
    title="Presidents"
    >
 <ec:row>
    <ec:column property="nickName"/>
 </ec:row>
</mycompany:customTable>
2.扩展ColumnTag
你须要作的就是覆盖addExtendedAttributes()方法,而后添加本身的属性到列对象中。
一个定制的CustomTag示例以下:
public class MyCustomTag extends ColumnTag {
 private String customAttributeOne;
 public String getCustomAttributeOne() {
    return customAttributeOne;
 }
 public void setCustomAttributeOne(String customAttributeOne) {
    this.customAttributeOne = customAttributeOne;
 }
 public void addExtendedAttributes(Column column) {
    column.addAttribute("customAttributeOne", customAttributeOne);
 }
}
添加了属性值到Column对象,如今能够像下例同样来定制cell:
public class MyCustomCell implements Cell {
 public String getHtmlDisplay(TableModel model, Column column) {
    Object customAttributeOne = column.getAttribute("customAttributeOne")
    String customAttributeOne = column.getAttributeAsString("customAttributeOne")
 }
}
另外,也能够定制本身的标签和本身的TLD文件。你不须要修改extremecomponents.tld文件,能像使用eXtremeTable里的标签同样使用本身的标签,除了使用本身标签的参照。假如你的标签参照为mycompany 而且标签为customColumn,能够像下面同样使用他们:
<ec:table
    items="presidents"
    action="${pageContext.request.contextPath}/public/demo/presidents.jsp"
    title="Presidents"
    >
 <ec:row>
    <mycompany:customColumn
               property="hello"
               cell="com.mycompany.cell.MyCustomCell"
               customAttributeOne="Hello World"/>
 </ec:row>
</ec:table>
3.扩展RowTag
扩展RowTag和上面同样也是覆盖addExtendedAttributes()方法,只是传入的参数需改成Row对象。
5.2 自定义html视图
eXtremeTable使用View接口来生成HTML。你可使用发行包已经提供的视图,或者你能够插入本身的视图实现。若是要定义本身的视图只需实现View接口,扩展AbstractHtmlView类即可。
一个改变eXtremeTable工具条的实例:(定义两个类)
1.Mytoolbar.java
public class MyToolbar extends TwoColumnTableLayout {
        public MyToolbar(HtmlBuilder html, TableModel model) {
               super(html, model);
           }
           protected boolean showLayout(TableModel model) {
               boolean showPagination = BuilderUtils.showPagination(model);
               boolean showExports = BuilderUtils.showExports(model);
               boolean showTitle = BuilderUtils.showTitle(model);
               if (!showPagination && !showExports && !showTitle) {
                   return false;
               }
               return true;
           }
          protected void columnLeft(HtmlBuilder html, TableModel model) {
               html.td(2).close();
               new TableBuilder(html, model).title();
               html.tdEnd();
           }
           protected void columnRight(HtmlBuilder html, TableModel model) {
               boolean showPagination = BuilderUtils.showPagination(model);
               boolean showExports = BuilderUtils.showExports(model);
               ToolbarBuilder toolbarBuilder = new ToolbarBuilder(html, model);
               html.td(2).align("right").close();
                             html.table(2).border("0").cellPadding("0").cellSpacing("1").styleClass(BuilderConstants.TOOLBAR_CSS).close();
               html.tr(3).close();
               if (showPagination) {
                   html.td(4).close();
                   toolbarBuilder.firstPageItemAsImage();
                   html.tdEnd();
                   html.td(4).close();
                   toolbarBuilder.prevPageItemAsImage();
                   html.tdEnd();
                   html.td(4).close();
                   toolbarBuilder.nextPageItemAsImage();
                   html.tdEnd();
                   html.td(4).close();
                   toolbarBuilder.lastPageItemAsImage();
                   html.tdEnd();
                   html.td(4).close();
                   toolbarBuilder.separator();
                   html.tdEnd();
                   html.td(4).close();
             //在工具条里面添加一个文本框以便手动的控制页面显示的行数
                   /* StringBuffer action = new StringBuffer("javascript:");
                   TableActions ta = new TableActions(model);
                   int currentRowsDisplayed = model.getLimit().getCurrentRowsDisplayed();
                         html.input("text").name(model.getTableHandler().prefixWithTableId() + TableConstants.ROWS_DISPLAYED).value(String.valueOf(currentRowsDisplayed);
                   action.append(ta.getClearedExportTableIdParameters());
                   String form = BuilderUtils.getForm(model);
                   action.append("document.forms.").append(form).append(".");
                               action.append(model.getTableHandler().prefixWithTableId()).append(TableConstants.CURRENT_ROWS_DISPLAYED);
                   action.append(".value=").append("this.value").append(";");
                   action.append(ta.getFormParameter(TableConstants.PAGE, "1"));
                   action.append("if(event.keyCode==13){");
                   action.append(ta.getOnInvokeAction());
                   action.append("}");
                   html.onkeypress(action.toString());
                   html.xclose();
                   html.tdEnd();*/
                  
                   html.td(4).style("width:10px").close();
                   html.newline();
                   html.tabs(4);
                   toolbarBuilder.rowsDisplayedDroplist();
                   html.img();
 html.src(BuilderUtils.getImage(model, BuilderConstants.TOOLBAR_ROWS_DISPLAYED_IMAGE));
                  html.style("border:0");
                   html.alt("Rows Displayed");
                   html.xclose();
                   html.tdEnd();
                   if (showExports) {
                       html.td(4).close();
                       toolbarBuilder.separator();
                       html.tdEnd();
                   }
               }
               if (showExports) {
                   Iterator iterator = model.getExportHandler().getExports().iterator();
                   for (Iterator iter = iterator; iter.hasNext();) {
                       html.td(4).close();
                       Export export = (Export) iter.next();
                       toolbarBuilder.exportItemAsImage(export);
                       html.tdEnd();
                   }
               }
               html.trEnd(3);
               html.tableEnd(2);
               html.newline();
               html.tabs(2);
               html.tdEnd();
           }
}
2.MyView.java
public class MyView extends AbstractHtmlView {
        protected void beforeBodyInternal(TableModel model) {
               getTableBuilder().tableStart();
               getTableBuilder().theadStart();
               getTableBuilder().filterRow();
               getTableBuilder().headerRow();
               getTableBuilder().theadEnd();
               getTableBuilder().tbodyStart();
           }
           protected void afterBodyInternal(TableModel model) {
               getCalcBuilder().defaultCalcLayout();
               getTableBuilder().tbodyEnd();
               getTableBuilder().tableEnd();
               toolbar(getHtmlBuilder(), getTableModel());
               statusBar(getHtmlBuilder(), getTableModel());
           }
           protected void toolbar(HtmlBuilder html, TableModel model) {
               new MyToolbar(html, model).layout();
           }
           protected void statusBar(HtmlBuilder html, TableModel model) {
               new DefaultStatusBar(html, model).layout();
           }
}
而后在<ec:table>中添加一个属性view=”MyView的完整类名”,运行效果以下:
5.3 为表格添加操做
在实际应用,特别是在一些管理系统中前台页面每每查看信息与编辑、删除都放在一块儿。对于eXtremeTable达到这样的效果只需在jsp文件中(自定义一列)以下:
<ec:column alias="操做" filterable="false" sortable="false" >
<a href="${pageContext.request.contextPath}/servlet/EmployeeServlet?param=edit&id=${employee.id}">编辑</a>
<!--使用图片的好处就是能够避免国际化的问题-->
<a onclick="confirm('真的删除');" ><img border="0" src ="${pageContext.request.contextPath}/images/delete.jpg"></a>
</ec:column>
具体功能的实现就须要咱们本身去编写href指定的类去处理,能够看到以下的结果:
6. 使用Limit
默认的状况下eXtremeTable取得全部的结果集而后处理Beans集合,咱们只须要组装Beans集合并让eXtremeTable知道如何引用它,这样的好处是能够随意进行排序、过滤和分页操做。对于小到中等数据量的结果集很是有效,当结果集很大时这将很是糟糕。因此须要咱们本身手动来处理分页,这意味着一次只想取得一页显示须要的结果集。同时,须要本身处理排序、过滤和分页。这时应该考虑使用eXtremeTable的Limit特性。
具体使用能够参考Limit指南:http://extremecomponents.org/wiki/index.php/Simplified_Chinese_Reference/Simplified_Chinese_Reference_Limit.htm和
http://extremecomponents.org/wiki/index.php/Simplified_Chinese_Reference/ Simplified_Chinese_Tutorials_Limit.htmjavascript

相关文章
相关标签/搜索