jeesite中的ztree应用

话不多说，直接开始一二三。

jeesite页面上通过以自定义jstl <sys:treeselect >方式引入树形选择

1、<sys:treeselect id="company" name="company.id" value="${user.company.id}" labelName="company.name" labelValue="${user.company.name}" 

title="公司" url="/sys/office/treeData?type=1" cssClass="input-small" allowClear="true"/>

     

首先通过sys:treeselect(taglib.jsp) 找到web-inf/tags/sys/treeselect.tag文件

2、treeselect.tag 

     第一个作用是局部页面样式。

<div class="input-append">
<input id="${id}Id" name="${name}" class="${cssClass}" type="hidden" value="${value}"/>
<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;':''}">&nbsp;<i class="icon-search"></i>&nbsp;</a>&nbsp;&nbsp;
</div>
 
   第二个作用:接收传参。通过sys:treeselect 后面的key=value...具体可以看下treeselect.tag的解释
   第三个作用:触发点击事件。引用了jbox.js
   top.$.jBox.open("iframe:${ctx}/tag/treeselect?url="+encodeURIComponent("${url}")+"&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){
   top:调用父类窗口（如果去除，效果还在，不过会被弹出窗口挡住）
   $.jBox.open ：指打开一个窗口以iframe的形式，冒号后面跟着url，ajaxData是额外的参数
   submit:function(v, h, f)：/* 点击状态按钮后的回调函数，返回true时表示关闭窗口，参数有三个，v表示所点的按钮的返回值，h表示窗口内容的jQuery对象，f表示窗口内容里的form表单键值 */


3、通过${ctx}/tag/treeselect 跳转到modules/sys/tagTreeselect.jsp 页面


4、tagTreeselect是jbox生成的iframe里的内容。
   script里全是ztree的配置，ajax，回调函数，和对节点的操作。