bootstrap 三级联动&四级联动

最新推荐文章于 2024-05-31 10:07:22 发布
最新推荐文章于 2024-05-31 10:07:22 发布
阅读量9.7k 收藏 4
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangwenxue_admin/article/details/80805870
版权

              bootstrap 三级联动&四级联动

 

        三级联动在日常开发中经常用到，现在自己亲自作了一个，四级联动的效果，前端后端代码如下。

前端代码如下：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>

<body class="gray-bg">

<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="user-form">
                <input type="hidden" id="cityStateCode" name="params[cityStateCode]" value="">
                <input type="hidden" id="countyCode" name="params[countyCode]">
                <input type="hidden" id="applyHospitalCode" name="params[applyHospitalCode]">
                <div class="select-list">
                    <ul>
                        <!--省市县三级联动-开始-->
                        <li style="margin-top: 12px;margin-right: 0px;">申请方：</li>
                        <li>
                            <select name="input_province" id="input_province" class="form-control" style="width: 120px;">
                                <option value="">---请选择---</option>
                                <option value="520000">贵州省</option>
                            </select>
                        </li>
                        <!--市级-->
                        <li>
                            <select name="input_city" id="input_city" class="form-control" style="width: 120px;">
                                <option selected="selected" value="">---请选择---</option>
                            </select>
                        </li>
                        <!--区县-->
                        <li>
                            <select name="input_area" id="input_area" class="form-control" style="width: 120px;">
                                <option selected="selected" value="">---请选择---</option>
                            </select>
                        </li>
                        <!--机构-->
                        <li>
                            <select name="input_hospital" id="input_hospital" class="form-control" style="width: 200px;">
                                <option selected="selected" value="">---请选择---</option>
                            </select>
                        </li>
                        <!--省市县三级联动-结束-->

                        <li>
                            患者姓名：<input type="text" name="patiName" style="width: 120px;"/>
                        </li>
                        <li class="select-time">
                            <label>统计时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="params[startTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a id="resetForm" class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm hidden-xs" id="toolbar">
            <a class="btn btn-warning" onclick="$.table.exportExcel()">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">

    var prefix = ctx + "biz/consultation";

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});

        queryApplyConsList();
    });

    function queryApplyConsList() {
        clearHiddenInfo(1);
        var options = {
            url: prefix + "/consultationApplication",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            sortName: "applyTime",
            sortOrder: "desc",
            modalName: "用户",
            columns: [
                /*{
                checkbox: true
                },*/
                {
                    field: 'applyTime',
                    title: '申请时间',
                    sortable: true,
                    width: '6%'
                },
                {
                    field: 'primStatus',
                    title: '状态',
                    width: '4%'
                },
                {
                    field: 'primNo',
                    title: '会诊编号',
                    width: '3%'
                },
                {
                    field: 'primEmergency',
                    title: '会诊类型',
                    width: '2%'
                },
                {
                    field: 'primInteracyive',
                    title: '会诊方式',
                    width: '1%'
                },
                {
                    field: 'patiName',
                    title: '患者姓名',
                    width: '2%'
                },
                {
                    field: 'patiGender',
                    title: '性别',
                    width: '1%'
                },
                {
                    field: 'patiIdentity',
                    title: '身份证号',
                    width: '6%'
                },
                {
                    field: 'cityStateName',
                    title: '申请所属市',
                    width: '3%'
                },
                {
                    field: 'countyName',
                    title: '申请所属区县',
                    width: '3%'
                },
                {
                    field: 'applyHospitalName',
                    title: '申请机构',
                    width: '6%'
                },
                {
                    field: 'applyDepartmentName',
                    title: '申请科室',
                    width: '6%'
                },
                {
                    field: 'applySubdeptName',
                    title: '申请子科室',
                    width: '6%'
                },
                {
                    field: 'applyUserName',
                    title: '申请医生',
                    width: '5%'
                },
                {
                    field: 'primMdt',
                    title: '是否多学科',
                    width: '2%'
                },
                {
                    field: 'consHospitalName',
                    title: '会诊机构',
                    width: '6%'
                },
                {
                    field: 'consDepartmentName',
                    title: '会诊科室',
                    width: '6%'
                },
                {
                    field: 'consSubdeptName',
                    title: '会诊子科室',
                    width: '6%'
                },
                {
                    field: 'consUserName',
                    title: '会诊专家',
                    width: '5%'
                },
                {
                    field: 'professional',
                    title: '专家职称',
                    width: '1%'
                },
                {
                    field: 'submitTime',
                    title: '会诊时间',
                    sortable: true,
                    width: '6%'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a href="#" onclick="$.operate.editTab(\'' + row.primId + '\')"><i class="fa fa-edit"></i>查看</a> ');
                        return actions.join('');
                    }, width: '5%'
                }]
        };

        $.table.init(options);
    }


    /*三级联动省级节点-开始*/
    $("#input_province").change(function () {
        //清空隐藏域信息
        clearHiddenInfo(1);
        //每次切换都要清空市州下拉数据
        $("#input_city").find("option").remove();
        $("#input_city").append("<option value=''>---请选择---</option>>")
        //每次切换都要清空区县下拉数据
        $("#input_area").find("option").remove();
        $("#input_area").append("<option value=''>---请选择---</option>>")
        //每次切换都要清空机构下拉数据
        $("#input_hospital").find("option").remove();
        $("#input_hospital").append("<option value=''>---请选择---</option>>")
        var str = "";
        var formdata = new FormData();
        var proviceCode = $("#input_province option:selected").val();

        if(proviceCode == null || proviceCode ==''){
            return;
        }
        formdata.append("provinceCode", proviceCode);
        $.ajax({
            url: ctx + "biz/consultation/queryCityList",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (result) {
                $.each(result,function(i,item){
                    str += "<option value=" + item.dictionarykey + ">" + item.dictionaryvalue + "</option>";
                })
                //将数据添加到市州下拉框里
                $("#input_city").append(str);
            }
        })
    });
    /*三级联动省级节点-结束*/

    /*三级联动市州级节点-开始*/
    $("#input_city").change(function () {
        //清空隐藏域信息
        clearHiddenInfo(2);
        //每次切换都要清空区县下拉数据
        $("#input_area").find("option").remove();
        $("#input_area").append("<option value=''>---请选择---</option>>")
        //每次切换都要清空机构下拉数据
        $("#input_hospital").find("option").remove();
        $("#input_hospital").append("<option value=''>---请选择---</option>>")
        var str = "";
        var formdata = new FormData();
        var cityCode = $("#input_city option:selected").val();

        //给隐藏域市州code赋值
        $("#cityStateCode").val(cityCode);

        if(cityCode == null || cityCode ==''){
            return;
        }
        formdata.append("cityCode", cityCode);
        $.ajax({
            url: ctx + "biz/consultation/queryAreaList",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (result) {
                $.each(result,function(i,item){
                    str += "<option value=" + item.dictionarykey + ">" + item.dictionaryvalue + "</option>";
                })
                //将数据添加到区县下拉框里
                $("#input_area").append(str);
            }
        })
    });
    /*三级联动市州级节点-结束*/

    /*机构信息联动-开始*/
    $("#input_area").change(function () {
        //清空隐藏域信息
        clearHiddenInfo(3);
        //每次切换都要清空机构下拉数据
        $("#input_hospital").find("option").remove();
        $("#input_hospital").append("<option value=''>---请选择---</option>>")
        var str = "";
        var formdata = new FormData();
        var areaCode = $("#input_area option:selected").val();

        //给隐藏域区县code赋值
        $("#countyCode").val(areaCode);

        if(areaCode == null || areaCode ==''){
            return;
        }
        formdata.append("areaCode", areaCode);
        $.ajax({
            url: ctx + "biz/consultation/queryHospitalList",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (result) {
                $.each(result,function(i,item){
                    str += "<option value=" + item.dictionarykey + ">" + item.dictionaryvalue + "</option>";
                })
                //将数据添加到机构下拉框里
                $("#input_hospital").append(str);
            }
        })
    });
    /*机构信息联动-结束*/

    /*机构ochange事件赋值机构编码*/
    $("#input_hospital").change(function () {
        //清空隐藏域信息
        //clearHiddenInfo(3);
        var hospitalCode = $("#input_hospital option:selected").val();
        //给隐藏域区县code赋值
        $("#applyHospitalCode").val(hospitalCode);
    });

    // 重置：清空缓存域省、市、区县、机构信息
    $("#resetForm").click(function () {
        clearHiddenInfo(1);
    });

    /**
     * 清空隐藏域函数
     * 1：省事件操作；2：市级事件操作；3：区县事件操作
     * @param type
     */
    function clearHiddenInfo(type) {
        if(type == 1){
            $("#cityStateCode").val(null);
            $("#countyCode").val(null);
            $("#applyHospitalCode").val(null);
        }
        if(type == 2){
            $("#countyCode").val(null);
            $("#applyHospitalCode").val(null);
        }
        if(type == 3){
            $("#applyHospitalCode").val(null);
        }

    }


