sys:treeselect树图插件的使用

Html页面调用:

<div class="control-group">
    <label class="control-label">事件源:</label>
	<div class="controls">
	    <sys:treeselect id="eventSource" name="eventSource.id" value="${task.eventSource.id}" labelName="eventSource.name" labelValue="${task.eventSource.name}" 
            title="事件源" url="/mes/wechat/mesEventSource/treeData" extId="${task.eventSource.id}" cssClass="required" notAllowSelectParent="true" allowClear="true"/>
	    <span class="help-inline"><font color="red">*</font></span>
	</div>
</div>

js里面:


//Treeselect自定义回调函数,对应treeselect.tag的同名函数
function eventSourceTreeselectCallBack(eventSourceIds, eventSourceNames){
    //根据事件源ID判断该事件是否为定时事件
    $.ajax({
	    type:"POST",
		url:"${ctx}/mes/wechat/mesEventSource/isTimer",
		data:{"id" : eventSourceIds},
		dataType: "json",
		success:function(res){
		    if(res.isTimer==1){ 
		        //定时事件
		        $("#eventSourceCode input").val(res.code);
		        $("#name").val(eventSourceNames);  //当选择不同的事件源,任务名称也随之而变。默认任务名称和事件源名称相同。
		    }else{
		         //普通事件
		         $("#eventSourceName").val(""); //将事件源input框值清空
		         $("#eventSourceCode input").val("");
		         $("#name").val("");
		         msgx("只可添选定时事件,请重选!");
		    }       
		}	        
    });     		
}			

附录:sys:treeselect  控件代码

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/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"%>

<script type="text/javascript">
	$("#${id}Button, #${id}Name").click(function(){
		// 是否限制选择,如果限制,设置为disabled
		if ($("#${id}Button").hasClass("disabled")){
			return true;
		}
		// 正常打开	
		top.$.jBox.open("iframe:${ctx}/tag/treeselect?url="+encodeURIComponent(rquestUrl)+"&module=${module}&checked=${checked}&extId=${extId}&isAll=${isAll}", "选择${title}", 300, 420, {
			ajaxData:{selectIds: $("#${id}Id").val()},buttons:{"确定":"ok", ${allowClear?"\"清除\":\"clear\", ":""}"关闭":true}, submit:function(v, h, f){
				if (v=="ok"){
					var tree = h.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+")请重新选择。");
							return false;
						}//</c:if><c:if test="${notAllowSelectParent}">
						if (nodes[i].isParent){
							top.$.jBox.tip("不能选择父节点("+nodes[i].name+")请重新选择。");
							return false;
						}//</c:if><c:if test="${not empty module && selectScopeModule}">
						if (nodes[i].module == ""){
							top.$.jBox.tip("不能选择公共模型("+nodes[i].name+")请重新选择。");
							return false;
						}else if (nodes[i].module != "${module}"){
							top.$.jBox.tip("不能选择当前栏目以外的栏目模型,请重新选择。");
							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,"")).change();
					$("#${id}Name").val(names.join(","));
				}//<c:if test="${allowClear}">
				else if (v=="clear"){
					$("#${id}Id").val("");
					$("#${id}Name").val("");
                }//</c:if>
				if(typeof ${id}TreeselectCallBack == 'function'){
					${id}TreeselectCallBack(v, h, f);
				}
			}, loaded:function(h){
				$(".jbox-content", top.document).css("overflow-y","hidden");
			}
		});
	});
</script>

 

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要安装treeselect插件,您可以按照以下步骤进行操作: 1. 下载插件:首先,您需要从可靠的资源网站或GitHub上下载treeselect插件的安装文件。 2. 引入插件文件:将下载的插件文件解压缩,并将其放置在您项目的合适位置。然后,在您的HTML文件中,使用`<script>`标签引入插件的主要JavaScript文件。例如: ```html <script src="path/to/treeselect.js"></script> ``` 3. 添加样式表:如果treeselect插件有附带的CSS文件,您还需要在HTML文件中引入它们。例如: ```html <link rel="stylesheet" href="path/to/treeselect.css"> ``` 4. 初始化插件:在您的JavaScript代码中,找到适当的位置,并使用合适的参数初始化treeselect插件。例如: ```javascript layui.use(['treeselect'], function(){ var treeselect = layui.treeselect; treeselect.render({ // 配置项 }); }); ``` 请注意,上面的代码中的`treeselect.render`方法中的`//配置项`是您可以根据您的需求进行自定义的配置选项。您可以参考treeselect插件的官方文档或示例代码,了解可以使用的配置项和参数。 这样,您就成功地安装了treeselect插件,并且可以在您的项目中使用它了。<span class="em">1</span> #### 引用[.reference_title] - *1* [treeSelect.zip](https://download.csdn.net/download/qq_39668819/12233415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值