如果你用公司的平台进行开发的话,许多时候向按钮,输入框,树,菜单等都是直接用一个标签设置几个属性就可以了。全局上样式是统一的,而且容易维护。
之前我已经发使用自定义标签来做数据字典的示例,也就是说自定义标签并不是你想的那么难,今天就再来作一个自定标标签实现的表格控件。当然你别较真,麻雀虽小五脏俱全的,你懂就行了。
我先来简单介绍一下:
效果如下图
这个控件包含了列表显示,选择框,隔行染色,分页,排序一些基本功能!
原来很简单,后台查询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); } <span style="background-color: #ffff00;">JSONArray jsonArr = JSONArray.fromObject(list); // 使用工具生成JSON字符串</span> 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(){ <span style="background-color: #ffff00;">var pk = table.getSelectedKeys();</span> if(""==pk){ alert("请选择一条记录!"); return false; } if(pk.length > 1){ alert("请选择一条记录!"); return false; } alert("您选择了ID:" + pk + "!"); } </script> </body> </html>
获得选择的数据项是tableView提供的方法,我们无需关心
这样后台和前台的展示也有了分离,因为后台传递的是JSON,如果你前台的表格要换,那么很简单。
Java小强
未曾清贫难成人,不经打击老天真。
自古英雄出炼狱,从来富贵入凡尘。
发表评论: