java 自定义表格 面板

Question

如何用java实现一个自定义表格的编写，并将这个表格添加到面板上

Answer 1

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

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

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

我先来简单介绍一下：
效果如下图

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

原来很简单，后台查询List数据，进行JSON格式转换为JSON字符串，前台使用JS进行表格生成。
List转字符串我们直接使用json-lib即可，很简单的使用。
前台我采用 tableView ，网址是 http://www.ideawu.net/person/tableview/v1.1/
然后采用自定义标签将两者融合展示

首先来看一下标签的定义：
Xml代码 收藏代码
<?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">

1.0

1.2

html



grid

com.cui.GridTable_Tag

JSP



colunmName<!-- 列名称，以 , 分割。第一列必须为主键列，该列不显示，但是在返回选择的列时返回主键值 -->

true





colunmShow<!-- 列显示的文字，以 , 分割 -->

true





isPager<!-- 是否显示分页 -->

true





isTablePager<!-- 是否显示分页 -->

true





isShowCheck

true





showAllColunm

true

介绍一下属性：
colunmName：要显示列的名称，因为有的人查询是查询了对象所有的属性出来，所以这里我们指定要显示那写列
colunmShow：显示列的列名，这个是在页面看的，比如你列是name，那么显示到页面的列应该是 名字
isPager：是否分页，其实分页控件也就是做一个显示，如果你不用分页设置为false就不会显示分页内容了
isTablePager：这个和上面的分页是分开的不能并行的，这个就是在不进行分页时，页面进行分页的意思。比如说你要显示100条数据，不进行分页查询，那么一次性返回到页面100条数据，你又要分页显示，就可以设置这个属性
isShowCheck：这个是控制是否显示多选框
showAllColunm：因为我们不可能把主键也显示出去的，但是当我们操作一条数据时又必须得到主键，所以我对tableView进行了修改，不显示主键列，当然是默认不显示，如果你设置了这个属性为true，那么会显示主键列

后代的标签代码我们来看一下，主要是通过标签属性获得要展示的数据内容，然后拼装动态JS内容块
Java代码 收藏代码
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("");
  
  results.append("");
  
  results.append("");
  
  results.append("");
  
  results.append("");
  
  results.append("");
  
  String[] cn = colunmName.split(",");
  
  String[] cs = colunmShow.split(",");
  
  // 开始绘制表格
  
  results.append("&quot;);<br><br> results.append(&quot;document.getElementById(&#39;table_div&#39;).className=&#39;tableShow&#39;;&quot;);<br><br> results.append(&quot;var index=1;&quot;);<br><br> results.append(&quot;var table = new TableView(&#39;table_div&#39;);&quot;);<br><br> results.append(&quot;table.header={&quot;);<br><br> results.append(&quot;index:&#39;序号&#39;,&quot;);<br><br> for(int i=0;i<cn.length;i++){ <br> results.append(cn[i] + ":'" + cs[i] + "',"); <br> } <br> results.delete(results.length() - 1, results.length()); <br> results.append("};"); <br> results.append("table.dataKey='" + cn[0] + "';"); <br> String date = ""; <br> date = null == request.getAttribute("currentJsonDate") ? "" : (String)request.getAttribute("currentJsonDate"); <br> if(null != date && !"".equals(date)) <br> date = date.replace("\\", "/"); // 部分数据可能会引起JS解析错误 <br> results.append("var json='" + date + "';"); <br> results.append("var objs=eval(json);"); // EVAL函数的使用 <br> results.append("if(null!=objs){"); <br> results.append("for(var i=0;i<objs.length;i++){"); <br> results.append("var u = objs[i];"); <br> results.append("table.add({"); <br> results.append("index:index++,"); <br> for(int i=0;i<cn.length;i++){ <br> if(i==0){ <br> results.append(cn[i] + ":u." + cn[i] + ","); <br> }else{ <br> results.append(cn[i] + ":(u." + cn[i] + " + '').substr(0, 20),"); // 这里做了数据截取 <br> } <br> } <br> results.delete(results.length() - 1, results.length()); <br> results.append("});"); <br> results.append("}"); <br> results.append("}"); <br> results.append("table.display.sort=true;"); <br> // 是否显示所有列 <br> if(null != showAllColunm && "true".equals(showAllColunm)){ <br> results.append("table.display.showAllColunm=true;"); <br> } <br> // 是否显示多选框列 <br> if(null != isShowCheck && "false"==isShowCheck){ <br> results.append("table.display.multiple=false;"); <br> results.append("table.display.marker=false;"); <br> } <br> // 必须显示的进行表格分页，且页面分页不能同时进行 <br> if("true".equals(isTablePager) && (null == isPager || "false".equals(isPager))){ <br> results.append("table.display.pager=true;"); <br> results.append("table.pager.size=pageSize;"); // 分页页数是JS文件里面定义的 <br> }else{ <br> results.append("table.display.pager=false;"); <br> } <br> results.append("table.render();"); <br> // 开始显示分页，表格自动分页和显示分页标签不能一同进行 <br> if(!"false".equals(isPager) && (null == isTablePager || "false".equals(isTablePager))){ <br> results.append("var pager=new PagerView('pager_div');"); <br> results.append("pager.itemCount=" + (null != request.getAttribute("currentPageCount") ? request.getAttribute("currentPageCount").toString() : "0") + ";"); <br> results.append("pager.size=" + (null != request.getAttribute("currentPageSize") ? request.getAttribute("currentPageSize").toString() : "10") + ";"); <br> results.append("pager.index=" + (null != request.getAttribute("currentPageIndex") ? request.getAttribute("currentPageIndex").toString() : "0") + ";"); <br> results.append("pager.render();"); <br> } <br> // 增加Ajax数据变换时的JS方法 <br> results.append("function setJsonData(data){"); <br> results.append("if(null!=data&&''!=data){"); <br> results.append("index=1;"); <br> results.append("table.clear();"); // 清除原有数据 <br> results.append("var json=data;"); <br> results.append("var objs=eval(json);"); <br> results.append("for(var i=0;i<objs.length;i++){"); <br> results.append("var u = objs[i];"); <br> results.append("table.add({"); <br> results.append("index:index++,"); <br> for(int i=0;i<cn.length;i++){ <br> if(i==0){ <br> results.append(cn[i] + ":u." + cn[i] + ","); <br> }else{ <br> results.append(cn[i] + ":(u." + cn[i] + " + '').substr(0, 20),"); <br> } <br> } <br> results.delete(results.length() - 1, results.length()); <br> results.append("});"); <br> results.append("table.render();"); <br> results.append("}"); <br> results.append("}"); <br> results.append("}"); <br> results.append("");
  
  results.append("");
  
  results.append("");
  
  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代码 收藏代码
function setJsonData(data){}

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

请求一个Servlet或者Struts的Action，在业务逻辑里面增加要展示的内容
Java代码 收藏代码
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 list = new ArrayList();

// 模拟数据

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代码 收藏代码
/html:grid

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

当然你可以设置一些属性来控制表格的显示，也可以通过提供的JS方法来进行一些操作
Java代码 收藏代码
<%@ 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:grid

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 + "！"); }

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

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