手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> 开源 >> 手把手教你做一个自定义表格标签

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

27160 开源 | 2014-7-9

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

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

我先来简单介绍一下:

效果如下图

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

原来很简单,后台查询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,如果你前台的表格要换,那么很简单。

 

点击下载附件

推荐您阅读更多有关于“ 自定义标签 表格 grid 分页 table ”的文章

上一篇:使用过滤器统计URL请求耗时 下一篇:通过Servlet 将服务器硬盘图片 展示到浏览器

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 为什么一直不写了呢?因为当爸爸了,没空了。今年的冬天,有些寒冷,除了这寒冬带来的不适,更有因乐视公司遇到危机,而带来的同事别离。送别同事,看着空旷的工位,心中有些悲凉。临近年关,此时此刻,该怎么做,似乎不再是脑子一热那么简单了。

    2016-11-24 11:28

  • 更多»

最新文章
热门文章
随机文章