layui组织机构树（treeSelect）

煎饼果子就咖啡

已于 2024-01-10 10:09:38 修改

阅读量703

点赞数 8

文章标签： layui 前端 javascript

于 2024-01-10 08:49:41 首次发布

本文链接：https://blog.csdn.net/weixin_49498516/article/details/135494233

版权

前端

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>智慧养老平台</title>
    <%@include file="../../basePage.jsp" %>
</head>
<body>
<div style="width: 700px;">
    <form id="form" class="layui-form" action="" lay-filter="form" style="width: 700px">
        <input type="hidden" id="id" name="id" value="${userinfo.id}">
        <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <c:if test="${userinfo.id ne null}">
                    <input type="text" id="userid" name="userid" lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input" maxlength="10" readonly>
                </c:if>
                <c:if test="${userinfo.id eq null}">
                    <input type="text" id="userid" name="userid" lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input" maxlength="10">
                </c:if>
            </div>
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" maxlength="10">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="tel" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" maxlength="50">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <select name="sex" lay-verify="required" lay-search="">
                        <option value="">请选择</option>
                        <c:forEach items="${fns:getDictList('SEX')}" var="dict">
                            <option value="${dict.dictValue}">${dict.dictName}</option>
                        </c:forEach>
                    </select>
                </div>

                <label class="layui-form-label"><span style="color: red">*</span>部门</label>
                <div class="layui-input-inline">
