利用ibeetl 實現selectpicker 的三級聯動

時間 2019-11-13

標籤利用 ibeetl 實現 selectpicker 三級聯動简体版

原文原文鏈接

1. js 直接寫在html頁面上面,ibeetl 就能夠動態地利用後臺傳上來的model List ,不須要每次點擊都要ajax請求後臺javascript

2. 使用selectpicker 的時候,除了對selecct option的動態處理後,還須要html

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

來重置搜索的顯示行java

3. 因爲使用jquery 對修改項目的監聽,在處理層級的時候,就須要避免進入死循環jquery

所以不能像其餘select option 那樣直接使用ajax

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

來處理下級篩選行,bootstrap

由於這樣會形成,上級修改的時候會empty下級的option,會形成下級已經選擇的項刷新,而下級監聽到該id selected option 修改後,會觸發上級的修改,形成死循環app

因此須要,this

還有不少小坑,就不一一細說,直接上代碼spa

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。