手把手教你做一个自定义表格标签

原帖子： http://cuisuqiang.iteye.com/blog/1582942

手把手教你做一个自定义表格标签

• 博客分类：
• J2EE
• 开发软件

表格 自定义标签 grid 分页 table

如果你用公司的平台进行开发的话，许多时候向按钮，输入框，树，菜单等都是直接用一个标签设置几个属性就可以了。全局上样式是统一的，而且容易维护。

之前我已经发使用自定义标签来做数据字典的示例，也就是说自定义标签并不是你想的那么难，今天就再来作一个自定标标签实现的表格控件。当然你别较真，麻雀虽小五脏俱全的，你懂就行了。

我先来简单介绍一下：

效果如下图

这个控件包含了列表显示，选择框，隔行染色，分页，排序一些基本功能！

原来很简单，后台查询List数据，进行JSON格式转换为JSON字符串，前台使用JS进行表格生成。

List转字符串我们直接使用json-lib即可，很简单的使用。

前台我采用 tableView ，网址是 http://www.ideawu.net/person/tableview/v1.1/

然后采用自定义标签将两者融合展示

首先来看一下标签的定义：

Xml代码

1. <?xml version="1.0" encoding="UTF-8"?> 
2. <!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"   
3.     "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd"> 
4. <!--  
5. 自定义标签 
6. 崔素强 
7. V 1.0 
8. --> 
9. <taglib> 
10.     <tlib-version>1.0</tlib-version> 
11.     <jsp-version>1.2</jsp-version> 
12.     <short-name>html</short-name> 
13.     <tag>      
14.         <name>grid</name> 
15.         <tag-class>com.cui.GridTable_Tag</tag-class> 
16.         <body-content>JSP</body-content> 
17.         <attribute> 
18.             <name>colunmName</name><!-- 列名称，以 , 分割。第一列必须为主键列，该列不显示，但是在返回选择的列时返回主键值 --> 
19.             <rtexprvalue>true</rtexprvalue> 
20.         </attribute> 
21.         <attribute> 
22.             <name>colunmShow</name><!-- 列显示的文字，以 , 分割 --> 
23.             <rtexprvalue>true</rtexprvalue> 
24.         </attribute> 
25.         <attribute> 
26.             <name>isPager</name><!-- 是否显示分页 --> 
27.             <rtexprvalue>true</rtexprvalue> 
28.         </attribute> 
29.         <attribute> 
30.             <name>isTablePager</name><!-- 是否显示分页 --> 
31.             <rtexprvalue>true</rtexprvalue> 
32.         </attribute> 
33.         <attribute> 
34.             <name>isShowCheck</name> 
35.             <rtexprvalue>true</rtexprvalue> 
36.         </attribute> 
37.         <attribute> 
38.             <name>showAllColunm</name> 
39.             <rtexprvalue>true</rtexprvalue> 
40.         </attribute> 
41.     </tag> 
42. </taglib> 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"  
	"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<!-- 
自定义标签
崔素强
V 1.0
-->
<taglib>
	<tlib-version>1.0</tlib-version>
	<jsp-version>1.2</jsp-version>
	<short-name>html</short-name>
	<tag>		
		<name>grid</name>
		<tag-class>com.cui.GridTable_Tag</tag-class>
		<body-content>JSP</body-content>
		<attribute>
			<name>colunmName</name><!-- 列名称，以 , 分割。第一列必须为主键列，该列不显示，但是在返回选择的列时返回主键值 -->
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>colunmShow</name><!-- 列显示的文字，以 , 分割 -->
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>isPager</name><!-- 是否显示分页 -->
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>isTablePager</name><!-- 是否显示分页 -->
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>isShowCheck</name>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>showAllColunm</name>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>
</taglib>

介绍一下属性：

colunmName：要显示列的名称，因为有的人查询是查询了对象所有的属性出来，所以这里我们指定要显示那写列

colunmShow：显示列的列名，这个是在页面看的，比如你列是name，那么显示到页面的列应该是 名字

isPager：是否分页，其实分页控件也就是做一个显示，如果你不用分页设置为false就不会显示分页内容了

