关于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<TreeModel> areaTreeModels= new ArrayList<TreeModel>();        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">        <!--显示zTree-->        <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();                      //最后需要刷新才会显示；

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