jeesite的treeselect.tag的实践总结

╰+哭是因爲堅強的太久メ 2024-04-18 06:58 49阅读 0赞

## treeselect.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="输入框值（Name）"%>
    <%@ attribute name="title" type="java.lang.String" required="true" description="选择框标题"%>
    <%@ attribute name="url" type="java.lang.String" required="true" description="树结构数据地址"%>
    <%@ attribute name="checked" type="java.lang.Boolean" required="false" description="是否显示复选框，如果不需要返回父节点，请设置notAllowSelectParent为true"%>
    <%@ attribute name="extId" type="java.lang.String" required="false" description="排除掉的编号（不能选择的编号）"%>
    <%@ attribute name="isAll" type="java.lang.Boolean" required="false" description="是否列出全部数据，设置true则不进行数据权限过滤（目前仅对Office有效）"%>
    <%@ attribute name="notAllowSelectRoot" type="java.lang.Boolean" required="false" description="不允许选择根节点"%>
    <%@ attribute name="notAllowSelectParent" type="java.lang.Boolean" required="false" description="不允许选择父节点"%>
    <%@ attribute name="module" type="java.lang.String" required="false" description="过滤栏目模型（只显示指定模型，仅针对CMS的Category树）"%>
    <%@ attribute name="selectScopeModule" type="java.lang.Boolean" required="false" description="选择范围内的模型（控制不能选择公共模型，不能选择本栏目外的模型）（仅针对CMS的Category树）"%>
    <%@ attribute name="allowClear" type="java.lang.Boolean" required="false" description="是否允许清除"%>
    <%@ attribute name="allowInput" type="java.lang.Boolean" required="false" description="文本框可填写"%>
    <%@ attribute name="cssClass" type="java.lang.String" required="false" description="css样式"%>
    <%@ attribute name="cssStyle" type="java.lang.String" required="false" description="css样式"%>
    <%@ attribute name="smallBtn" type="java.lang.Boolean" required="false" description="缩小按钮显示"%>
    <%@ attribute name="hideBtn" type="java.lang.Boolean" required="false" description="是否显示按钮"%>
    <%@ attribute name="disabled" type="java.lang.String" required="false" description="是否限制选择，如果限制，设置为disabled"%>
    <%@ attribute name="dataMsgRequired" type="java.lang.String" required="false" description=""%>
    	<input id="${id}Id" name="${name}" class="${cssClass}" type="hidden" value="${value}"/>
    	<div class="input-group">
    		<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> 
           		 </span>
           		
        </div>
    	 <label id="${id}Name-error" class="error" for="${id}Name" style="display:none"></label>
    <script type="text/javascript">
    	$("#${id}Button, #${id}Name").click(function(){
    		// 是否限制选择，如果限制，设置为disabled
    		if ($("#${id}Button").hasClass("disabled")){
    			return true;
    		}
    		// 正常打开	
    		top.layer.open({
    		    type: 2, 
    		    area: ['300px', '420px'],
    		    title:"选择${title}",
    		    ajaxData:{selectIds: $("#${id}Id").val()},
    		    content: "${ctx}/tag/treeselect?url="+encodeURIComponent("${url}")+"&module=${module}&checked=${checked}&extId=${extId}&isAll=${isAll}" ,
    		    btn: ['确定', '关闭']
        	       ,yes: function(index, layero){ //或者使用btn1
    						var tree = layero.find("iframe")[0].contentWindow.tree;//h.find("iframe").contents();
    						var ids = [], names = [], nodes = [];
    						if ("${checked}" == "true"){
    							nodes = tree.getCheckedNodes(true);
    						}else{
    							nodes = tree.getSelectedNodes();
    						}
    						for(var i=0; i<nodes.length; i++) {//<c:if test="${checked && notAllowSelectParent}">
    							if (nodes[i].isParent){
    								continue; // 如果为复选框选择，则过滤掉父节点
    							}//</c:if><c:if test="${notAllowSelectRoot}">
    							if (nodes[i].level == 0){
    								//top.$.jBox.tip("不能选择根节点（"+nodes[i].name+"）请重新选择。");
    								top.layer.msg("不能选择根节点（"+nodes[i].name+"）请重新选择。", {icon: 0});
    								return false;
    							}//</c:if><c:if test="${notAllowSelectParent}">
    							//if (nodes[i].isParent){
    								//top.$.jBox.tip("不能选择父节点（"+nodes[i].name+"）请重新选择。");
    								//layer.msg('有表情地提示');
    							//	top.layer.msg("不能选择父节点（"+nodes[i].name+"）请重新选择。", {icon: 0});
    							//	return false;
    							//}//</c:if><c:if test="${not empty module && selectScopeModule}">
    							if (nodes[i].module == ""){
    								//top.$.jBox.tip("不能选择公共模型（"+nodes[i].name+"）请重新选择。");
    								top.layer.msg("不能选择公共模型（"+nodes[i].name+"）请重新选择。", {icon: 0});
    								return false;
    							}else if (nodes[i].module != "${module}"){
    								//top.$.jBox.tip("不能选择当前栏目以外的栏目模型，请重新选择。");
    								top.layer.msg("不能选择当前栏目以外的栏目模型，请重新选择。", {icon: 0});
    								return false;
    							}//</c:if>
    							ids.push(nodes[i].id);
    							names.push(nodes[i].name);//<c:if test="${!checked}">
    							break; // 如果为非复选框选择，则返回第一个选择  </c:if>
    						}
    						$("#${id}Id").val(ids.join(",").replace(/u_/ig,""));
    						$("#${id}Name").val(names.join(","));
    						$("#${id}Name").focus();
    						top.layer.close(index);
    				    	       },
        	cancel: function(index){ //或者使用btn2
        	           //按钮【按钮二】的回调
        	       }
    		}); 
    	
    	});
    </script>

**开头的前几行代表的是属性，即在引用界面需要注明，例如下面一个前端jsp对其引用后**

**比如上面的树形结构的一个input点击后出现树形结构选择框，如图所示：**  
![前端页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzAzMjE5_size_16_color_FFFFFF_t_70]  
因为最开始一直在纠结如何选择一个后，传递该对象的多个属性，经过研究发现可以通过隐藏域传递关键属性，然后后台通过这个关键属性去查询其他属性，交由后台进行处理。

## 对于引用的treeselect.tag中的属性，需要哪个功能就在input中加入这个属性。 ##

**例如上面我们需要多选就加入的checked=“true” ，  
不选择父节点 notAllowSelectParent="true"**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzAzMjE5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/12e33e11481143b6bd597ee40cccbd6d.png