bootstrap實現多個下拉框同時搜索

来源:http://www.cnblogs.com/xiaolin-peter/archive/2017/07/18/7201250.html
-Advertisement-
Play Games

1.第一個下拉框代碼 <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> <!--快速查詢--> <div class="input-group"> <span class="input-gr ...


1.第一個下拉框代碼

     <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> 
              <!--快速查詢-->
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                <select data-filter-type="2" name="copyfrom" class="form-control select2" data-validate="notempty" style="visibility: hidden;" data-field="name" data-placeholder="搜索數據資源">
                  <option value="">請選擇數據資源</option>
                  <optgroup label="UNESCO二類中心">
                    <#list data.copyfromList as entity>
                    <#if (entity.type?? && entity.type == '1')>
                    <option value="${entity.alias!}" <#if (param.copyfrom?? && param.copyfrom == entity.alias)>selected</#if>>${entity.alias!}</option>
                    </#if>
                    </#list>
                  </optgroup>
                  <optgroup label="科技動態與進展">
                    <#list data.copyfromList as entity>
                    <#if (entity.type?? && entity.type == '7')>
                    <option value="${entity.alias!}" <#if (param.copyfrom?? && param.copyfrom == entity.alias)>selected</#if>>${entity.alias!}</option>
                    </#if>
                    </#list>
                  </optgroup>
                  <optgroup label="其他">
                    <#list data.copyfromList as entity>
                    <#if (entity.type?? && entity.type == '8')>
                    <option value="${entity.alias!}" <#if (param.copyfrom?? && param.copyfrom == entity.alias)>selected</#if>>${entity.alias!}</option>
                    </#if>
                    </#list>
                  </optgroup>
                </select>
              </div>
            </div>   2.第二個下拉框代碼           <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> 
              <!--快速查詢-->
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                <select data-filter-type="2" name="cid" class="form-control select2" data-validate="notempty" style="visibility: hidden;" data-field="name" data-placeholder="搜索欄目名稱">
                  <option value=""></option>
                  <#list data.categories as entity>
                  <option value="${entity.id}" <#if (param.cid?? && param.cid == entity.id)>selected</#if>>${entity.id} - ${entity.name}</option>
                  </#list>
                </select>
              </div>
            </div>   3.後臺js代碼(url 參數整理)

  bindEvents:function(){
    var self = this, dom = self.element;
    $('select[name="copyfrom"]', dom).change(function(event){
    self.params.copyfrom = $(this).val();
    var url = self.formatParams(self.params);
    window.location.href = "cekasp_article.htm" + url;
  });

    $('select[name="cid"]', dom).change(function(event){
    self.params.cid = $(this).val();
    var url = self.formatParams(self.params);
    window.location.href = "cekasp_article.htm" + url;
  });

 }

  formatParams:function(params){
    var self = this;
    var url = "";
    for(var param in params){
    if(params[param]){
      url += param + "=" + params[param] + "&";
    }
  }
    if(url.length > 0){
      url = "?" + url.substring(0,url.length-1);
  }
    return url;
  }

 4.後臺java部分代碼(接收參數,然後過濾器根據參數得到想要的結果)

    String categoryId = request.optString("cid");
  if (!ValidateUtil.isNull(categoryId)) {
  // 載入欄目信息
      JSONObject jsonCategory = toJSONObject(adminService.loadById(CekaspCategory.class, categoryId));
    response.put("category", jsonCategory);
    param.addFilter("id", FilterType.IN, articleIdList, 1);

  }

  String copyfrom = request.optString("copyfrom");
  if (!ValidateUtil.isNull(copyfrom)) {
    param.addFilter("copyfrom", FilterType.EQUALS, copyfrom);

    } 

   List<CekaspArticle> articleList = adminService.list(CekaspArticle.class,param);

      

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 數組 用於存儲一組同一數據類型數據的容器 數組會對放入其中的數據自動編號,編號是從0開始的 下標 定義格式 數據類型[] 數組名 = new 數據類型[數組的大小]; 可以先聲明再初始化 int[] arr = new int[5]; 定義了一個最多能存儲5的整數的數組 arr[3] = 4; ar ...
  • 最近在學習tensorflow框架,在ubuntu下用到python的一個ide --spyder,以下是常用快捷鍵 Ctrl+1:註釋/撤銷註釋 Ctrl+4/5:塊註釋/撤銷塊註釋 Ctrl+L:跳轉到行號 F5:運行 F11:全屏 Tab:空行前是代碼縮進;在輸入一個字母後,按Tab健會自動補 ...
  • (一) shiro的SecurityManager類結構為: 總結: 1.SecurityManager主要作用於登錄、登出用創建主題Subject,並繼承自Authenticator身份驗證器和許可權驗證器和sessionManager,這些介面不對外開放,shiro本身自己調用,客戶端使用應該使用 ...
  • http://blog.csdn.net/justmeh/article/details/5844650 ...
  • 工作3個月,第一次加入純後臺的程式改造,程式中,業務流程是有n個確定的對數據檢測項,檢測項有個開關,開了就檢測blablabla,每個檢測項為一個類,內方法不是static。 在原程式中流程為:對所有檢測項目用if判斷其是否為打開,然後實例化,調用方法。這樣的代碼重覆挺多的,能有上500行了,除了各 ...
  • 這是用於序列化的兩個模塊: • json: 用於字元串和python數據類型間進行轉換 • pickle: 用於python特有的類型和python的數據類型間進行轉換 Json模塊提供了四個功能:dumps、dump、loads、load pickle模塊提供了四個功能:dumps、dump、lo ...
  • 我們之前一直都在使用的urlopen,這是一個特殊的opener(也就是模塊幫我們構建好的)。 但是基本的urlopen()方法不支持代理、cookie等其他的HTTP/HTTPS高級功能。所以要支持這些功能: 1.使用相差的Handler處理器來創建特定功能的處理器對象; 2.然後通過urllib ...
  • 描述: 有配置文件address_relation.properties,記錄地址關係,有如下數據:ZSSS=ZS%,ZSPD, 封裝到Map代碼如下: 工具類請查看博文:讀取配置文件工具類地址 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...