isTablePager：这个和上面的分页是分开的不能并行的，这个就是在不进行分页时，页面进行分页的意思。比如说你要显示100条数据，不进行分页查询，那么一次性返回到页面100条数据，你又要分页显示，就可以设置这个属性

isShowCheck：这个是控制是否显示多选框

showAllColunm：因为我们不可能把主键也显示出去的，但是当我们操作一条数据时又必须得到主键，所以我对tableView进行了修改，不显示主键列，当然是默认不显示，如果你设置了这个属性为true，那么会显示主键列

后代的标签代码我们来看一下，主要是通过标签属性获得要展示的数据内容，然后拼装动态JS内容块

Java代码

1. import javax.servlet.http.HttpServletRequest; 
2. import javax.servlet.jsp.JspException; 
3. import javax.servlet.jsp.PageContext; 
4. import javax.servlet.jsp.tagext.BodyTagSupport; 
5. /**
6. * @说明 用于显示表格
7. * @author cuisuqiang
8. * @version 1.0
9. * @since
10. */ 
11. @SuppressWarnings("serial") 
12. public class GridTable_Tag  extends BodyTagSupport{  
13.     private HttpServletRequest request ;     
14.     @Override 
15.     public void setPageContext(PageContext pageContext) { 
16.         request = (HttpServletRequest)pageContext.getRequest(); 
17.         super.setPageContext(pageContext); 
18.     } 
19.     @Override 
20.     public int doEndTag() throws JspException { 
21.         return EVAL_PAGE; 
22.     } 
23.     @Override 
24.     public int doStartTag() throws JspException { 
25.         String path = request.getContextPath(); 
26.         String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
27.         try { 
28.             StringBuffer results = new StringBuffer("");             
29.             // 引入文件 
30.             results.append("<link rel='stylesheet' type='text/css' href='" + basePath + "js/style.css' />"); 
31.             results.append("<script type='text/javascript' src='" + basePath + "js/jquery.js'></script>"); 
32.             results.append("<script type='text/javascript' src='" + basePath + "js/TableView.js'></script>"); 
33.             results.append("<script type='text/javascript' src='" + basePath + "js/PagerView.js'></script>"); 
34.             results.append("<script type='text/javascript' src='" + basePath + "js/SortView.js'></script>"); 
35.             results.append("<script type='text/javascript' src='" + basePath + "js/commonAttribute.js'></script>"); 
36.             String[] cn = colunmName.split(","); 
37.             String[] cs = colunmShow.split(",");             
38.             // 开始绘制表格 
39.             results.append("<script type='text/javascript'>"); 
40.             results.append("document.getElementById('table_div').className='tableShow';"); 
41.             results.append("var index=1;"); 
42.             results.append("var table = new TableView('table_div');"); 
43.             results.append("table.header={"); 
44.             results.append("index:'序号',"); 
45.             for(int i=0;i<cn.length;i++){ 
46.                 results.append(cn[i] + ":'" + cs[i] + "',"); 
47.             } 
48.             results.delete(results.length() - 1, results.length()); 
49.             results.append("};"); 
50.             results.append("table.dataKey='" + cn[0] + "';"); 
51.             String date = ""; 
52.             date = null == request.getAttribute("currentJsonDate") ? "" : (String)request.getAttribute("currentJsonDate"); 
53.             if(null != date && !"".equals(date)) 
54.                 date = date.replace("\\", "/"); // 部分数据可能会引起JS解析错误 
55.             results.append("var json='" + date + "';"); 
56.             results.append("var objs=eval(json);"); // EVAL函数的使用 
57.             results.append("if(null!=objs){"); 
58.             results.append("for(var i=0;i<objs.length;i++){"); 
59.             results.append("var u = objs[i];"); 
60.             results.append("table.add({"); 
61.             results.append("index:index++,"); 
62.             for(int i=0;i<cn.length;i++){ 
63.                 if(i==0){ 
64.                     results.append(cn[i] + ":u." + cn[i] + ","); 
65.                 }else{ 
66.                     results.append(cn[i] + ":(u." + cn[i] + " + '').substr(0, 20),"); // 这里做了数据截取 
67.                 } 
68.             } 
69.             results.delete(results.length() - 1, results.length()); 
70.             results.append("});"); 
71.             results.append("}"); 
72.             results.append("}"); 
73.             results.append("table.display.sort=true;"); 
74.             // 是否显示所有列 
75.             if(null != showAllColunm && "true".equals(showAllColunm)){ 
76.                 results.append("table.display.showAllColunm=true;"); 
77.             } 
78.             // 是否显示多选框列 
79.             if(null != isShowCheck && "false"==isShowCheck){ 
80.                 results.append("table.display.multiple=false;"); 
81.                 results.append("table.display.marker=false;"); 
82.             }            
83.             // 必须显示的进行表格分页，且页面分页不能同时进行 
84.             if("true".equals(isTablePager) && (null == isPager || "false".equals(isPager))){ 
85.                 results.append("table.display.pager=true;"); 
86.                 results.append("table.pager.size=pageSize;"); // 分页页数是JS文件里面定义的 
87.             }else{ 
88.                 results.append("table.display.pager=false;"); 
89.             }            
90.             results.append("table.render();");           
91.             // 开始显示分页，表格自动分页和显示分页标签不能一同进行 
92.             if(!"false".equals(isPager) && (null == isTablePager || "false".equals(isTablePager))){ 
93.                 results.append("var pager=new PagerView('pager_div');");                 
94.                 results.append("pager.itemCount=" + (null != request.getAttribute("currentPageCount") ? request.getAttribute("currentPageCount").toString() : "0") + ";"); 
95.                 results.append("pager.size=" + (null != request.getAttribute("currentPageSize") ? request.getAttribute("currentPageSize").toString() : "10") + ";"); 
96.                 results.append("pager.index=" + (null != request.getAttribute("currentPageIndex") ? request.getAttribute("currentPageIndex").toString() : "0") + ";"); 
97.                 results.append("pager.render();"); 
98.             } 
99.             // 增加Ajax数据变换时的JS方法 
100.             results.append("function setJsonData(data){"); 
101.             results.append("if(null!=data&&''!=data){"); 
102.             results.append("index=1;"); 
103.             results.append("table.clear();"); // 清除原有数据 
104.             results.append("var json=data;"); 
105.             results.append("var objs=eval(json);"); 
106.             results.append("for(var i=0;i<objs.length;i++){"); 
107.             results.append("var u = objs[i];"); 
108.             results.append("table.add({"); 
109.             results.append("index:index++,"); 
110.             for(int i=0;i<cn.length;i++){ 
111.                 if(i==0){ 
112.                     results.append(cn[i] + ":u." + cn[i] + ","); 
113.                 }else{ 
114.                     results.append(cn[i] + ":(u." + cn[i] + " + '').substr(0, 20),"); 
115.                 } 
116.             } 
117.             results.delete(results.length() - 1, results.length()); 
118.             results.append("});"); 
119.             results.append("table.render();"); 
120.             results.append("}"); 
121.             results.append("}"); 
122.             results.append("}"); 
123.             results.append("</script>");           
124.             results.append("<input type='hidden' id='colunmName' name='colunmName' value='" + colunmName + "'>"); 
125.             results.append("<input type='hidden' id='colunmShow' name='colunmShow' value='" + colunmShow + "'>"); 
126.             pageContext.getOut().write(results.toString()); 
127.         } catch (Exception e) { 
128.             e.printStackTrace(); 
129.         }        
130.         return EVAL_BODY_INCLUDE; 
131.     }    
132.     protected String colunmName;     
133.     protected String colunmShow;     
134.     protected String isPager;    
135.     protected String showAllColunm;  
136.     protected String isTablePager;   
137.     protected String currentJsonDate;    
138.     protected String currentPageCount;   
139.     protected String currentPageSize;    
140.     protected String isShowCheck;    
141.     protected String currentPageIndex; 
142.     // get和set方法省略 
143. } 

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.PageContext;
import javax.servlet.jsp.tagext.BodyTagSupport;
/**
 * @说明 用于显示表格
 * @author cuisuqiang
 * @version 1.0
 * @since
 */