</script>
</body>
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
    <div class="col-xs-offset-1">
        <input type="file" id="file" name="file"/>
        <div class="mt10 pt5">
            <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
            &nbsp; <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i
                class="fa fa-file-excel-o"></i> 下载模板</a>
        </div>
        <font color="red" class="pull-left mt10">
            提示：仅允许导入“xls”或“xlsx”格式文件！
        </font>
    </div>
</form>
</html>

后端代码如下：

/**
     * 根据省级code获取市州数据列表.
     *
     * @return
     */
    @PostMapping("/queryCityList")
    @ResponseBody
    public List<OrgInfo> queryAllCityList(@RequestParam("provinceCode") String provinceCode) {
        OrgInfoVo vo = new OrgInfoVo();
        vo.setProvinceCode(provinceCode);
        List<OrgInfo> orgInfoList = bizDetailsService.selectAllCityList(vo);
        return orgInfoList; //AjaxResult.success();
    }

    /**
     * 根据市州code获取区县数据列表.
     *
     * @param cityCode
     * @return
     */
    @PostMapping("/queryAreaList")
    @ResponseBody
    public List<OrgInfo> queryAreaList(@RequestParam("cityCode") String cityCode) {
        OrgInfoVo vo = new OrgInfoVo();
        vo.setCityCode(cityCode);
        List<OrgInfo> orgInfoList = bizDetailsService.selectAllAreaList(vo);
        return orgInfoList;
    }

    @PostMapping("/queryHospitalList")
    @ResponseBody
    public List<OrgInfo> queryHospitalList(@RequestParam("areaCode") String areaCode) {
        OrgInfoVo vo = new OrgInfoVo();
        vo.setAreaCode(areaCode);
        List<OrgInfo> orgInfoList = bizDetailsService.selectAllHospitalList(vo);
        return orgInfoList;
    }

 

