首页 > 分享 > jeesite的treeselect使用总结

jeesite的treeselect使用总结

花匠小妙招
2025-11-30 10:34

场景1

在选择了一个选项后，要根据这个选项值去后台加载更多的内容到页面

解决思路

1.onchange监听输入框值变化，js出发方法ajax去取数据

2.treeselect这个js里面设置回调函数，选择后回调

本人采用回调方法实现：

treeselect.tag里面代码如下：

<%@ 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"%>

<%@ attribute name="dataMsgRequired" type="java.lang.String" required="false" description=""%>

<%@ attribute name="callbackFlag" type="java.lang.Boolean" required="false" description=""%>

<%@ attribute name="urlRefreshFlag" type="java.lang.Boolean" required="false" description=""%>

<input id="${id}Name" name="${labelName}" ${allowInput?'':'readonly="readonly"'} type="text" value="${labelValue}" data-msg-required="${dataMsgRequired}"

class="${cssClass}" style="${cssStyle}"/><a id="${id}Button" href="javascript:" class="btn ${disabled} ${hideBtn ? 'hide' : ''}" style="${smallBtn?'padding:4px 2px;':''}"> <i class="icon-search"></i> </a>  

</div>

$("#${id}Button, #${id}Name").click(function(){

if ($("#${id}Button").hasClass("disabled")){

return true;

}

var rquestUrl = "${url}";

if("${urlRefreshFlag}" == "true"){

rquestUrl = refreshUrl();

}

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;

var ids = [], names = [], nodes = [];

if ("${checked}" == "true"){

nodes = tree.getCheckedNodes(true);

}else{

nodes = tree.getSelectedNodes();

}

for(var i=0; i<nodes.length; i++) {

if (nodes[i].isParent){

continue;

}

if (nodes[i].level == 0){

top.$.jBox.tip("不能选择根节点（"+nodes[i].name+"）请重新选择。");

return false;

}

if (nodes[i].isParent){

top.$.jBox.tip("不能选择父节点（"+nodes[i].name+"）请重新选择。");

return false;

}

if (nodes[i].module == ""){

top.$.jBox.tip("不能选择公共模型（"+nodes[i].name+"）请重新选择。");

return false;

}else if (nodes[i].module != "${module}"){

top.$.jBox.tip("不能选择当前栏目以外的栏目模型，请重新选择。");

return false;

}

ids.push(nodes[i].id);

names.push(nodes[i].name);

break;

}

$("#${id}Id").val(ids.join(",").replace(/u_/ig,""));

$("#${id}Name").val(names.join(","));

if("${callbackFlag}" == "true"){

callback(ids.join(",").replace(/u_/ig,""), names.join(","));

}

else if (v=="clear"){

$("#${id}Id").val("");

$("#${id}Name").val("");

}

if(typeof ${id}TreeselectCallBack == 'function'){

${id}TreeselectCallBack(v, h, f);

}

}, loaded:function(h){

$(".jbox-content", top.document).css("overflow-y","hidden");

}

});

</script>

javascript

运行

在里面加了一个属性<%@ attribute name="callbackFlag" type="java.lang.Boolean" required="false" description=""%>

设置完值后回调函数：

$("#${id}Id").val(ids.join(",").replace(/u_/ig,""));
                   $("#${id}Name").val(names.join(","));
                   if("${callbackFlag}" == "true"){
                       callback(ids.join(",").replace(/u_/ig,""), names.join(","));// 回调自定义函数
                   }

使用时：

<sys:treeselect id="baseProductCode0"
                       name="baseDeatilDtoList[0].productId" value="" labelName=""
                       labelValue="" title="基础模块" allowInput="true"
                       notAllowSelectParent="true" callbackFlag="true" checked="true"
                       notAllowSelectRoot="true" url="/product/categoryProduct/treeData"
                       cssClass="" />

这种开关式的设计结构灵活，易于扩展，思路值得借鉴