@SuppressWarnings("serial")
public class GridTable_Tag  extends BodyTagSupport{	
	private HttpServletRequest request ;	
	@Override
	public void setPageContext(PageContext pageContext) {
		request = (HttpServletRequest)pageContext.getRequest();
		super.setPageContext(pageContext);
	}
	@Override
	public int doEndTag() throws JspException {
		return EVAL_PAGE;
	}
	@Override
	public int doStartTag() throws JspException {
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
		try {
			StringBuffer results = new StringBuffer("");			
			// 引入文件
			results.append("<link rel='stylesheet' type='text/css' href='" + basePath + "js/style.css' />");
			results.append("<script type='text/javascript' src='" + basePath + "js/jquery.js'></script>");
			results.append("<script type='text/javascript' src='" + basePath + "js/TableView.js'></script>");
			results.append("<script type='text/javascript' src='" + basePath + "js/PagerView.js'></script>");
			results.append("<script type='text/javascript' src='" + basePath + "js/SortView.js'></script>");
			results.append("<script type='text/javascript' src='" + basePath + "js/commonAttribute.js'></script>");
			String[] cn = colunmName.split(",");
			String[] cs = colunmShow.split(",");			
			// 开始绘制表格
			results.append("<script type='text/javascript'>");
			results.append("document.getElementById('table_div').className='tableShow';");
			results.append("var index=1;");
			results.append("var table = new TableView('table_div');");
			results.append("table.header={");
			results.append("index:'序号',");
			for(int i=0;i<cn.length;i++){
				results.append(cn[i] + ":'" + cs[i] + "',");
			}
			results.delete(results.length() - 1, results.length());
			results.append("};");
			results.append("table.dataKey='" + cn[0] + "';");
			String date = "";
			date = null == request.getAttribute("currentJsonDate") ? "" : (String)request.getAttribute("currentJsonDate");
			if(null != date && !"".equals(date))
				date = date.replace("\\", "/"); // 部分数据可能会引起JS解析错误
			results.append("var json='" + date + "';");
			results.append("var objs=eval(json);"); // EVAL函数的使用
			results.append("if(null!=objs){");
			results.append("for(var i=0;i<objs.length;i++){");
			results.append("var u = objs[i];");
			results.append("table.add({");
			results.append("index:index++,");
			for(int i=0;i<cn.length;i++){
				if(i==0){
					results.append(cn[i] + ":u." + cn[i] + ",");
				}else{
					results.append(cn[i] + ":(u." + cn[i] + " + '').substr(0, 20),"); // 这里做了数据截取
				}
			}
			results.delete(results.length() - 1, results.length());
			results.append("});");
			results.append("}");
			results.append("}");
			results.append("table.display.sort=true;");
			// 是否显示所有列
			if(null != showAllColunm && "true".equals(showAllColunm)){
				results.append("table.display.showAllColunm=true;");
			}
			// 是否显示多选框列
			if(null != isShowCheck && "false"==isShowCheck){
				results.append("table.display.multiple=false;");
				results.append("table.display.marker=false;");
			}			
			// 必须显示的进行表格分页，且页面分页不能同时进行
			if("true".equals(isTablePager) && (null == isPager || "false".equals(isPager))){
				results.append("table.display.pager=true;");
				results.append("table.pager.size=pageSize;"); // 分页页数是JS文件里面定义的
			}else{
				results.append("table.display.pager=false;");
			}			
			results.append("table.render();");			
			// 开始显示分页，表格自动分页和显示分页标签不能一同进行
			if(!"false".equals(isPager) && (null == isTablePager || "false".equals(isTablePager))){
				results.append("var pager=new PagerView('pager_div');");				
				results.append("pager.itemCount=" + (null != request.getAttribute("currentPageCount") ? request.getAttribute("currentPageCount").toString() : "0") + ";");
				results.append("pager.size=" + (null != request.getAttribute("currentPageSize") ? request.getAttribute("currentPageSize").toString() : "10") + ";");
				results.append("pager.index=" + (null != request.getAttribute("currentPageIndex") ? request.getAttribute("currentPageIndex").toString() : "0") + ";");
				results.append("pager.render();");
			}
			// 增加Ajax数据变换时的JS方法
			results.append("function setJsonData(data){");
			results.append("if(null!=data&&''!=data){");
			results.append("index=1;");
			results.append("table.clear();"); // 清除原有数据
			results.append("var json=data;");
			results.append("var objs=eval(json);");
			results.append("for(var i=0;i<objs.length;i++){");
			results.append("var u = objs[i];");
			results.append("table.add({");
			results.append("index:index++,");
			for(int i=0;i<cn.length;i++){
				if(i==0){
					results.append(cn[i] + ":u." + cn[i] + ",");
				}else{
					results.append(cn[i] + ":(u." + cn[i] + " + '').substr(0, 20),");
				}
			}
			results.delete(results.length() - 1, results.length());
			results.append("});");
			results.append("table.render();");
			results.append("}");
			results.append("}");
			results.append("}");
			results.append("</script>");			
			results.append("<input type='hidden' id='colunmName' name='colunmName' value='" + colunmName + "'>");
			results.append("<input type='hidden' id='colunmShow' name='colunmShow' value='" + colunmShow + "'>");
			pageContext.getOut().write(results.toString());
		} catch (Exception e) {
			e.printStackTrace();
		}		
		return EVAL_BODY_INCLUDE;
	}	
	protected String colunmName;	
	protected String colunmShow;	
	protected String isPager;	
	protected String showAllColunm;	
	protected String isTablePager;	
	protected String currentJsonDate;	
	protected String currentPageCount;	
	protected String currentPageSize;	
	protected String isShowCheck;	
	protected String currentPageIndex;
	// get和set方法省略
}

