如果你用公司的平台进行开发的话，许多时候向按钮，输入框，树，菜单等都是直接用一个标签设置几个属性就可以了。全局上样式是统一的，而且容易维护。
之前我已经发使用自定义标签来做数据字典的示例，也就是说自定义标签并不是你想的那么难，今天就再来作一个自定标标签实现的表格控件。当然你别较真，麻雀虽小五脏俱全的，你懂就行了。
我先来简单介绍一下：
效果如下图
这个控件包含了列表显示，选择框，隔行染色，分页，排序一些基本功能！
原来很简单，后台查询List数据，进行JSON格式转换为JSON字符串，前台使用JS进行表格生成。
List转字符串我们直接使用json-lib即可，很简单的使用。
前台我采用 tableView ，网址是 http://www.ideawu.net/person/tableview/v1.1/
然后采用自定义标签将两者融合展示
首先来看一下标签的定义：
<?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内容块
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方法，
function setJsonData(data){}
用这个来动态展示数据
但是这里我特别声明一下：如果你要做的是监控类数据项目一直在变且长时间运行的话，那么你就不要用了，因为每次刷新浏览器的内存都会增加特别多，有内存泄漏问题！
请求一个Servlet或者Struts的Action，在业务逻辑里面增加要展示的内容
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页面的使用很简单
<html:grid colunmName="id,name,endTime,updateTime" colunmShow="主键,用户名,有效期,更新时间"></html:grid>
这样就可以生成一个表格信息了
当然你可以设置一些属性来控制表格的显示，也可以通过提供的JS方法来进行一些操作
<%@ 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" onclick="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
或支持我的个人博客，地址：http://www.javacui.com
相关推荐
手把手教你学DSP：基于TMS320F28335 手把手教你学DSP：基于TMS320F28335 手把手教你学DSP：基于TMS320F28335 手把手教你学DSP：基于TMS320F28335 手把手教你学DSP：基于TMS320F28335 手把手教你学DSP：基于TMS320F...
003《老HRD手把手教你做绩效考核》.pdf
《Blender图解教程：手把手教你做一个马里奥金币 之 纯建模方法》教程的附件下载 原教程地址：https://orzgame.blog.csdn.net/article/details/105729889
《Blender图解教程：手把手教做一个马里奥金币》教程的附件下载 原教程地址：https://orzgame.blog.csdn.net/article/details/105682924
首先，我们需要为自定义的AT指令选择一个合适的名称。命名规则是长度不超过10个字符，包含前缀（如`+`、`$`、`^`或`&`）和实际指令名，比如`+TEST`。这里的`+`是前缀，`TEST`是实际指令，两者合起来不得超过10个字符...
《Qt5 PyQt 5实战指南—手把手教你掌握100个精彩案例》 《Qt5 PyQt 5实战指南—手把手教你掌握100个精彩案例》 《Qt5 PyQt 5实战指南—手把手教你掌握100个精彩案例》
手把手教你学28335PDF文档，看了这个确实和2812有了对比
这本书以其全面且易懂的特性，为读者提供了一个深入理解数字信号处理及其在嵌入式系统中应用的平台。以下将详细介绍该书涵盖的一些核心知识点。 1. **DSP基础知识**：首先，书本会介绍数字信号处理的基础概念，包括...
总的来说，“手把手教你学DSPPDF”这个资源为初学者提供了一个全面的学习路径，不仅包含理论知识，还注重实践技能的培养，是数字信号处理入门的理想选择。通过深入学习和实践，读者可以逐步建立起坚实的DSP基础，为...
在本教程“手把手教你做问答系列”中，我们将深入探讨如何有效地进行问答系统的构建与优化。这个系列的目的是帮助初学者以及有一定经验的开发者掌握问答系统的核心技术和实践方法，从而能够创建出高质量的问答解决...
手把手教你学DSP28335，PDF格式，有助于随时随地可以学习知识。
手把手教你学DSP28335高清pdf文件，北京航空航天大学出版社
本教程将详细解释如何自定义一个`ExpandableListView`，让你能够根据自己的需求定制功能。 首先，我们要了解`ExpandableListView`的基本结构。它由两部分组成：父项（Group）和子项（Child）。每个父项可以包含多个...
手把手教你学dsp F2812 顾伟刚
"手把手教你如何从一无所有到财务自由.pdf" 本文主要讲述的是如何从零开始创业，到达财务自由的三个步骤。作者通过幽默诙谐的语言，浅显易懂的思维高度，指导小屁孩创业，并提供了非常好的指引方向。 第一部分：...
首先，自定义ViewGroup意味着你需要扩展`android.view.ViewGroup`类，这是一个容器，可以包含多个子视图（Views）。ViewGroup负责布局管理，包括子视图的位置和大小计算。在自定义过程中，我们通常会重写以下几个...
【功能描述】 用户前台功能：商品分类多级展示、商品搜索、商品查看、用户注册登录、收藏商品、加入购物车、提交订单、个人心信息管理、收货地址管理、收藏管理、评价管理、订单管理等。后台管理功能（脚手架的...
《手把手教你学51单片机》教材的出版，对于那些渴望踏入嵌入式开发领域的初学者而言，无疑是一份难得的珍藏资料。51单片机作为微控制器的经典代表，一直占据着嵌入式系统教学和应用的前沿，其地位不可动摇。本书以51...
手把手教你学单片机（第二版） 周兴华.pdf