<%--                    <select name="departCode" lay-filter="departCode" lay-search="" id="departCode">--%>
<%--                        <option value="">请选择</option>--%>
<%--                        <c:forEach items="${kframeDepartments}" var="dept">--%>
<%--                            <option value="${dept.departCode}"<c:if  test="${dept.departCode==userinfo.departCode}"> selected </c:if>>${dept.departName}</option>--%>
<%--                        </c:forEach>--%>
<%--                    </select>--%>
                       <input type="text" id="tree" lay-filter="tree" class="layui-input" autocomplete="off">
                </div>

                <label class="layui-form-label" style="display: none;">部门名称</label>
                <div class="layui-input-inline" style="display: none;">
                    <input type="text" id="deptname" name="deptname" placeholder="请输入部门名称" autocomplete="off" class="layui-input" maxlength="30">
                </div>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">行政区域</label>
            <div class="layui-input-inline">
                <select name="provinceid" lay-filter="recProvince" lay-verify="required" id="recProvince">
                    <option value="">请选择</option>
                    <c:forEach items="${recProvinceList}" var="province">
                        <option value="${province.code}">${province.recprovincename}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-input-inline" id="recCityDiv">
                <select name="cityid" lay-filter="recCity" id="recCity">
                    <option value="">请选择</option>
                    <c:forEach items="${recCityList}" var="city">
                        <option value="${city.code}">${city.reccityname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" id="recDistrictDiv">
                <select name="districtid" lay-filter="recDistrict" id="recDistrict">
                    <option value="">请选择</option>
                    <c:forEach items="${recDistrictList}" var="district">
                        <option value="${district.code}">${district.recdistrictname}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-input-inline" id="recTownDiv">
                <select name="townid" lay-filter="recTown" id="recTown">
                    <option value="">请选择</option>
                    <c:forEach items="${recTownList}" var="town">
                        <option value="${town.code}">${town.rectownname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" id="recCommunityDiv">
                <select name="communityid" lay-filter="recCommunity" id="recCommunity">
                    <option value="">请选择</option>
                    <c:forEach items="${recCommunityList}" var="community">
                        <option value="${community.code}">${community.reccommunityname}</option>
                    </c:forEach>
                </select>
            </div>

            <div class="layui-input-inline" id="recVillageDiv">
                <select name="villageid" lay-filter="recVillage" id="recVillage">
                    <option value="">请选择</option>
                    <c:forEach items="${recVillageList}" var="village">
                        <option value="${village.code}">${village.recvillagename}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">组织机构</label>
            <div class="layui-input-inline">
                <select name="orgprovinceid" lay-filter="province" lay-verify="required" id="province">
                    <option value="">请选择</option>
                    <c:forEach items="${provinceList}" var="province">
                        <option value="${province.code}">${province.orgprovincename}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-input-inline" id="orgCityDiv">
                <select name="orgcityid" lay-filter="city" id="city">
                    <option value="">请选择</option>
                    <c:forEach items="${cityList}" var="city">
                        <option value="${city.code}">${city.orgcityname}</option>
                    </c:forEach>
                </select>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" id="orgDistrictDiv">
                <select name="orgdistrictid" lay-filter="district" id="district">
                    <option value="">请选择</option>
                    <c:forEach items="${districtList}" var="district">
                        <option value="${district.code}">${district.orgdistrictname}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-input-inline" id="orgTownDiv">
                <select name="orgtownid" lay-filter="town" id="town">
                    <option value="">请选择</option>
                    <c:forEach items="${townList}" var="town">
                        <option value="${town.code}">${town.orgtownname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" id="orgVillageDiv">
                <select name="orgvillageid" lay-filter="village" id="village">
                    <option value="">请选择</option>
                    <c:forEach items="${villageList}" var="village">
                        <option value="${village.code}">${village.orgvillagename}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark" style="width: 80%;" maxlength="50"></textarea>
            </div>
        </div>
        <button class="layui-btn" lay-submit="" lay-filter="submitBtn" style="display: none">提交</button>
    </form>
</div>
<script>


    layui.config({
        base: "${basePath}plugins/layui/lay/modules/"        //eleTree.js所在目录
    }).use(['table','layer','treeSelect'], function() {
        var table = layui.table;
        var layer = layui.layer;  //layer初始化
        var treeSelect = layui.treeSelect;

        //点击选中(单选)
        //单击行勾选checkbox事件
        $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            //获取已选中列并取消选中
            var trs = tableDiv.find(".layui-unselect.layui-form-checkbox.layui-form-checked").parent().parent().parent();
            for(var i = 0;i<trs.length;i++){
                var ind = $(trs[i]).attr("data-index");
                if(ind!=index){
                    var checkCell = tableDiv.find("tr[data-index=" + ind + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
                    if (checkCell.length>0) {
                        checkCell.click();
                    }
                }
            }
            //选中单击行
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length > 0) {
                checkCell.click();
            }
        });
        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
            e.stopPropagation();
        });

        var areaId;
        //下拉树
        treeSelect.render({
            elem: '#tree',
            data: '${basePath}depart/auth/queryDepartListTree.do',
            <%--data: '${basePath}area/auth/queryAreaAllByOrg.do',--%>
            type: 'get',
            // 点击回调
            click: function(d){
                areaId = d.current.id;
            },
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
                treeSelect.checkNode('tree', ${userinfo.departCode});
                console.log($('#tree').val());
//                获取zTree对象，可以调用zTree方法
                var treeObj = treeSelect.zTree('tree');
                console.log(treeObj);
//                刷新树结构
                treeSelect.refresh('tree');
            }
        });

        //头工具栏事件
        table.on('toolbar(basicArchives)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        area: ['100%', '100%'], //宽高
                        content: '${basePath}basicArchives/auth/toEditBasicArchives.do',
                        title:"新增",
                    });
                    break;
                case 'edit':
                    var data = checkStatus.data;
                    if(data.length!=1){
                        layer.alert("请选择一条数据");
                        return;
                    }
                    layer.open({
                        type: 2,
                        area: ['100%', '100%'], //宽高
                        content: '${basePath}basicArchives/auth/toEditBasicArchives.do?id='+data[0].id,
                        title:"修改",
                    });
                    break;
                case 'check':
                    var data = checkStatus.data;
                    if(data.length!=1){
                        layer.alert("请选择一条数据");
                        return;
                    }
                    layer.open({
                        type: 2,
                        area: ['100%', '100%'], //宽高
                        content: '${basePath}basicArchives/auth/toCheckBasicArchives.do?id='+data[0].id,
                        title:"查看",
                    });
                    break;
                case 'del':
                    var data = checkStatus.data;
                    if(data.length!=1){
                        layer.alert("请选择一条数据");
                        return;
                    }
                    layer.confirm('确定要删除吗？', function(index){
                        $.ajax({
                            type: "GET",
                            url: "${basePath}basicArchives/auth/delBasicArchives.do?id="+data[0].id,
                            data:{},
                            success: function(res){
                                if (res.code == '200') {
                                    layer.msg(res.msg);
                                    layui.table.reload("tableReload",{page:{curr:1}});
                                } else if(res.code == '500'){
                                    layer.msg(res.msg);
                                }
                            }
                        })
                    })
                    break;
                case 'cancel':
                    var data = checkStatus.data;
                    if(data.length!=1){
                        layer.alert("请选择一条数据");
                        return;
                    }
                    layer.confirm('确定要注销吗？', function(index){
                        $.ajax({
                            type: "GET",
                            url: "${basePath}basicArchives/auth/cancelBasicArchives.do?id="+data[0].id,
                            data:{},
                            success: function(res){
                                if (res.code == '200') {
                                    layer.msg(res.msg);
                                    layui.table.reload("tableReload");
                                } else if(res.code == '500'){
                                    layer.msg(res.msg);
                                }
                            }
                        })
                    })
                    break;
                case 'import':
                    layer.open({
                        id:"importDialog",
                        type: 2,
                        area: ['25%', '50%'], //宽高
                        content: '${basePath}basicArchives/auth/toImportExcel.do',
                        title:"导入",
                    });
                    break;
                case 'download':
                    downloadTemp();
                    break;
            };
        });
        //搜索
        var active = {
            reload: function(){
                //执行重载
                table.reload('tableReload',{
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        basicNo: $("#basicNo").val(),
                        elderName:$("#elderName").val(),
                        cardNo:$("#cardNo").val(),
                        archivesStatus:$("#archivesStatus").val(),
                        areaId:areaId
                    }
                });
            },
            reset:function() {
                treeSelect.revokeNode('tree',null);
                areaId = "";
                $("#basicNo").val("");
                $("#elderName").val("");
                $("#cardNo").val("");
                $('#form')[0].reset();
                layui.form.render("select");
            }
        };
        $('.searchDiv .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });


    //上级不为空时显示下一级
    var recProvince = "${userinfo.provinceid}";
    var recCity = "${userinfo.cityid}";
    if(recProvince==''&&recCity=='') {
        $("#recCityDiv").css("display", "none");
    }else{
        $("#recDistrictDiv").css("display", "");
    }
    var recDistrict = "${userinfo.districtid}";
    if(recCity==''&&recDistrict=='') {
        $("#recDistrictDiv").css("display","none");
    }else{
        $("#recTownDiv").css("display","");
    }
    var recTown = "${userinfo.townid}";
    if(recDistrict==''&&recTown=='') {
        $("#recTownDiv").css("display","none");
    }else{
        $("#recVillageDiv").css("display","");
    }
    var recCommunity = "${userinfo.communityid}";
    if(recTown==''&&recCommunity=='') {
        $("#recCommunityDiv").css("display","none");
    }else{
        $("#recVillageDiv").css("display","");
    }
    var recVillage = "${userinfo.villageid}";
    if(recCommunity==''&&recVillage=='') {
        $("#recVillageDiv").css("display","none");
    }

    var province = "${userinfo.orgprovinceid}";
    var city = "${userinfo.orgcityid}";
    if(province==''&&city=='') {
        $("#orgCityDiv").css("display","none");
    }else{
        $("#orgDistrictDiv").css("display","");
    }
    var district = "${userinfo.orgdistrictid}";
    if(city==''&&district=='') {
        $("#orgDistrictDiv").css("display","none");
    }else{
        $("#orgTownDiv").css("display","");
    }
    var town = "${userinfo.orgtownid}";
    if(district==''&&town=='') {
        $("#orgTownDiv").css("display","none");
    }else{
        $("#orgVillageDiv").css("display","");
    }
    var village = "${userinfo.orgvillageid}";
    if(town==''&&village=='') {
        $("#orgVillageDiv").css("display","none");
    }

    layui.use('form', function(){
        var form = layui.form;

        //级联组织机构省
        form.on('select(province)', function(data){
            $("#orgCityDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#city").html(html);
            $("#district").html(html);
            $("#town").html(html);
            $("#village").html(html);
            initOrgCity(data.value);
            form.render('select');
        });
        //初始化组织机构市
        function initOrgCity(provinceId){
            if(typeof(provinceId)=='undefined'){
                provinceId = "${userinfo.orgprovinceid}";
            }
            if(provinceId==''){
                $("#orgCityDiv").css("display","none");
                $("#orgDistrictDiv").css("display","none");
                $("#orgTownDiv").css("display","none");
                $("#orgVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}org/auth/queryOrgCityList.do',
                data: {provinceId:provinceId},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#city").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.orgcityname);
                        $("#city").append(option);
                    });
                }
            });
        }

        //级联组织机构区县
        form.on('select(city)', function(data){
            $("#orgDistrictDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#district").html(html);
            $("#town").html(html);
            $("#village").html(html);
            initOrgDistrict(data.value);
            form.render('select');
        });
        //初始化组织机构区县
        function initOrgDistrict(cityId){
            if(typeof(cityId)=='undefined'){
                cityId = "${userinfo.orgcityid}";
            }
            if(cityId==''){
                $("#orgDistrictDiv").css("display","none");
                $("#orgTownDiv").css("display","none");
                $("#orgVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}org/auth/queryOrgDistrictList.do',
                data: {cityId:cityId},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#district").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.orgdistrictname);
                        $("#district").append(option);
                    });
                }
            });
        }

        //级联组织机构乡镇
        form.on('select(district)', function(data){
            $("#orgTownDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#town").html(html);
            $("#village").html(html);
            initOrgTown(data.value);
            form.render('select');
        });
        //初始化组织机构乡镇
        function initOrgTown(districtId){
            if(typeof(districtId)=='undefined'){
                districtId = "${userinfo.orgdistrictid}";
            }
            if(districtId==''){
                $("#orgTownDiv").css("display","none");
                $("#orgVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}org/auth/queryOrgTownList.do',
                data: {districtId:districtId},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#town").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.orgtownname);
                        $("#town").append(option);
                    });
                }
            });
        }
        //级联组织机构村
        form.on('select(town)', function(data){
            $("#orgVillageDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#village").html(html);
            initOrgVillage(data.value);
            form.render('select');
        });
        //初始化组织机构村
        function initOrgVillage(townId){
            if(typeof(townId)=='undefined'){
                townId = "${userinfo.orgtownid}";
            }
            if(townId==''){
                $("#orgVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}org/auth/queryOrgVillageList.do',
                data: {townId:townId},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#village").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.orgvillagename);
                        $("#village").append(option);
                    });
                }
            });
        }


        // 监听部门是否被选择
        form.on('select(departCode)', function(data){
            //1:拿到select对象：
            var myselect=document.getElementById("departCode");
            //2：拿到选中项的索引：
            var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
            //3:拿到选中项options的value：
            // console.log(myselect.options[index].value);
            //4:拿到选中项options的text：
            // console.log(myselect.options[index].text);
            let text = myselect.options[index].text;

            if(index !== 0){
                $('#deptname').val(text);
            }
            form.render('select');
        });


        //级联行政区划省
        form.on('select(recProvince)', function(data){
            $("#recCityDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#recCity").html(html);
            $("#recDistrict").html(html);
            $("#recTown").html(html);
            $("#recCommunity").html(html);
            $("#recVillage").html(html);
            initRecCity(data.value);
            form.render('select');
        });
        //初始化行政区划市
        function initRecCity(provinceid){
            if(typeof(provinceid)=="undefined"){
                provinceid = "${userinfo.provinceid}";
            }
            if(provinceid==''){
                $("#recCityDiv").css("display","none");
                $("#recDistrictDiv").css("display","none");
                $("#recTownDiv").css("display","none");
                $("#recCommunityDiv").css("display","none");
                $("#recVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}area/auth/queryRecCityList.do',
                data: {provinceid:provinceid},
                dataType: 'json',
                async:false,
                success: function(data){
                    $("#recCity").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.reccityname);
                        $("#recCity").append(option);
                    });
                }
            });
        }

        //级联行政区域市
        form.on('select(recCity)', function(data){
            $("#recDistrictDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#recDistrict").html(html);
            $("#recTown").html(html);
            $("#recCommunity").html(html);
            $("#recVillage").html(html);
            initRecDistrict(data.value);
            form.render('select');
        });
        //初始化行政区域区县
        function initRecDistrict(cityid){
            if(typeof(cityid)=="undefined"){
                cityid = "${userinfo.cityid}";
            }
            if(cityid==''){
                $("#recDistrictDiv").css("display","none");
                $("#recTownDiv").css("display","none");
                $("#recCommunityDiv").css("display","none");
                $("#recVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}area/auth/queryRecDistrictList.do',
                data: {cityid:cityid},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#recDistrict").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.recdistrictname);
                        $("#recDistrict").append(option);
                    });
                }
            });
        }

        //级联行政区域区县
        form.on('select(recDistrict)', function(data){
            $("#recTownDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#recTown").html(html);
            $("#recCommunity").html(html);
            $("#recVillage").html(html);
            initRecTown(data.value);
            form.render('select');
        });
        //初始化行政区域乡镇
        function initRecTown(districtid){
            if(typeof(districtid)=="undefined"){
                districtid = "${userinfo.districtid}";
            }
            if(districtid==''){
                $("#recTownDiv").css("display","none");
                $("#recCommunityDiv").css("display","none");
                $("#recVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}area/auth/queryRecTownList.do',
                data: {districtid:districtid},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#recTown").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.rectownname);
                        $("#recTown").append(option);
                    });
                }
            });
        }

        //级联行政区域乡镇
        form.on('select(recTown)', function(data){
            $("#recCommunityDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#recCommunity").html(html);
            $("#recVillage").html(html);
            initRecCommunity(data.value);
            form.render('select');
        });
        //初始化行政区域社区
        function initRecCommunity(townid){
            if(typeof(townid)=="undefined"){
                townid = "${userinfo.townid}";
            }
            if(townid==''){
                $("#recCommunityDiv").css("display","none");
                $("#recVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}area/auth/queryRecCommunityList.do',
                data: {townid:townid},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#recCommunity").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.reccommunityname);
                        $("#recCommunity").append(option);
                    });
                }
            });
        }

        //级联行政区域社区
        form.on('select(recCommunity)', function(data){
            $("#recVillageDiv").css("display","");
            var html = "<option value=''>请选择</option>";
            $("#recVillage").html(html);
            initRecVillage(data.value);
            form.render('select');
        });
        //初始化行政区域村
        function initRecVillage(communityid){
            if(typeof(communityid)=="undefined"){
                communityid = "${userinfo.communityid}";
            }
            if(communityid==''){
                $("#recVillageDiv").css("display","none");
                return false;
            }
            $.ajax({
                type: 'POST',
                url: '${basePath}area/auth/queryRecVillageList.do',
                data: {communityid:communityid},
                dataType:  'json',
                async:false,
                success: function(data){
                    $("#recVillage").html("<option value=''>请选择</option>");
                    $.each(data, function(key, val) {
                        var option = $("<option>").val(val.code).text(val.recvillagename);
                        $("#recVillage").append(option);
                    });
                }
            });
        }


        //监听提交
        form.on('submit(submitBtn)', function(data){
            var userId = $("#userid").val();
            if(userId.length>10){
                parent.layer.msg("用户ID最多可输入10个文字");
                return false;
            }
            var userName = $("#username").val();
            if(userName.length>10){
                parent.layer.msg("用户姓名最多可输入10个文字");
                return false;
            }
            var email = $("#email").val();
            if(email!=''){
                var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
                if(!myReg.test(email)){
                    parent.layer.msg("请输入正确的邮箱格式");
                    return false;
                }
            }
            var departCode = $("#departCode").val();
            if(departCode==''||departCode==null||departCode==undefined){
                parent.layer.msg("请选择部门");
                return false;
            }
            $.ajax({
                type: "POST",
                url: "${basePath}userInfo/auth/editUserInfo.do",
                data: $("#form").serialize(),//将对象序列化成JSON字符串
                success: function(res){
                    if (res.code == '200') {
                        parent.layer.msg(res.msg,{anim: 0,time: 1000},function() {
                            parent.layer.closeAll();//关闭弹出层
                            parent.layui.table.reload("tableReload");
                        });
                    }else if(res.code == '500'){
                        parent.layer.msg(res.msg);
                    }
                }
            });
            return false;
        });

        //初始化组织机构
        initOrgCity();
        initOrgDistrict();
        initOrgTown();
        initOrgVillage();

        //初始化行政区域
        initRecCity();
        initRecDistrict();
        initRecTown();
        initRecCommunity();
        initRecVillage();

        //表单初始赋值
        form.val('form', {
            "userid": "${userinfo.userid}",
            "username": "${userinfo.username}",
            "sex": "${userinfo.sex}",
            "departCode": "${userinfo.departCode}",
            "tel": "${userinfo.tel}",
            "email": "${userinfo.email}",
            "remark": "${userinfo.remark}",
            "orgprovinceid":"${userinfo.orgprovinceid}",
            "orgcityid":"${userinfo.orgcityid}",
            "orgdistrictid":"${userinfo.orgdistrictid}",
            "orgtownid":"${userinfo.orgtownid}",
            "orgvillageid":"${userinfo.orgvillageid}",
            "provinceid":"${userinfo.provinceid}",
            "cityid":"${userinfo.cityid}",
            "districtid":"${userinfo.districtid}",
            "townid":"${userinfo.townid}",
            "communityid":"${userinfo.communityid}",
            "villageid":"${userinfo.villageid}"
        })

    });