如果你到tableView网站上看看他的使用，就明白，这个类的功能就是做一些JS拼装的工作，然后我增加了一个JS方法，

Java代码

1. function setJsonData(data){} 

function setJsonData(data){}

用这个来动态展示数据

但是这里我特别声明一下：如果你要做的是监控类数据项目一直在变且长时间运行的话，那么你就不要用了，因为每次刷新浏览器的内存都会增加特别多，有内存泄漏问题！

请求一个Servlet或者Struts的Action，在业务逻辑里面增加要展示的内容

Java代码

1. public void doGet(HttpServletRequest request, HttpServletResponse response) 
2.         throws ServletException, IOException { 
3.     // 当前是第几页 
4.     String index = request.getParameter("pageIndex"); 
5.     int itindex = 1; 
6.     if(null != index){ 
7.         try { 
8.             itindex = Integer.parseInt(index); 
9.         } catch (Exception e) { 
10.         } 
11.     } 
12.     List<Users> list = new ArrayList<Users>(); 
13.     // 模拟数据 
14.     for(int i=(itindex - 1) * 10;i<(itindex - 1) * 10 + 10;i++){ 
15.         Users user = new Users(); 
16.         user.setId(i); 
17.         user.setEndTime("endTime_" + i); 
18.         user.setName("name_" + i); 
19.         user.setPass("pass_" + i); 
20.         user.setUpdateTime("updateTime_" + i); 
21.         list.add(user); 
22.     } 
23.     <span style="background-color: rgb(255, 255, 0);">JSONArray jsonArr = JSONArray.fromObject(list); // 使用工具生成JSON字符串</span> 
24.     request.setAttribute("currentJsonDate", jsonArr.toString()); 
25.     request.setAttribute("currentPageCount", 55); // 数据量是从数据库统计出来的 
26.     request.setAttribute("currentPageSize", "10"); // 页数一般是定死的 
27.     request.setAttribute("currentPageIndex", itindex); // 当前页是传递的参数 
28.     request.getRequestDispatcher("/grid.jsp").forward(request, response); 
29. } 

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	// 当前是第几页
	String index = request.getParameter("pageIndex");
	int itindex = 1;
	if(null != index){
		try {
			itindex = Integer.parseInt(index);
		} catch (Exception e) {
		}
	}
	List<Users> list = new ArrayList<Users>();
	// 模拟数据
	for(int i=(itindex - 1) * 10;i<(itindex - 1) * 10 + 10;i++){
		Users user = new Users();
		user.setId(i);
		user.setEndTime("endTime_" + i);
		user.setName("name_" + i);
		user.setPass("pass_" + i);
		user.setUpdateTime("updateTime_" + i);
		list.add(user);
	}
	JSONArray jsonArr = JSONArray.fromObject(list); // 使用工具生成JSON字符串
	request.setAttribute("currentJsonDate", jsonArr.toString());
	request.setAttribute("currentPageCount", 55); // 数据量是从数据库统计出来的
	request.setAttribute("currentPageSize", "10"); // 页数一般是定死的
	request.setAttribute("currentPageIndex", itindex); // 当前页是传递的参数
	request.getRequestDispatcher("/grid.jsp").forward(request, response);
}

