layui组织机构树(treeSelect)

前端

<%@ 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;
    }

运行效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/306849.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

认识Linux指令之 “more less” 命令

01.more命令 语法&#xff1a;more [选项][文件] 功能&#xff1a;more命令&#xff0c;功能类似 cat 常用选项&#xff1a; -n 对输出的所有行编号 q 退出more cat适合打开查看一些小文件 当遇到大文本文件的时候&#xff0c;使用more命令&#xff0c;more可以打满一屏…

HarmonyOS@Prop装饰器:父子单向同步

Prop装饰器&#xff1a;父子单向同步 Prop装饰的变量可以和父组件建立单向的同步关系。Prop装饰的变量是可变的&#xff0c;但是变化不会同步回其父组件。 说明 从API version 9开始&#xff0c;该装饰器支持在ArkTS卡片中使用。 概述 Prop装饰的变量和父组件建立单向的同…

如何在没有密码的情况下将 iPhone 13/14/15 恢复出厂设置

您想知道如何在没有密码的情况下将 iPhone 13/14/15 恢复出厂设置吗&#xff1f; 出厂重置 iPhone 13/14/15 成为所有 iPhone 机型中最简单的。大多数情况下&#xff0c;iPhone 13/14/15 是在 iOS 15 或更高版本的 iOS 版本上&#xff0c;Apple 更新了无需密码重置 iPhone 13/…

【Python程序开发系列】一文总结API的基本概念、功能分类、认证方式、使用方法和开发流程

这是Python程序开发系列原创文章&#xff0c;我的第195篇原创文章。 一、什么是API&#xff1f; API是软件开发中非常重要的概念&#xff0c;它简化了不同组件之间的交互和集成&#xff0c;提供了对其他软件或服务功能的访问和调用方式。 API是应用程序编程接口&#xff08;Ap…

Elasticsearch:Search tutorial - 使用 Python 进行搜索 (四)

在本节中&#xff0c;你将了解另一种机器学习搜索方法&#xff0c;该方法利用 Elastic Learned Sparse EncodeR 模型或 ELSER&#xff0c;这是一种由 Elastic 训练来执行语义搜索的自然语言处理模型。这是继之前的文章 “Elasticsearch&#xff1a;Search tutorial - 使用 Pyth…

Redis 主从、哨兵和分片集群简单介绍

Redis 主从集群架构 单节点 redis 并发能力有上限&#xff0c;要进一步提高 redis 并发能力&#xff0c;就要搭建主从集群&#xff0c;实现读写分离 主从同步原理 Replicaition id&#xff1a;每台 master 机器都一个 repl_id&#xff0c;是数据集的表示&#xff0c;若 salv…

深入理解 Flink(一)Flink 架构设计原理

大数据分布式计算引擎设计实现剖析 MapReduce MapReduce 执行引擎解析 MapReduce 的组件设计实现图 Spark 执行引擎解析 Spark 相比于 RM 的真正优势的地方在哪里&#xff1a;&#xff08;Simple、Fast、Scalable、Unified&#xff09; DAG 引擎中间计算结果可以进行内存持…

【动态规划】【矩阵】C++算法329矩阵中的最长递增路径

作者推荐 【动态规划】C算法312 戳气球 题目 给定一个 m x n 整数矩阵 matrix &#xff0c;找出其中 最长递增路径 的长度。 对于每个单元格&#xff0c;你可以往上&#xff0c;下&#xff0c;左&#xff0c;右四个方向移动。 你 不能 在 对角线 方向上移动或移动到 边界外&…

[足式机器人]Part2 Dr. CAN学习笔记 - Ch02动态系统建模与分析

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - Ch02动态系统建模与分析 1. 课程介绍2. 电路系统建模、基尔霍夫定律3. 流体系统建模4. 拉普拉斯变换&#xff08;Laplace&#xff09;传递函数、微分方程4.1 Laplace Transform 拉式变换4.2 收…

使用SpirngBoot时部分编译报错解决方案:

