jquery_ztree 异步加载

<%
var headerPart = {
%>
<% include("/include/treeview.html"){} %>
<script type="text/javascript">
    var key, lastValue = "", nodeList = [], type = getQueryString("type", "${url}");
    var tree, setting = {view:{selectedMulti:false,dblClickExpand:false},check:{enable:"${checked}",nocheckInherit:true},
        async:{enable:true,url:"${ctx}/sys/area/listZTree",autoParam:["id"]},
        data:{simpleData:{enable:true}},callback:{
onClick:function(event, treeId, treeNode){
tree.expandNode(treeNode);
},onCheck: function(e, treeId, treeNode){
var nodes = tree.getCheckedNodes(true);
for (var i=0, l=nodes.length; i<l; i++) {
tree.expandNode(nodes[i], true, false, false);
}
return false;
},onAsyncSuccess: function(event, treeId, treeNode, msg){
var nodes = tree.getNodesByParam("pId", treeNode.id, null);
for (var i=0, l=nodes.length; i<l; i++) {
try{tree.checkNode(nodes[i], treeNode.checked, true);}catch(e){}
//tree.selectNode(nodes[i], false);
}
selectCheckNode();
},onDblClick: function(){
<% if(has(checked)&&checked=="false"){%>
top.$.jBox.getBox().find("button[value='ok']").trigger("click");
<%}%>
}
}
    };
    function expandNodes(nodes) {
        if (!nodes) return;
        for (var i=0, l=nodes.length; i<l; i++) {
            tree.expandNode(nodes[i], true, false, false);
            if (nodes[i].isParent && nodes[i].zAsync) {
                expandNodes(nodes[i].children);
            }
        }
    }
    $(document).ready(function(){
    debugger;
        $.get("${ctx}/sys/area/listZTree", function(zNodes){
            // 初始化树结构
            tree = $.fn.zTree.init($("#tree"), setting, zNodes);


            /* // 默认展开一级节点
            var nodes = tree.getNodesByParam("level", 0);
            for(var i=0; i<nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
            } */
           /*  //异步加载子节点（加载用户）
            var nodesOne = tree.getNodesByParam("isParent", true);
            for(var j=0; j<nodesOne.length; j++) {
                tree.reAsyncChildNodes(nodesOne[j],"!refresh",true);
            }
            selectCheckNode(); */
        });
        key = $("#key");
        key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);
        key.bind('keydown', function (e){if(e.which == 13){searchNode();}});
        //setTimeout("search();", "300");
    });


    // 默认选择节点
    function selectCheckNode(){
        var ids = "${selectIds}".split(",");
        for(var i=0; i<ids.length; i++) {
            var node = tree.getNodeByParam("id", (type==3?"u_":"")+ids[i]);
            if("${checked}" == "true"){
                try{tree.checkNode(node, true, true);}catch(e){}
                tree.selectNode(node, false);
            }else{
                tree.selectNode(node, true);
            }
        }
    }
    function focusKey(e) {
        if (key.hasClass("empty")) {
            key.removeClass("empty");
        }
    }
    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
        searchNode(e);
    }


    //搜索节点
    function searchNode() {
        // 取得输入的关键字的值
        var value = $.trim(key.get(0).value);


        // 按名字查询
        var keyType = "name";


        // 如果和上次一次，就退出不查了。
        if (lastValue === value) {
            return;
        }


        // 保存最后一次
        lastValue = value;


        var nodes = tree.getNodes();
        // 如果要查空字串，就退出不查了。
        if (value == "") {
            showAllNode(nodes);
            return;
        }
        hideAllNode(nodes);
        nodeList = tree.getNodesByParamFuzzy(keyType, value);
        updateNodes(nodeList);
    }


    //隐藏所有节点
    function hideAllNode(nodes){
        nodes = tree.transformToArray(nodes);
        for(var i=nodes.length-1; i>=0; i--) {
            tree.hideNode(nodes[i]);
        }
    }


    //显示所有节点
    function showAllNode(nodes){
        nodes = tree.transformToArray(nodes);
        for(var i=nodes.length-1; i>=0; i--) {
            /* if(!nodes[i].isParent){
                tree.showNode(nodes[i]);
            }else{ */
            if(nodes[i].getParentNode()!=null){
                tree.expandNode(nodes[i],false,false,false,false);
            }else{
                tree.expandNode(nodes[i],true,true,false,false);
            }
            tree.showNode(nodes[i]);
            showAllNode(nodes[i].children);
            /* } */
        }
    }


    //更新节点状态
    function updateNodes(nodeList) {
        tree.showNodes(nodeList);
        for(var i=0, l=nodeList.length; i<l; i++) {


            //展开当前节点的父节点
            tree.showNode(nodeList[i].getParentNode());
            //tree.expandNode(nodeList[i].getParentNode(), true, false, false);
            //显示展开符合条件节点的父节点
            while(nodeList[i].getParentNode()!=null){
                tree.expandNode(nodeList[i].getParentNode(), true, false, false);
                nodeList[i] = nodeList[i].getParentNode();
                tree.showNode(nodeList[i].getParentNode());
            }
            //显示根节点
            tree.showNode(nodeList[i].getParentNode());
            //展开根节点
            tree.expandNode(nodeList[i].getParentNode(), true, false, false);
        }
    }