JSON字符串的生成你不用担心，这样只要从数据库获得一个List到前面即可

这样就做好了一个自定义标签的表格控件，JSP页面的使用很简单

Java代码

1. <html:grid colunmName="id,name,endTime,updateTime" colunmShow="主键,用户名,有效期,更新时间"></html:grid> 

<html:grid colunmName="id,name,endTime,updateTime" colunmShow="主键,用户名,有效期,更新时间"></html:grid>

这样就可以生成一个表格信息了

当然你可以设置一些属性来控制表格的显示，也可以通过提供的JS方法来进行一些操作

Java代码

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
2. <%@ taglib uri="/tld/web-html" prefix="html"%> 
3. <% 
4. String path = request.getContextPath(); 
5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
6. %> 
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
8. <html> 
9.   <head> 
10.     <base href="<%=basePath%>"> 
11.     <title>My JSP 'grid.jsp' starting page</title> 
12.   </head>   
13.   <body> 
14. <form action="" id="form1" name="form1"> 
15. <input type="hidden" id="pageIndex" name="pageIndex" value=""> 
16. </form> 
17. <p> 
18. <input type="button" name="fordelete" id="fordelete" οnclick="fordelete()" value="删除数据"> 
19. </p> 
20. <div  align="left"> 
21. <div id="table_div" align="left"></div> 
22. <br> 
23. <div id="pager_div"  align="left"></div> 
24. </div> 
25. <html:grid colunmName="id,name,endTime,updateTime" colunmShow="主键,用户名,有效期,更新时间"></html:grid> 
26. <script type="text/javascript"> 
27. pager.onclick = function(index){ 
28.     document.getElementById("pageIndex").value=index; 
29.     document.form1.action="<%=basePath %>MySevlet"; 
30.     document.form1.submit(); 
31. }; 
32. function fordelete(){ 
33.     <span style="background-color: rgb(255, 255, 0);">var pk = table.getSelectedKeys();</span> 
34.     if(""==pk){ 
35.         alert("请选择一条记录！"); 
36.         return false; 
37.     } 
38.     if(pk.length > 1){ 
39.         alert("请选择一条记录！"); 
40.         return false; 
41.     } 
42.     alert("您选择了ID：" + pk + "！"); 
43. } 
44. </script> 
45.   </body> 
46. </html> 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/tld/web-html" prefix="html"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'grid.jsp' starting page</title>
  </head>  
  <body>
