文档章节

利用ibeetl 实现selectpicker 的三级联动

donald121
 donald121
发布于 11/14 23:12
字数 1560
阅读 43
收藏 1

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台

2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要

$("#contractId").selectpicker('refresh');// 重置option项目

来重置搜索的显示行

 

3. 由于使用jquery 对修改项目的监听,在处理层级的时候,就需要避免进入死循环

因此不能像其他select option 那样直接使用

$("#warehouseId").empty();

 来处理下级筛选行,

因为这样会造成,上级修改的时候会empty下级的option,会造成下级已经选择的项刷新,而下级监听到该id selected option 修改后,会触发上级的修改,造成死循环

所以需要,

还有很多小坑,就不一一细说,直接上代码

@layout("/common/_container.html"){
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>货主管理</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3" >
                                <#NameCon id="consignerNo" name="货主代码" placeholder="输入货主代码"/>
                            </div>
                            <div class="col-sm-3" >
                                <#NameCon id="consignerName" name="货主名称" placeholder="输入货主名称"/>
                            </div>
                            <div class="col-sm-3" >
                                <#SelectCon2 id="logisticsCompanyId" name="物流公司" >
                                <option value=""></option>
                                @for(item in logistics_company_list){
                                <option value="${item.id}">${item.logisticsCompanyName}</option>
                                @}
                                 </#SelectCon2>
                            </div>
                            <div class="col-sm-3" id="contract">
                                 <#SelectCon2 id="contractId" name="域" >
                                 <option value=""></option>
                                 @for(item in contract_list){
                                 <option value="${item.id}">${item.contract}</option>
                                  @}
                                 </#SelectCon2>
                            </div>
                            <div class="col-sm-3" >
                                  <#SelectCon2 id="warehouseId" name="仓库" >
                                  <option value=""></option>
                                  @for(item in warehouse_list){
                                  <option value="${item.id}">${item.warehouse}</option>
                                  @}
                                  </#SelectCon2>
                            </div>
                            <div class="col-sm-3" >
                                  <#SelectCon id="status" name="状态" >
                                  <option value=""></option>
                                  <option value="0">未激活</option>
                                  <option value="1">已激活</option>
                                  </#SelectCon>
                            </div>
                            <div class="col-sm-3">
                                <#button name="搜索" icon="fa-search" clickFun="Consigner.search()"/>
                                <#button name="清空" icon="fa-trash" clickFun="Consigner.resetSearch()" space="true"/>
                            </div>
                        </div>
                        <div class="hidden-xs" id="ConsignerTableToolbar" role="group">
                            @if(shiro.hasPermission("/consigner/add")){
                                <#button name="添加" icon="fa-plus" clickFun="Consigner.openAddConsigner()"/>
                            @}
                            @if(shiro.hasPermission("/consigner/unfreeze")){
                            <#button name="激活" icon="fa-check-circle" clickFun="Consigner.unfreeze()" space="true"/>
                            @}
                            @if(shiro.hasPermission("/consigner/freeze")){
                            <#button name="取消激活" icon="fa-warning" clickFun="Consigner.freeze()" space="true"/>
                            @}
                            @if(shiro.hasPermission("/consigner/update")){
                                <input type="hidden" id="consigner_update" value="1">
                            @}
                            @if(shiro.hasPermission("/consigner/delete")){
                                <input type="hidden" id="consigner_delete" value="1">
                            @}
                        </div>
                        <#table id="ConsignerTable"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPath}/static/modular/server/consigner/consigner.js"></script>
<script>
    /**
     * 判断是否存在option
     */
    function isExistOption(id,value) {
        var isExist = false;
        var count = $('#'+id).find('option').length;

        for(var i=0;i<count;i++)
        {
            if($('#'+id).get(0).options[i].value == value)
            {
                isExist = true;
                break;
            }
        }
        return isExist;
    }

    /**
     *  检查originContractId 是否在对应的logisticsCompanyId
     */
    function checkOriginContractIdInLogisticsCompanyId(logisticsCompanyId ,originContractId){
        var isExist = false;
        @for( item in contract_list){
            if(logisticsCompanyId == ${item.logisticsCompanyId} ) {
                if(originContractId == ${item.id}){
                    isExist = true;
                }
            }
        @}
        return isExist;
    }

    /**
     *  检查originWarehouseId 是否在对应的logisticsCompanyId
     */
    function checkOriginWarehouseIdInLogisticsCompanyId(logisticsCompanyId ,originWarehouseId){
        var isExist = false;
        @for( item in warehouse_list){
            if(logisticsCompanyId == ${item.logisticsCompanyId} ) {
                if(originWarehouseId == ${item.id}){
                    isExist = true;
                }
            }
        @}
        return isExist;
    }

    /**
     *  检查originWarehouseId 是否在对应的contractId
     */
    function checkOriginWarehouseIdIncContractId(contractId ,originWarehouseId){
        var isExist = false;
        @for( item in warehouse_list){
            if(contractId == ${item.contractId} ) {
                if(originWarehouseId == ${item.id}){
                    isExist = true;
                }
            }
        @}
        return isExist;
    }

    /**
     * 第一级logisticsCompanyId 监听改变
     */
    $(document).on("change",'#logisticsCompanyId',function () {
        var logisticsCompanyId = $(this).val();
        var originContractId = $("#contractId").val();
        var originWarehouseId = $("#warehouseId").val();

        if((logisticsCompanyId != null) && (logisticsCompanyId != '') ){
            <!-- contractId option选项动态操作 -->
            if((isExistOption('contractId' , originContractId)) && (originContractId != '') && (checkOriginContractIdInLogisticsCompanyId(logisticsCompanyId ,originContractId))){
                // originContractId 存在对应option 并且为不为空'' 并且originContractId在对应的logisticsCompanyId里面 则只需要移除多于项目,
                // 才可以保留默认选项显示,不作任何修改,避免死循环(修改了二级,二级监听到修改,修改一级,一级监听修改,又修改二级)
                @for( item in contract_list){
                    if(logisticsCompanyId != ${item.logisticsCompanyId} ){
                        $("#contractId option[value='${item.id}']").remove();
                    }
                @}
            }else{
                // originContractId 不存在对应option 或者为空'' 或originContractId不在对应的logisticsCompanyId里面 则清空option项目重新赋值
                $("#contractId").empty();
                $("#contractId").prepend("<option value=''></option>")
                @for( item in contract_list){
                    if(logisticsCompanyId == ${item.logisticsCompanyId} ){
                        $("#contractId").append("<option value='${item.id}'>${item.contract}</option>");
                    }
                @}
            }
            $("#contractId").selectpicker('refresh');// 重置option项目
            <!-- contractId option选项动态操作 -->


            <!-- warehouseId option选项动态操作 -->
            if((isExistOption('warehouseId' , originWarehouseId)) && (originWarehouseId != '') && checkOriginWarehouseIdInLogisticsCompanyId(logisticsCompanyId , originWarehouseId)){
                // warehouseId 存在对应option 并且为不为空'' 并且warehouseId在对应的logisticsCompanyId里面 则只需要移除多于项目,
                @for( item in warehouse_list){
                    if(logisticsCompanyId != ${item.logisticsCompanyId} ){
                        $("#warehouseId option[value='${item.id}']").remove();
                    }
                @}
            }else{
                // warehouseId 不存在对应option 或者为空''或warehouseId不在对应的logisticsCompanyId里面 则清空option项目重新赋值
                $("#warehouseId").empty();
                $("#warehouseId").prepend("<option value=''></option>")
                @for( item in warehouse_list){
                    if(logisticsCompanyId == ${item.logisticsCompanyId} ){
                        $("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
                    }
                @}
            }
            $("#warehouseId").selectpicker('refresh');// 重置option项目
            <!-- warehouseId option选项动态操作 -->
        }else{
            // logisticsCompanyId 选择空值重新配置选则项目
            <!-- contractId option选项动态操作 -->
            $("#contractId").empty();
            $("#contractId").prepend("<option value=''></option>")
            @for( item in contract_list){
                $("#contractId").append("<option value='${item.id}'>${item.contract}</option>");
            @}
            $("#contractId").selectpicker('refresh');// 重置option项目
            <!-- contractId option选项动态操作 -->

            <!-- warehouseId option选项动态操作 -->
            $("#warehouseId").empty();
            $("#warehouseId").prepend("<option value=''></option>")
            @for( item in warehouse_list){
                $("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
            @}
            $("#warehouseId").selectpicker('refresh');// 重置option项目
            <!-- warehouseId option选项动态操作 -->

        }

    });

    /**
     * 第二级contractId 监听改变
     */
    $(document).on("change",'#contractId',function () {
        var contractId = $(this).val();
        var originLogisticsCompanyId = $("#logisticsCompanyId").val()
        var originWarehouseId = $("#warehouseId").val();


        if((contractId != null) && (contractId != '') ) {
            <!-- logisticsCompanyId option自动匹配选择 -->
            @for( item in contract_list){
                if(contractId == ${item.id} ){
                    $('#logisticsCompanyId').selectpicker('val',${item.logisticsCompanyId});
                }
            @}
            <!-- logisticsCompanyId option自动匹配选择 -->

            <!-- warehouseId option选项动态操作 -->
            if((isExistOption('warehouseId' , originWarehouseId)) && (originWarehouseId != '') && (checkOriginWarehouseIdIncContractId(contractId ,originWarehouseId ))){
                // warehouseId 存在对应option 并且为不为空'' 并且warehouseId在对应的contractId里面 则只需要移除多于项目,
                @for( item in warehouse_list){
                        if(contractId != ${item.contractId} ){
                            $("#warehouseId option[value='${item.id}']").remove();
                        }
                    @}
                }else{
                // warehouseId 不存在对应option 或者为空''或warehouseId不在对应的contractId里面 则清空option项目重新赋值
                $("#warehouseId").empty();
                $("#warehouseId").prepend("<option value=''></option>")
                @for( item in warehouse_list){
                    if(contractId == ${item.contractId} ){
                        $("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
                    }
                @}
            }
            $("#warehouseId").selectpicker('refresh');// 重置option项目

            <!-- warehouseId option选项动态操作 -->
        }else if ((originLogisticsCompanyId != null) && (originLogisticsCompanyId != '')){
            // contractId 选择空值 但 originLogisticsCompanyId 不是空值 重新配置选则项目
            <!-- warehouseId option选项动态操作 -->
            $("#warehouseId").empty();
            $("#warehouseId").prepend("<option value=''></option>")
            @for( item in warehouse_list){
                if(originLogisticsCompanyId == ${item.logisticsCompanyId} ){
                    $("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
                }
            @}

            <!-- warehouseId option选项动态操作 -->
        }else{
            // logisticsCompanyId 选择空值重新配置选则项目
            <!-- warehouseId option选项动态操作 -->
            $("#warehouseId").empty();
            $("#warehouseId").prepend("<option value=''></option>")
            @for( item in warehouse_list){
                $("#warehouseId").append("<option value='${item.id}'>${item.warehouse}</option>");
            @}
            $("#warehouseId").selectpicker('refresh');// 重置option项目
            <!-- warehouseId option选项动态操作 -->
        }
    });


    /**
     * 第三级warehouseId 监听改变
     */
    $(document).on("change",'#warehouseId',function () {
        var originLogisticsCompanyId = $("#logisticsCompanyId").val();
        var origincontractId = $("#contractId").val();
        var warehouseId = $(this).val();

        if((warehouseId != null) && (warehouseId != '') ) {
            <!-- contractId option自动匹配选择 -->
            @for( item in warehouse_list){
                if(warehouseId == ${item.id} ){
                    $('#contractId').selectpicker('val',${item.contractId});
                }
            @}
            <!-- contractId option自动匹配选择 -->
        }
    });

    /**
     * 清空文本框内容
     */
    Consigner.resetSearch = function(){
        // 清空输入框内容
        $(".form-control").val("");
        //重新填充contractId , warehouseId 的选择
        $('#logisticsCompanyId').selectpicker('val','');
        // 清空下拉框内容
        $(".filter-option-inner-inner").empty();
        $(".bootstrap-select button:first").attr("title","");
    }

</script>
@}

 

© 著作权归作者所有

共有 人打赏支持
donald121
粉丝 2
博文 38
码字总数 15032
作品 0
广州
私信 提问
优化省市县三级联动(查询数据库)

javaWeb项目,页面实现省市县三级联动。 想到三种方法: 1.查询出所有省并显示,选择省或市,利用ajax从后台查询出对应数据,再显示。 2.查询出所有省市县,数据隐藏到页面,jquery实现联动显...

田野_7
2016/05/30
999
6
jquery带有参照数据的效果处理

几个简单小例子: 1.入门二级联动 2.二级联动 3.三级联动 4.简繁体转换 5.简单答题 6.创建课程表模板 这些例子有个共同的原理,就是有一个写好的参考数据模型,通过这个参考处理!什么参考,...

透笔度
2015/09/18
68
0
Android 三级地址选择器

地址选择器,效果图如下 选择器效果图 实现思路 (1)OkHttp发起请求,从html文件获取地址JSON数据 (2)利用三个NumberPicker实现选择 实现代码 okHttp 发起Get请求, 并且解析JSON数据(利用...

右眼皮的爱
2017/09/29
0
0
如何通过手机号初始化所属地区

在用户系统中常常会需要用户绑定手机号、填写联系地址,而一旦表单一多,就会让用户感觉异常繁琐,注册的门坎也就上升。这时候一个贴心的细节优化就会很好地改善用户体验,让用户眼前一亮。那...

一个路人甲
2016/11/15
589
1
基于jQuery+JSON的省市区三级地区联动

查看演示:http://www.helloweba.com/demo/cityselect/ 源码下载:http://files.cnblogs.com/files/huangcong/cityselect.rar 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系...

老朱教授
2017/10/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows下让 jar 在后台运行的办法

windows下 运行 java jar 不出现 命令行 窗口 新建一个披处理 run.bat,内容如下 @echo off start javaw -jar xx.jar exit 双击运行即可。...

glen_xu
14分钟前
1
0
jdk1.8 lambda stream 指定的对象属性进行去重

原因:因为Stream提供的distinct()方法只能去除重复的对象,无法根据指定的对象属性进行去重,可以应付简单场景。 解决方案: //去重,共同信息保存到bizPledgeSupplierVOs里bizPledgeSupp...

INSISTQIAO
16分钟前
0
0
vue nextTick深入理解---vue性能优化、DOM更新时机、事件循环机制

定义[nextTick、事件循环] nextTick的由来: 由于vue的数据驱动视图更新是异步的,即修改数据的当下,视图不会立即更新,而是等同一事件循环中的所有数据变化完成之后再统一进行视图更新。...

JamesView
24分钟前
1
0
常用汉字编码

GB2312 仅包含大部分的常用简体汉字,但已经不能适应现在的需要; GB13000 由于GB2312的局限性,国家标准化委员会制定了GB13000编码; 但由于当时的硬件和软件都已经支持了GB2312,而GB13000...

晨猫
26分钟前
1
0
纳尼?我的Gradle build编译只要1s

https://juejin.im/post/5c00ec39e51d4555ec0394f6

SuShine
27分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部