</script>
<% }; %>
<% layout("/layouts/micro.html",{headerSection:headerPart}){ %>
<div style="padding:10px 0 0 10px;">
  <div class="layui-block">
    <input type="text" class="empty layui-input" id="key" name="key" maxlength="50" style="width:60%;" placeholder="请输入关键字搜索"/>
  </div>
  </div>
<div id="tree" class="ztree" style="padding:15px 10px;"></div>

<%}%>

tag

<input id="${id}Id" name="${name}" class="${cssClass!}" type="hidden" value="${value}"/>
<input type="text" id="${id}Name" name="${labelName}" value="${labelValue}" class="layui-input ${cssClass!} ${has(allowInput)&&(allowInput!=false)?'':'layui-disabled'}" style="${cssStyle!} color:black!important;" lay-verify="${has(dataMsgRequired)?'required':''}" placeholder="点击选择" autocomplete="off" class="layui-input">
<script type="text/javascript">
$("#${id}Name").click(function(){
// 正常打开
layui.layer.open({
  type: 2,
  title: "选择${title}",
  shadeClose: true,
  shade: 0.3,
  area: ['330px', '420px'],
  content: "${ctx}/tag/treeAjaxselect?url="+encodeURIComponent("${url}")+"&module=${module!}&checked=${checked!}&extId=${extId!}&isAll=${isAll!}",
  btn: ['确定', '关闭'],
  yes: function(index, layero){
var tree = window[layero.find('iframe')[0]['name']].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(has(checked)&&(checked==true)&&has(notAllowSelectParent)&&(notAllowSelectParent==true)){%>
if (nodes[i].isParent){
continue; // 如果为复选框选择，则过滤掉父节点
}
<%}%>
                    <%if(has(notAllowSelectRoot)&&(notAllowSelectRoot==true)){%>
if (nodes[i].level == 0){
layer.msg("不能选择根节点（"+nodes[i].name+"）请重新选择。");
return false;
}
<%}%>
                    <%if (has(notAllowSelectParent)&&(notAllowSelectParent==true)){%>
if (nodes[i].isParent){
layer.msg("不能选择父节点（"+nodes[i].name+"）请重新选择。");
return false;
}
<%}%>
                    <%if (isNotEmpty(module)&& has(selectScopeModule)&&selectScopeModule==true){%>
if (nodes[i].module == ""){
layer.msg("不能选择公共模型（"+nodes[i].name+"）请重新选择。");
return false;
}else if (nodes[i].module != "${module}"){
layer.msg("不能选择当前栏目以外的栏目模型，请重新选择。");
return false;
}
                    <%}%>
ids.push(nodes[i].id);
names.push(nodes[i].name);
                    <%if (has(checked)&&checked!=true){%>
break; // 如果为非复选框选择，则返回第一个选择
                    <%}%>
}
$("#${id}Id").val(ids.join(",").replace(/u_/ig,""));
$("#${id}Name").val(names.join(","));
layui.layer.close(index);
  },
  btn2: function(index, layero){
  layui.layer.close(index);
  }
});
});

</script>

别的地方引用

<#treeAjaxselect id="area" name="area.id" value="${office.area.id!}" labelName="area.name" labelValue="${office.area.name!}"
title="区域" url="/sys/area/listZTree?id=0" cssClass="input-midlle"  />

后台

@RequiresPermissions("sys:stArea:view")
@RequestMapping(value = "listZTree")
@ResponseBody
public List<Map<String, Object>> listZTree(Area area,HttpServletRequest request, HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
if(area==null||StringUtils.isEmpty(area.getId())){
area=new Area();
area.setId("0");
}else {
Area queryArea=new Area();
queryArea.setId(area.getId());
area=queryArea;
}
List<Area> list = areaService.findListTree(area);
for (int i=0; i<list.size(); i++){
Area e = list.get(i);
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
map.put("pId", e.getParentId());
map.put("name", e.getName());
if(e.getChildSum()>0){
map.put("isParent", true);
}
mapList.add(map);
}
return mapList;

}

学习地址http://www.treejs.cn/v3/api.php