运行效果：

 

Vashon_杨博程
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 中实现三级联动下拉框
weixin_42902669的博客
03-27 5903
<!DOCTYPE html> <html lang='en'> <head> <title>下拉框三级联动</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap --> &lt...
Element ui 组件库 使用技巧。
i_Satan的博客
04-21 6864
el-radio组件 单选框取消选中。 el-radio 单选框组件默认是不能取消选中的. 解决办法: 我们可以给他添加 click事件,把 label 值 传入点击事件,然后每次点击的时候去判断 label 和 radio 的值是否相同.如果相同 就置为空,如果不同,就给 radio 赋值. 参考文章@官尔 方法一: <el-radio-group v-model="radio2"> <el-radio @click.native.prevent="clickitem(3
推荐开源项目：Bootstrap 4 响应式多级下拉导航栏
最新发布
gitblog_00042的博客
05-31 302
推荐开源项目：Bootstrap 4 响应式多级下拉导航栏 项目地址:https://gitcode.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar 1、项目介绍 在网站设计中，一款功能强大且响应式的导航栏是必不可少的元素。这就是我们今天要推荐的开源项目——Bootstrap 4 Responsive Navbar with Mult...
Bootstrap省市区三级联动菜单
yxk17668的博客
03-09 1429
这是一个简单基于Bootstrap省市区三级联动菜单，数据源可以修改通过修改javascript html： <div class="modal-body"> <!-- 省市区三级联动 begin --> ...
bootstrap multiselect插件级联选择框操作 内容从json文件获取
youseenoonehere的博客
12-10 3475
在开发中经常用到bootstrap插件 这几天发现了一个multiselect插件 选择框插件 很好用 整理一下Demo 供大家参考 在项目中用到选择框一般涉及到级联选择操作 数据是从json文件获取或者从数据库读取出数据 首先 使用这个插件需要导入一系列依赖的js文件和css文件 这个可以从官方demo获取 然后准备json数据 先读取本地json 做一个省 县 市 的筛选 jso
bootstrap-select动态加载数据和多级联动
q283614346的博客
06-23 1万+
最近使用bootstrap-select在做了一个地址的联动，效果图如下 环境相关 bootstrap 3.3.7 jquery 3.3.1 bootstrap-select 1.13.9 1、数据表结构如下 -- 地址配置表(address_config) create table address_config ( option_value varchar(20) not null comm...
thymeleaf 之 th:each迭代循环对象集合
小屁孩大帅-保密的博客
07-25 3707
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;meta charset="utf-8"&gt; &lt;head th:include="include :: header"&gt;&lt;/head&gt; &lt;body class="gray-bg"&gt;     &lt;div class="
不错的 省市区三级联动效果
11-13
在IT领域，"三级联动"通常指的是在一个交互系统中，三个相关联的下拉列表框按照一定的逻辑关联，实现数据的动态筛选和展示。这种效果常见于地址选择、分类筛选等场景，例如中国的省、市、区选择。下面将详细解释三级...
input框省市区三级联动选择
11-08
"input框省市区三级联动选择"是一种常见的用户输入方式，特别是在移动端应用中，它能够优化用户在选择地理位置时的体验。这种设计允许用户通过一个单一的输入框来完成省份、城市和区县的连续选择，减少了操作步骤，...
蛮好用的三级联动
11-14
从文件名"好用的三级联动（可四级）"来看，这个组件可能不仅支持基本的三级联动，还扩展到了四级联动，适应更复杂的业务需求。四级联动意味着用户可以进行四次选择，层层深入，这在如产品分类或地区筛选等场景中尤其...
jquery 实现省地市县三级联动源码经典例子
09-20
本实例重点讲解如何利用jQuery实现省地市县三级联动的效果，这是一种常见的前端数据筛选和展示技术，常用于地址选择或者层级结构的筛选。 一、jQuery基础 jQuery的核心在于它的选择器，它可以方便地选取HTML元素。...
bootstrap treeview 树形菜单带复选框及级联选择功能
08-27
主要介绍了bootstrap treeview 树形菜单带复选框及级联选择功能,代码超简单，感兴趣的朋友跟随脚本之家小编一起学习吧
全国五级联动联动、四级联动连个sql，亲测可用
04-27
mysql文件，全国五级联动，四级联动，我们物联网项目中用的，保证可用
Bootstrap实现省市区三级联动(亲测可用)
10-16
主要为大家详细介绍了Bootstrap实现省市区三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
cityPicker.rar
04-01
1. **三级联动**与**四级联动**： - 三级联动是指在一个下拉菜单中，根据用户在第一级、第二级的选择，动态更新第三级的选项。例如，省份-城市-区县。在城市选择器中，这可能表现为国家-省份-城市这样的层次结构。 ...
ruoyi框架改变日期的显示
吴小迪的博客
09-16 3万+
ruoyi框架想要把时间显示为时间日期加时分秒其实很简单，接下来看问题以及解决方法： 如下图【显示的是年月日】： 我看了看官方文档，上面写的就是默认显示为年月日，如果想要显示时间的话需要额外的进行下小处理： 总共分为俩步，就可以改变为显示年月日加时间的格式： 记住你要改变格式的id 在script标签里面找到 $(function(){ }) 并加入下方写注释的关键代码： $(funct...
基于bootstrap的城市选择器 省市县（区）联动下拉控件的使用
热门推荐
weixin_38960795的博客
01-12 3万+
bootstrap城市选择控件 控件效果如下图所示： 支持全国所有城市的选择。支持input框搜索模糊查询城市 使用方法： 1.按照顺序引入的文件，相关插件下载地址在文章末尾的GitHub网址： script src="js/jquery.js"> 2.在前端页面中插入下面的代码：
CERC 2017 H:Hidden Hierarchy (模拟)
weixin_30566063的博客
04-16 111
Hidden Hierarchy时间限制:1 Sec内存限制:512 MB提交:84解决:11[提交][状态][讨论版][命题人:admin]题目描述You are working on the user interface for a simple text-based file explorer. One of your tasks is t...
bootstrap 三级联动
02-28
Bootstrap三级联动是一种常用的前端技术，用于实现多级下拉菜单的联动效果。它通常用于省市区选择、分类选择等场景。 实现Bootstrap三级联动的基本步骤如下： 1. 引入Bootstrap框架：首先需要在页面中引入Bootstrap...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值