20190328学习笔记 - JSP 中的 tag 文件

在jsp文件中，可以引用 tag 和tld 文件，本文主要针对 tag

对于tag 文件

1. 将此类文件放在 WEB-INF 下，比如 /WEB-INF/tags，tags 是目录，其下可以有多个.tag文件，如
   tree.tag，menu.tag
2. 在jsp 中使用 <%@ taglib prefix=“sys” tagdir="/WEB-INF/tags/sys" %> 来引入
3. 在jsp 页面上，采用sys:xxx 来使用该 tag 文件，如 sys:tree、sys:menu

tag 文件的作用一般是一段小代码，类似 include 文件的作用，tag文件中定义的attribute属性就相当于HTML标签中的id、class等属性，当jsp页面中使用了该标签并且给对应的属性指定了值以后，那么在tag文件中就可以使用“${属性名}”来获取对应属性的值。

1. 引入 tag 文件

<%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %>

2. 在/WEB-INF/tags/sys 下，新增一个gridselect.tag文件

	<%@ tag language="java" pageEncoding="UTF-8"%>
	<%@ include file="/webpage/include/taglib.jsp"%>
	<%@ attribute name="id" type="java.lang.String" required="true" description="编号"%>
	<%@ attribute name="name" type="java.lang.String" required="true" description="隐藏域名称（ID）"%>
	<%@ attribute name="value" type="java.lang.String" required="true" description="隐藏域值（ID）"%>
	<%@ attribute name="labelName" type="java.lang.String" required="true" description="输入框名称（Name）"%>
	<%@ attribute name="labelValue" type="java.lang.String" required="true" description="输入框值（Value）"%>
	<%@ attribute name="fieldLabels" type="java.lang.String" required="true" description="表格Th里显示的名字"%>
	<%@ attribute name="fieldKeys" type="java.lang.String" required="true" description="表格Td里显示的值"%>
	<%@ attribute name="searchLabels" type="java.lang.String" required="true" description="检索框标签"%>
	<%@ attribute name="searchKeys" type="java.lang.String" required="true" description="检索框key"%>
	<%@ attribute name="title" type="java.lang.String" required="true" description="选择框标题"%>
	<%@ attribute name="url" type="java.lang.String" required="true" description="数据地址"%>
	<%@ attribute name="cssClass" type="java.lang.String" required="false" description="css样式"%>
	<%@ attribute name="isMultiSelected" type="java.lang.Boolean" required="false" description="是否允许多选"%>
	<%@ attribute name="disabled" type="java.lang.String" required="false" description="是否限制选择，如果限制，设置为disabled"%>
		<input id="${id}Id" name="${name}"  type="hidden" value="${value}"/>
		<div class="input-group" style="width: 100%">
			<input id="${id}Name"  name="${labelName }" ${allowInput?'':'readonly="readonly"'}  type="text" value="${labelValue}" data-msg-required="${dataMsgRequired}"
			class="${cssClass}" style="${cssStyle}"/>
	       		 <span class="input-group-btn">
		       		 <button type="button"  id="${id}Button" class="btn <c:if test="${fn:contains(cssClass, 'input-sm')}"> btn-sm </c:if><c:if test="${fn:contains(cssClass, 'input-lg')}"> btn-lg </c:if>  btn-primary ${disabled} ${hideBtn ? 'hide' : ''}"><i class="fa fa-search"></i>
		             </button> 
		               <button type="button" id="${id}DelButton" class="close" data-dismiss="alert" style="position: absolute; top: 5px; right: 53px; z-index: 999; display: block;">×</button>
	       		 </span>
	       		
	    </div>
		 <label id="${id}Name-error" class="error" for="${id}Name" style="display:none"></label>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#${id}Button, #${id}Name").click(function(){
			if ($("#${id}Button").hasClass("disabled")){
				return true;
			}
			
			top.layer.open({
			    type: 2,  
			    area: ['800px', '500px'],
			    title:"${title}",
			    auto:true,
			    name:'friend',
			    content: "${ctx}/tag/gridselect?url="+encodeURIComponent("${url}")+"&fieldLabels="+encodeURIComponent("${fieldLabels}")+"&fieldKeys="+encodeURIComponent("${fieldKeys}")+"&searchLabels="+encodeURIComponent("${searchLabels}")+"&searchKeys="+encodeURIComponent("${searchKeys}")+"&isMultiSelected=${isMultiSelected? true:false}",
			    btn: ['确定', '关闭'],
			    yes: function(index, layero){
			    	 var iframeWin = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
			    	 var items = iframeWin.getSelections();
			    	 if(items == ""){
				    	jp.warning("必须选择一条数据!");
				    	return;
			    	 }
			    	 var ids = [];
			    	 var names = [];
			    	 for(var i=0; i<items.length; i++){
			    		 var item = items[i];
			    		 ids.push(item.id);
			    		 names.push(item${fn:substring(labelName, fns:lastIndexOf(labelName, '.'), fn:length(labelName))})
			    	 }
			    	 $("#${id}Id").val(ids.join(","));
			    	 $("#${id}Name").val(names.join(","));
					 top.layer.close(index);//关闭对话框。
				  },
				  cancel: function(index){ 
			       }
			}); 
		})
		$("#${id}DelButton").click(function(){
			// 是否限制选择，如果限制，设置为disabled
			if ($("#${id}Button").hasClass("disabled")){
				return true;
			}
			// 清除	
			$("#${id}Id").val("");
			$("#${id}Name").val("");
			$("#${id}Name").focus();
	
		});
	})
	</script>

3. 在jsp中使用该tag

<sys:gridselect url="${ctx}/nation/info/basNationInfo/data" id="psnNation" name="psnNation" value="${hrPersonInfo.psnNation}" labelName="basNationInfo.natName" labelValue="${hrPersonInfo.natName}" title="选择民族" cssClass="form-control required"  fieldLabels="姓名|性别|出生年月|民族|籍贯|本人手机"  disabled="true" fieldKeys=" psnName|psnGender2|psnBirthday|natName|psnNativeplace|psnMobile" searchLabels="民族" searchKeys="natName" ></sys:gridselect>