关于java异步加载可多选的树形结构（需要导入layer和zTree）（可编辑）

    概要：（运用ZTREE）定义输入框，当点击输入框则弹出多选树形结构图。多选完毕后点击确认按钮，在输入框加载所选中的值。
    （如为编辑修改操作，责在最后添加默认选中的方法即可）

（zTree api文档）（layer api文档）

定义输入框（如果需要传递的不是所显示的值则在下定义一个隐藏域即可）

》》》jsp
 <div>
      <label>发送区划：label>
      <input placeholder="请选择发送区划" readonly  id="sendArea" onclick="selectArea()" value="${sendAreaNames }" type="text" />
      <input type="hidden" id="sendAreaId" value="${sendAreaIds }">
 div>

定义点击事件selectArea()

》》》script

    function selectArea(){
    openPolUnitTree('选择发送区划');
    };

function openPolUnitTree(title){
    layer.open({
        type: 2,
        title: title,   //弹框标题
        fix: false,
        shadeClose: true,
        maxmin: false,
        area: ['20%', '70%'],   //宽度，高度
        content: '${base}/base/news/area_tree/'    //后台请求的方法
    });
    return false;
}

后台跳转方法

》》》java
    /**
     * 加载区划的树形图，传递到弹框中显示
     */
    @RequestMapping("/area_tree")
    public String area_tree( ModelMap model,HttpServletRequest request){

        //得到需要显示的树形图放入到
        List areaTreeModels= new ArrayList();
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
        model.addAttribute("areaTreeModels",JSON.toJSONString(areaService.getAreaTreeModels(areaTreeModels,basePath,true)));
        return "base/article/area_tree";    //弹框的jsp路径
    }

定义页面弹框中的显示位子 和确认取消按钮

》》》jsp
    <div class="zTreeDemoBackground left">
        
        <ul id="treeDemo" class="ztree">ul>       
        <div style="text-align: center;margin-bottom: 50px">
         <button class="m-btn maincolor main-btn" onclick="sel()" type="button"><span>确认span>button>
        <button class="m-btn maincolor main-btn" onclick="closes()" type="button"><span>取消span>button>
         div>
    div>

加载区划的多选树形图

》》》script
        //定义需要传递的数组集合
        var treeNames = new Array();        //名称的集合
        var treeIds = new Array();          //id的集合

        var setting = {
            check: {
                enable: true        //设置可以勾选多个
            },
            view: {
                showIcon: showIconForTree
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: zTreeOnCheck       //该方法为勾选中的时候将该值放入数组，取消勾选则剔除
            }
        };
    var zNodes=${areaTreeModels};      //通过el表达式取到JSON格式的树形图数据


    var treeObj = $.fn.zTree.init($("#treeDemo"), setting,zNodes);      //加载树形图

    //显示子孙节点
    var nodes = treeObj.getNodes();
    //设置展开一级菜单
     for (var i = 0; i < nodes.length; i++) { //设置节点展开
         treeObj.expandNode(nodes[i], true, false, true);   //设置第三个参数  如果是true展开子孙节点否则只展开一级节点
     }

         function showIconForTree(treeId, treeNode) {
        return !treeNode.isParent;
    };
    //不能选中节点，只能勾选

    function zTreeOnCheck(event, treeId, treeNode) {
        //alert(treeNode.id + ", " + treeNode.name + "," + treeNode.checked+ ", " + treeId+","+event);
        //为防止选中的数据出错    设置当子节点被勾选的时候父节点不能被操作，但不影响该节点的其他子节点，当取消勾选也会主动取消父节点不可操作属性

        //该方法第三个参数为是否影响其父所有父几点，第四个参数为其子节点（具体可查看官网api）
        treeObj.setChkDisabled(treeNode.getParentNode(), treeNode.checked,true ,false);     
        //当勾选添加数据带数组中
        if(treeNode.checked){
            treeNames.push(treeNode.name);
            treeIds.push(treeNode.id);
        }else{  //相反从数组中剔除
            treeNames.splice(jQuery.inArray(treeNode.name,treeNames),1); 
            treeIds.splice(jQuery.inArray(treeNode.id,treeIds),1); 
        }
    };



    //点击取消关闭该弹框
    function closes(){
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
    }

    //点击确认把选中的值显示到页面的input框中（有键的话加载到对应的隐藏域中）
    //确认按钮点击事件 
    function sel(){

        var names = treeNames.join(",");        //所有选中的集合数组转String  
        var ids = treeIds.join(",");
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.$("#sendArea").val(names);      //加载到对应的input框中
        parent.$("#sendAreaId").val(ids);
        if(parent.loadRole){
            parent.loadRole();
        }
        parent.layer.close(index);

    }

当需要有修改操作时，加上此方法在显示出多选树形图的时候默认勾选已有的内容

    //*********************默认选中节点**************************************//
    function filter(node) {             //查询节点
        return ($.inArray(node.id, treeIds)!=-1);
    }
    var idss = parent.$("#sendAreaId").val();      //得到input框中的选中的数组的String类型的值
    treeIds = idss.split(",");              //转化成数组
    treeNames = new Array();                
    var nodex = treeObj.getNodesByFilter(filter); // 查找节点集合 找到需要被勾选的数组

    for(var j= 0 ; j< nodex.length;j++){
        nodex[j].checked=true;                      //勾选
        treeNames.push(nodex[j].name);      
    }
     //*********************默认选中节点**************************************//
    //刷新
    treeObj.refresh();                      //最后需要刷新才会显示；

如有侵犯版权问题请及时和我取得联系，不足之处请大家指出。谢谢