<form action="" id="form1" name="form1">
<input type="hidden" id="pageIndex" name="pageIndex" value="">
</form>
<p>
<input type="button" name="fordelete" id="fordelete" οnclick="fordelete()" value="删除数据">
</p>
<div  align="left">
<div id="table_div" align="left"></div>
<br>
<div id="pager_div"  align="left"></div>
</div>
<html:grid colunmName="id,name,endTime,updateTime" colunmShow="主键,用户名,有效期,更新时间"></html:grid>
<script type="text/javascript">
pager.onclick = function(index){
	document.getElementById("pageIndex").value=index;
	document.form1.action="<%=basePath %>MySevlet";
	document.form1.submit();
};
function fordelete(){
	var pk = table.getSelectedKeys();
	if(""==pk){
		alert("请选择一条记录！");
		return false;
	}
	if(pk.length > 1){
		alert("请选择一条记录！");
		return false;
	}
	alert("您选择了ID：" + pk + "！");
}
</script>
  </body>
</html>

获得选择的数据项是tableView提供的方法，我们无需关心

这样后台和前台的展示也有了分离，因为后台传递的是JSON，如果你前台的表格要换，那么很简单。

最后：

由于近期大量小网站在未经同意情况下使用文章，现将我的博客地址公布如下，请您到ITEYE网站看原创，谢谢！

http://cuisuqiang.iteye.com/ ！

• grid.zip (1 MB)
• 下载次数: 157