</script>
</body>
</html>

后台

controller

    /**
     * 查询部门树
     * @return
     */
    @RequestMapping(value = "/auth/queryDepartListTree")
    @ResponseBody
    public List<Map<String,Object>> queryDepartListTree(){
//        List<Map<String,Object>> orgList = orgService.queryOrgTree();
        List<Map<String,Object>> departList = departService.queryDepartListTree();
        return departList;
    }

service

    /**
     *
     * @return
     */
    List<Map<String, Object>> queryDepartListTree();

impl

 @Override
    public List<Map<String, Object>> queryDepartListTree() {


        KframeUserinfo userinfo = UserSessionUtils.getCurrentUser();
        List<Map<String, Object>> mList = new ArrayList<Map<String, Object>>();
        Map<String, Object> map = new HashMap<String, Object>();
        //查找本级及下级组织机构信息，currentCode为空时，查找全部组织机构信息
        List<Map<String, Object>> orgList = departDao.queryDepartNotHospitalList(map);
        if (orgList != null && !orgList.isEmpty()) {
            for (Map<String, Object> tree : orgList) {
                if("1".equals(tree.get("PARENT_CODE"))){
                    Map<String, Object> m = new HashMap<String, Object>();
                    m.put("id", tree.get("ID"));
                    m.put("departCode", tree.get("DEPART_CODE"));
                    m.put("name", tree.get("DEPART_NAME"));
                    m.put("parentCode", tree.get("PARENT_CODE"));
                    mList.add(m);
                }
            }
            //为一级菜单设置子菜单准备递归
            for (Map<String, Object> cMap : mList) {
                //获取父菜单下所有子菜单调用getChildList
                List<Map<String, Object>> childList = getDepartChildList1(String.valueOf(cMap.get("departCode")), orgList);
                cMap.put("children", childList);
            }
        }
        List<Map<String, Object>> resList = new ArrayList<Map<String, Object>>();
        Map<String, Object> resMap = new HashMap<String, Object>();
        resMap.put("id", "1");
        resMap.put("departCode", "1");
        resMap.put("name", "根节点");
        resMap.put("parentCode","0");
        resMap.put("children",mList);
        resList.add(resMap);
        return resList;
    }




  public List<Map<String, Object>> getDepartChildList1(String departCode, List<Map<String, Object>> orgList) {
        //构建子菜单
        List<Map<String, Object>> childList = new ArrayList<Map<String, Object>>();
        //遍历传入的list
        for (Map<String, Object> org : orgList) {
            //所有菜单的父id与传入的根节点id比较，若相等则为该级菜单的子菜单
            if (String.valueOf(org.get("PARENT_CODE")).equals(departCode)) {
                Map<String, Object> map = new HashMap<String, Object>();
                map.put("id", org.get("ID"));
                map.put("departCode", org.get("DEPART_CODE"));
                map.put("name", org.get("DEPART_NAME"));
                map.put("parentCode", org.get("PARENT_CODE"));
                childList.add(map);
            }
        }
        //递归
        for (Map<String, Object> m : childList) {
            m.put("children", getDepartChildList1(String.valueOf(m.get("departCode")), orgList));
        }
        if (childList.size() == 0) {
            return null;
        }
        return childList;
    }