利用ibeetl 实现selectpicker 的三级联动

原创
2018/11/14 23:12
阅读数 3.5K

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

 

展开阅读全文
加载中
点击加入讨论🔥(2) 发布并加入讨论🔥
打赏
2 评论
1 收藏
1
分享
返回顶部
顶部