If you use the company's platform for development , Many times, push the button , Input box , Trees , Menus and so on are directly set several properties with a label . The overall style is unified , And easy to maintain .
I have previously sent an example of using custom tags as a data dictionary , In other words, customizing labels is not as difficult as you think , Today, let's make a table control with self calibration label . Of course, don't be serious , Although the sparrow is small, it has five internal organs , If you understand .
Let me briefly introduce ：
The effect is as follows
This control contains a list display , Selection box , Interlaced staining , Pagination , Sort some basic functions ！
It turned out to be simple , Background query List data , Conduct JSON Format conversion to JSON character string , The front desk to use JS Generate tables .
List To convert a string, we directly use json-lib that will do , Easy to use .
I use tableView , The address is http://www.ideawu.net/person/tableview/v1.1/
Then use custom tags to display the two
First, let's look at the definition of labels ：
<?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"><!-- Custom label Cui suqiang 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><!-- Column name , With , Division . The first column must be a primary key column , This column is not displayed , But return the primary key value when returning the selected column --> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>colunmShow</name><!-- The text displayed in the column , With , Division --> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>isPager</name><!-- Display paging or not --> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>isTablePager</name><!-- Display paging or not --> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>isShowCheck</name> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>showAllColunm</name> <rtexprvalue>true</rtexprvalue> </attribute> </tag></taglib>
Introduce the properties ：
colunmName： To display the name of the column , Because some people query all the attributes of the object , So here we specify to display the write column
colunmShow： Display the column name of the column , This is on the page , For example, you listed name, Then the column displayed to the page should be name
isPager： Pagination or not , In fact, pagination control is to make a display , If you don't use paging, set it to false The paging content will not be displayed
isTablePager： This page is separate from the above page and cannot be in parallel , This is when paging is not performed , The meaning of page paging . For example, you need to show 100 Data , No paging query , Then return to the page at one time 100 Data , You have to display in pages , You can set this property
isShowCheck： This is to control whether to display multiple selection boxes
showAllColunm： Because we can't display the primary key , But when we operate on a piece of data, we must get the primary key , So I am tableView It's been modified , Do not display the primary key column , Of course, it is not displayed by default , If you set this property to true, Then the primary key column will be displayed
Let's take a look at the tag code of descendants , The data content to be displayed is mainly obtained through tag attributes , Then assemble dynamic JS Content block
import javax.servlet.http.HttpServletRequest;import javax.servlet.jsp.JspException;import javax.servlet.jsp.PageContext;import javax.servlet.jsp.tagext.BodyTagSupport;/** * @ explain Used to display tables * @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(""); // The introduction of the file 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(","); // Start drawing tables 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:' Serial number ',"); 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("\\", "/"); // Some data may cause JS Parse error results.append("var json='" + date + "';"); results.append("var objs=eval(json);"); // EVAL Use of functions 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),"); // Data interception is done here } } results.delete(results.length() - 1, results.length()); results.append("});"); results.append("}"); results.append("}"); results.append("table.display.sort=true;"); // Whether to display all columns if(null != showAllColunm && "true".equals(showAllColunm)){ results.append("table.display.showAllColunm=true;"); } // Whether to display multiple checkbox columns if(null != isShowCheck && "false"==isShowCheck){ results.append("table.display.multiple=false;"); results.append("table.display.marker=false;"); } // Must be displayed for table paging , And page paging cannot be done at the same time if("true".equals(isTablePager) && (null == isPager || "false".equals(isPager))){ results.append("table.display.pager=true;"); results.append("table.pager.size=pageSize;"); // The number of pages paged is JS As defined in the document }else{ results.append("table.display.pager=false;"); } results.append("table.render();"); // Start showing paging , The automatic paging of tables and the display of paging labels cannot be carried out together 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();"); } // increase Ajax Data transformation JS Method results.append("function setJsonData(data){"); results.append("if(null!=data&&''!=data){"); results.append("index=1;"); results.append("table.clear();"); // Clear the original data 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 and set Method ellipsis }If you come to tableView Look at his use on the website , I understand , The function of this class is to do some JS Assembly work , Then I added one JS Method ,
function setJsonData(data){}Use this to dynamically display data
But here I make a special statement ： If what you want to do is to monitor data projects that have been changing and running for a long time , Then don't use it , Because every time you refresh the browser, the memory will increase a lot , There is a memory leak problem ！
Request one Servlet perhaps Struts Of Action, Add the content to be displayed in the business logic
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // What page is it now 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>(); // Analog data 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); // Use tools to generate JSON character string </span> request.setAttribute("currentJsonDate", jsonArr.toString()); request.setAttribute("currentPageCount", 55); // The data volume is calculated from the database request.setAttribute("currentPageSize", "10"); // The number of pages is usually fixed request.setAttribute("currentPageIndex", itindex); // The current page is the passed parameter request.getRequestDispatcher("/grid.jsp").forward(request, response);}JSON You don't have to worry about string generation , In this way, just get one from the database List Just go to the front
In this way, a custom label table control is made ,JSP The use of the page is very simple
<html:grid colunmName="id,name,endTime,updateTime" colunmShow=" Primary key , user name , The period of validity , Update time "></html:grid>
In this way, a table information can be generated
Of course, you can set some properties to control the display of the table , It can also be provided through JS Method to do some operations
<%@ 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=" Delete data "></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=" Primary key , user name , The period of validity , Update time "></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(" Please select a record ！"); return false; } if(pk.length > 1){ alert(" Please select a record ！"); return false; } alert(" You chose ID：" + pk + "！");}</script> </body></html>The selected data item is tableView Methods provided , We don't need to care about
In this way, the display of the backstage and the front desk are also separated , Because the background transmission is JSON, If you need to change the form at the front desk , So it's very simple .
Click download attachment
I recommend you to read more about “ Custom tag form grid Pagination table ” The article
![P1067 [noip2009 popularity group] polynomial output (difficult, pit)](/img/1f/a798879a0d65eccefa339b288f2102.jpg)