1. 类文件具有错误的版本 61.0, 应为 52.0 请删除该文件或确保该文件位于正确的类路径子目录中。 报错截图&#xff1a; 解决方案&#xff1a; 找到springboot的java版本看是多少版本&#xff0c;springboot 3.0以上的版本需要最低JDK17的版本&#xff0c;所以查看你自己…

基于Spring-boot-websocket的聊天应用开发总结

目录 1.概述 1.1 Websocket 1.2 STOMP 1.3 源码 2.Springboot集成WS 2.1 添加依赖 2.2 ws配置 2.2.1 WebSocketMessageBrokerConfigurer 2.2.2 ChatController 2.2.3 ChatInRoomController 2.2.4 ChatToUserController 2.3 前端聊天配置 2.3.1 index.html和main.j…

电脑如何关闭自动更新?阻止系统自动更新方法

随着科技的发展&#xff0c;电脑已经成为我们生活中不可或缺的一部分。然而&#xff0c;有时候电脑的自动更新功能会给我们带来一些不必要的麻烦。因此&#xff0c;本文将介绍如何关闭电脑的自动更新功能&#xff0c;以便更好地管理电脑。 关闭自动更新功能的原因 电脑的自动…

Salesforce迁移到销售易方案详解

本章节着重介绍下国内的龙头CRM销售易及Salesforce迁移到销售易。 销售易成立与2011年&#xff0c;经过十几年的发展已经具有的国内领先的PaaS平台各行业成熟的案例。在网络安全法数据安全法个人信息保护法的三重加持下&#xff0c;从Salesforce迁移到性价比更高服务更好的国内…

故事机手机平板等智能硬件DVT阶段可靠性测试方法

DVT是什么 DVT是设计样品验证测试评审阶段&#xff0c;这个阶段要进行全面的&#xff0c;客观的测试&#xff0c; 主要测试项目包括&#xff1a;功能测试&#xff0c;安规测试&#xff0c;性能测试&#xff0c;合规测试&#xff08;兼容性&#xff09;&#xff0c;机械测试&am…

idea引包异常 cannot resolve symbol ‘xxx‘

cannot resolve symbol ‘xxx’ 动了module的名字&#xff0c;引发的bug。直接清缓存重启

Docker简介、基本概念和安装

Docker简介、基本概念和安装 1.docker简介 1.1 什么是docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes (opens new window)在法国期间发起的一个公司内部项目&#xff0c;它是基于 dotCloud 公司多年云服务技术的一次革新&#xff0c;并于 2013 年 3 月以 Apache 2…

selenium爬取多个网站及通过GUI界面点击爬取

selenium爬取代码 webcrawl.py import re import time import json from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.chrome.options import Options from selenium.common.exceptions import TimeoutException, Stale…

Linux 文件(夹)权限查看

命令 : ls -al ls -al 是一个用于列出指定目录下所有文件和子目录的命令,包括隐藏文件和详细信息。其中,-a 选项表示显示所有文件,包括以 . 开头的隐藏文件,-l 选项表示以列表的形式显示文件的详细信息。 本例中:drwxrwxr-x 为权限细节。 权限细节(Permission detail…

电子学会C/C++编程等级考试2020年12月(一级)真题解析

C/C++编程(1~8级)全部真题・点这里 第1题:字符三角形 描述 给定一个字符,用它构造一个底边长5个字符,高3个字符的等腰字符三角形。 输入 输入只有一行, 包含一个字符。 输出 该字符构成的等腰三角形,底边长5个字符,高3个字符。 样例输入 * 1 样例输出 * *** ***** 答…

云平台API服务

问题 云平台API服务 详细问题 笔者今天需要使用病虫害图像识别API&#xff0c;游览器搜索后&#xff0c;结果如下&#xff1a; 点击第一个搜索结果&#xff1a;RMB50000&#xff0c;虽然提供1000000次病虫害识别&#xff0c;但是笔者没有这般大地需求&#xff0c;有没有可能…