自定义标签
Posted liushisaonian
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义标签相关的知识,希望对你有一定的参考价值。
自定义标签分三步
1.实现TagSupport
package com.it.huanyu; import java.io.IOException; import javax.servlet.jsp.JspException; import javax.servlet.jsp.JspWriter; import javax.servlet.jsp.tagext.TagSupport; public class MyTestTag extends TagSupport { private static final long serialVersionUID = 1L; @Override public int doStartTag() throws JspException { JspWriter out=super.pageContext.getOut(); try { out.print("<h1>这个是自定义标签输出的大标题</h1>"); out.print("<h5>这个是自定义标签输出的小标题</h5>"); out.print("<span>这个是自定义标签输出的内容这个是自定义标签输出的内容这个是自定义标签输出的内容这个是自定义标签输出的内容</span>"); } catch (IOException e) { e.printStackTrace(); } return super.doStartTag(); } }
2.写tld文件
<?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"> <taglib> <tlib-version>2.0</tlib-version> <jsp-version>1.2</jsp-version> <short-name>myTestTag</short-name> <uri>http://ithuanyu.cn/myTestTag/</uri> <tag> <name>out</name> <tag-class>com.it.huanyu.MyTestTag</tag-class> <body-content>JSP</body-content> <description>create navigation for paging</description> </tag> </taglib>
3.在页面引入和输出
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true"%> <%@ taglib prefix="myTestTag" uri="http://ithuanyu.cn/myTestTag/"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>自定义标签的使用</title> </head> <body> <!-- 使用自定义标签 --> <myTestTag:out></myTestTag:out> </body> </html>
4.分页标签
package com.itheima.crm.utils; import java.io.IOException; import java.io.UnsupportedEncodingException; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.jsp.JspException; import javax.servlet.jsp.JspWriter; import javax.servlet.jsp.tagext.TagSupport; /** * 显示格式 上一页 1 2 3 4 5 下一页 */ public class NavigationTag extends TagSupport { static final long serialVersionUID = 2372405317744358833L; /** * request 中用于保存Page<E> 对象的变量名,默认为“page” */ private String bean = "page"; /** * 分页跳转的url地址,此属性必须 */ private String url = null; /** * 显示页码数量 */ private int number = 5; @Override public int doStartTag() throws JspException { JspWriter writer = pageContext.getOut(); HttpServletRequest request = (HttpServletRequest) pageContext.getRequest(); Page page = (Page) request.getAttribute(bean); if (page == null) return SKIP_BODY; url = resolveUrl(url, pageContext); try { // 计算总页数 int pageCount = page.getTotal() / page.getSize(); if (page.getTotal() % page.getSize() > 0) { pageCount++; } writer.print("<nav><ul class="pagination">"); // 显示“上一页”按钮 if (page.getPage() > 1) { String preUrl = append(url, "page", page.getPage() - 1); preUrl = append(preUrl, "rows", page.getSize()); writer.print("<li><a href="" + preUrl + "">上一页</a></li>"); } else { writer.print("<li class="disabled"><a href="#">上一页</a></li>"); } // 显示当前页码的前2页码和后两页码 // 若1 则 1 2 3 4 5, 若2 则 1 2 3 4 5, 若3 则1 2 3 4 5, // 若4 则 2 3 4 5 6 ,若10 则 8 9 10 11 12 int indexPage = (page.getPage() - 2 > 0) ? page.getPage() - 2 : 1; for (int i = 1; i <= number && indexPage <= pageCount; indexPage++, i++) { if (indexPage == page.getPage()) { writer.print("<li class="active"><a href="#">" + indexPage + "<span class="sr-only">(current)</span></a></li>"); continue; } String pageUrl = append(url, "page", indexPage); pageUrl = append(pageUrl, "rows", page.getSize()); writer.print("<li><a href="" + pageUrl + "">" + indexPage + "</a></li>"); } // 显示“下一页”按钮 if (page.getPage() < pageCount) { String nextUrl = append(url, "page", page.getPage() + 1); nextUrl = append(nextUrl, "rows", page.getSize()); writer.print("<li><a href="" + nextUrl + "">下一页</a></li>"); } else { writer.print("<li class="disabled"><a href="#">下一页</a></li>"); } writer.print("</nav>"); } catch (IOException e) { e.printStackTrace(); } return SKIP_BODY; } private String append(String url, String key, int value) { return append(url, key, String.valueOf(value)); } /** * 为url 参加参数对儿 * * @param url * @param key * @param value * @return */ private String append(String url, String key, String value) { if (url == null || url.trim().length() == 0) { return ""; } if (url.indexOf("?") == -1) { url = url + "?" + key + "=" + value; } else { if (url.endsWith("?")) { url = url + key + "=" + value; } else { url = url + "&" + key + "=" + value; } } return url; } /** * 为url 添加翻页请求参数 * * @param url * @param pageContext * @return * @throws javax.servlet.jsp.JspException */ private String resolveUrl(String url, javax.servlet.jsp.PageContext pageContext) throws JspException { // UrlSupport.resolveUrl(url, context, pageContext) Map params = pageContext.getRequest().getParameterMap(); for (Object key : params.keySet()) { if ("page".equals(key) || "rows".equals(key)) continue; Object value = params.get(key); if (value == null) continue; try { if (value.getClass().isArray()) { // 解决GET乱码问题 // value = new String(((String[]) // value)[0].getBytes("ISO-8859-1"), "UTF-8"); value = ((String[]) value)[0]; url = append(url, key.toString(), value.toString()); } else if (value instanceof String) { // 解决GET乱码问题 // value = new String(((String) // value).getBytes("ISO-8859-1"), "UTF-8"); value = (String) value; url = append(url, key.toString(), value.toString()); } } catch (Exception e) { e.printStackTrace(); } } return url; } /** * @return the bean */ public String getBean() { return bean; } /** * @param bean * the bean to set */ public void setBean(String bean) { this.bean = bean; } /** * @return the url */ public String getUrl() { return url; } /** * @param url * the url to set */ public void setUrl(String url) { this.url = url; } public void setNumber(int number) { this.number = number; } }
<?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"> <taglib> <tlib-version>2.0</tlib-version> <jsp-version>1.2</jsp-version> <short-name>common</short-name> <uri>http://itcast.cn/common/</uri> <display-name>Common Tag</display-name> <description>Common Tag library</description> <tag> <name>page</name> <tag-class>com.itheima.crm.utils.NavigationTag</tag-class> <body-content>JSP</body-content> <description>create navigation for paging</description> <attribute> <name>bean</name> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>number</name> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>url</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag> </taglib>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="itcast" uri="http://itcast.cn/common/"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>客户列表-BootCRM</title> <!-- Bootstrap Core CSS --> <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet"> <!-- MetisMenu CSS --> <link href="<%=basePath%>css/metisMenu.min.css" rel="stylesheet"> <!-- DataTables CSS --> <link href="<%=basePath%>css/dataTables.bootstrap.css" rel="stylesheet"> <!-- Custom CSS --> <link href="<%=basePath%>css/sb-admin-2.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="<%=basePath%>css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="<%=basePath%>css/boot-crm.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <!-- Navigation --> <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">BOOT客户管理系统 v2.0</a> </div> <!-- /.navbar-header --> <ul class="nav navbar-top-links navbar-right"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu dropdown-messages"> <li><a href="#"> <div> <strong>令狐冲</strong> <span class="pull-right text-muted"> <em>昨天</em> </span> </div> <div>今天晚上向大哥找我吃饭,讨论一下去梅庄的事...</div> </a></li> <li class="divider"></li> <li><a class="text-center" href="#"> <strong>查看全部消息</strong> <i class="fa fa-angle-right"></i> </a></li> </ul> <!-- /.dropdown-messages --></li> <!-- /.dropdown --> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu dropdown-tasks"> <li><a href="#"> <div> <p> <strong>任务 1</strong> <span class="pull-right text-muted">完成40%</span> </p> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">完成40%</span> </div> </div> </div> </a></li> <li class="divider"></li> <li><a href="#"> <div> <p> <strong>任务 2</strong> <span class="pull-right text-muted">完成20%</span> </p> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">完成20%</span> </div> </div> </div> </a></li> <li class="divider"></li> <li><a class="text-center" href="#"> <strong>查看所有任务</strong> <i class="fa fa-angle-right"></i> </a></li> </ul> <!-- /.dropdown-tasks --></li> <!-- /.dropdown --> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu dropdown-alerts"> <li><a href="#"> <div> <i class="fa fa-comment fa-fw"></i> 新回复 <span class="pull-right text-muted small">4分钟之前</span> </div> </a></li> <li class="divider"></li> <li><a href="#"> <div> <i class="fa fa-envelope fa-fw"></i> 新消息 <span class="pull-right text-muted small">4分钟之前</span> </div> </a></li> <li class="divider"></li> <li><a href="#"> <div> <i class="fa fa-tasks fa-fw"></i> 新任务 <span class="pull-right text-muted small">4分钟之前</span> </div> </a></li> <li class="divider"></li> <li><a href="#"> <div> <i class="fa fa-upload fa-fw"></i> 服务器重启 <span class="pull-right text-muted small">4分钟之前</span> </div> </a></li> <li class="divider"></li> <li><a class="text-center" href="#"> <strong>查看所有提醒</strong> <i class="fa fa-angle-right"></i> </a></li> </ul> <!-- /.dropdown-alerts --></li> <!-- /.dropdown --> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#"><i class="fa fa-user fa-fw"></i> 用户设置</a></li> <li><a href="#"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li> <li class="divider"></li> <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a></li> </ul> <!-- /.dropdown-user --></li> <!-- /.dropdown --> </ul> <!-- /.navbar-top-links --> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li class="sidebar-search"> <div class="input-group custom-search-form"> <input type="text" class="form-control" placeholder="查询内容..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <i class="fa fa-search" style="padding: 3px 0 3px 0;"></i> </button> </span> </div> <!-- /input-group --> </li> <li><a href="customer.action" class="active"><i class="fa fa-edit fa-fw"></i> 客户管理</a></li> <li><a href="salevisit.action"><i class="fa fa-dashboard fa-fw"></i> 客户拜访</a></li> </ul> </div> <!-- /.sidebar-collapse --> </div> <!-- /.navbar-static-side --> </nav> <div id="page-wrapper"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">客户管理</h1> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> <div class="panel panel-default"> <div class="panel-body"> <form class="form-inline" action="${pageContext.request.contextPath }/customer/list.action" method="get"> <div class="form-group"> <label for="customerName">客户名称</label> <input type="text" class="form-control" id="customerName" value="${vo.custName }" name="custName"> </div> <div class="form-group"> <label for="customerFrom">客户来源</label> <select class="form-control" id="customerFrom" placeholder="客户来源" name="custSource"> <option value="">--请选择--</option> <c:forEach items="${fromType}" var="item"> <option value="${item.dict_id}"<c:if test="${item.dict_id == vo.custSource}"> selected</c:if>>${item.dict_item_name }</option> </c:forEach> </select> </div> <div class="form-group"> <label for="custIndustry">所属行业</label> <select class="form-control" id="custIndustry" name="custIndustry"> <option value="">--请选择--</option> <c:forEach items="${industryType}" var="item"> <option value="${item.dict_id}"<c:if test="${item.dict_id == vo.custIndustry}"> selected</c:if>>${item.dict_item_name }</option> </c:forEach> </select> </div> <div class="form-group"> <label for="custLevel">客户级别</label> <select class="form-control" id="custLevel" name="custLevel"> <option value="">--请选择--</option> <c:forEach items="${levelType}" var="item"> <option value="${item.dict_id}"<c:if test="${item.dict_id == vo.custLevel}"> selected</c:if>>${item.dict_item_name }</option> </c:forEach> </select> </div> <button type="submit" class="btn btn-primary">查询</button> </form> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading">客户信息列表</div> <!-- /.panel-heading --> <table class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>客户名称</th> <th>客户来源</th> <th>客户所属行业</th> <th>客户级别</th> <th>固定电话</th> <th>手机</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${page.rows}" var="row"> <tr> <td>${row.cust_id}</td> <td>${row.cust_name}</td> <td>${row.cust_source}</td> <td>${row.cust_industry}</td> <td>${row.cust_level}</td> <td>${row.cust_phone}</td> <td>${row.cust_mobile}</td> <td> <a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#customerEditDialog" onclick="editCustomer(${row.cust_id})">修改</a> <a href="#" class="btn btn-danger btn-xs" onclick="deleteCustomer(${row.cust_id})">删除</a> </td> </tr> </c:forEach> </tbody> </table> <div class="col-md-12 text-right"> <itcast:page url="${pageContext.request.contextPath }/customer/list.action" /> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> </div> <!-- /#page-wrapper --> </div> <!-- 客户编辑对话框 --> <div class="modal fade" id="customerEditDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">修改客户信息</h4> </div> <div class="modal-body"> <form class="form-horizontal" id="edit_customer_form"> <input type="hidden" id="edit_cust_id" name="cust_id"/> <div class="form-group"> <label for="edit_customerName" class="col-sm-2 control-label">客户名称</label> <div class="col-sm-10"> <input type="text" class="form-control" id="edit_customerName" placeholder="客户名称" name="cust_name"> </div> </div> <div class="form-group"> <label for="edit_customerFrom" style="float:left;padding:7px 15px 0 27px;">客户来源</label> <div class="col-sm-10"> <select class="form-control" id="edit_customerFrom" placeholder="客户来源" name="cust_source"> <option value="">--请选择--</option> <c:forEach items="${fromType}" var="item"> <option value="${item.dict_id}"<c:if test="${item.dict_id == custSource}"> selected</c:if>>${item.dict_item_name }</option> </c:forEach> </select> </div> </div> <div class="form-group"> <label for="edit_custIndustry" style="float:left;padding:7px 15px 0 27px;">所属行业</label> <div class="col-sm-10"> <select class="form-control" id="edit_custIndustry" name="cust_industry"> <option value="">--请选择--</option> <c:forEach items="${industryType}" var="item"> <option value="${item.dict_id}"<c:if test="${item.dict_id == custIndustry}"> selected</c:if>>${item.dict_item_name }</option> </c:forEach> </select> </div> </div> <div class="form-group"> <label for="edit_custLevel" style="float:left;padding:7px 15px 0 27px;">客户级别</label> <div class="col-sm-10"> <select class="form-control" id="edit_custLevel" name="cust_level"> <option value="">--请选择--</option> <c:forEach items="${levelType}" var="item"> <option value="${item.dict_id}"<c:if test="${item.dict_id == custLevel}"> selected</c:if>>${item.dict_item_name }</option> </c:forEach> </select> </div> </div> <div class="form-group"> <label for="edit_linkMan" class="col-sm-2 control-label">联系人</label> <div class="col-sm-10"> <input type="text" class="form-control" id="edit_linkMan" placeholder="联系人" name="cust_linkman"> </div> </div> <div class="form-group"> <label for="edit_phone" class="col-sm-2 control-label">固定电话</label> <div class="col-sm-10"> <input type="text" class="form-control" id="edit_phone" placeholder="固定电话" name="cust_phone"> </div> </div> <div class="form-group"> <label for="edit_mobile" class="col-sm-2 control-label">移动电话</label> <div class="col-sm-10"> <input type="text" class="form-control" id="edit_mobile" placeholder="移动电话" name="cust_mobile"> </div> </div> <div class="form-group"> <label for="edit_zipcode" class="col-sm-2 control-label">邮政编码</label> <div class="col-sm-10"> <input type="text" class="form-control" id="edit_zipcode" placeholder="邮政编码" name="cust_zipcode"> </div> </div> <div class="form-group"> <label for="edit_address" class="col-sm-2 control-label">联系地址</label> <div class="col-sm-10"> <input type="text" class="form-control" id="edit_address" placeholder="联系地址" name="cust_address"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="updateCustomer()">保存修改</button> </div> </div> </div> </div> <!-- /#wrapper --> <!-- jQuery --> <script src="<%=basePath%>js/jquery.min.js"></script> <!-- Bootstrap Core javascript --> <script src="<%=basePath%>js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="<%=basePath%>js/metisMenu.min.js"></script> <!-- DataTables JavaScript --> <script src="<%=basePath%>js/jquery.dataTables.min.js"></script> <script src="<%=basePath%>js/dataTables.bootstrap.min.js"></script> <!-- Custom Theme JavaScript --> <script src="<%=basePath%>js/sb-admin-2.js"></script> <script type="text/javascript"> function editCustomer(id) { $.ajax({ type:"get", url:"<%=basePath%>customer/edit.action", data:{"id":id}, success:function(data) { $("#edit_cust_id").val(data.cust_id); $("#edit_customerName").val(data.cust_name); $("#edit_customerFrom").val(data.cust_source) $("#edit_custIndustry").val(data.cust_industry) $("#edit_custLevel").val(data.cust_level) $("#edit_linkMan").val(data.cust_linkman); $("#edit_phone").val(data.cust_phone); $("#edit_mobile").val(data.cust_mobile); $("#edit_zipcode").val(data.cust_zipcode); $("#edit_address").val(data.cust_address); } }); } function updateCustomer() { $.post("<%=basePath%>customer/update.action",$("#edit_customer_form").serialize(),function(data){ if(data == "0"){ alert("客户信息更新成功!"); }else{ alert("客户信息更新失败!"); } window.location.reload(); }); } function deleteCustomer(id) { if(confirm(‘确实要删除该客户吗?‘)) { $.post("<%=basePath%>customer/delete.action",{"id":id},function(data){ if(data == "0"){ alert("客户信息删除成功!"); }else{ alert("客户信息删除失败!"); } window.location.reload(); }); } } </script> </body> </html>
以上是关于自定义标签的主要内容,如果未能解决你的问题,请参考以下文章