簡介

QiYuAdmin專案的前端是基於漂亮的前端模板Metronic的，現在的版本是V4.7版本，由於沒有提供開發的詳細文件，只能慢慢的摸索，正好公司的專案也用到了，所以就將自己開發的過程中的一些經驗給整理出來，努力做出一個基於Metronic模板的中文文件出來，給分享出來。這篇文章主要是將bootstrap-table外掛增加通用的搜尋條件功能，方便以後類似的功能直接呼叫封裝好的共用js方法。

• 共用js和css梳理結果
• BootStrap-Table增加搜尋功能

共用js和css梳理結果

共用的css檔案

共用的js檔案

首頁梳理的js和css分別為

刪掉了很多無用的js和css，可以提高頁面的訪問速度了，注意：谷歌的api還沒有刪掉，如果你的網速比較慢或者還沒有連線網路，那可能會影響速度。至於其它提高訪問速度的地方我們在一一完善吧，接下來我們來看下bootstrap-table增加通用的搜尋功能吧。

BootStrap-Table增加搜尋功能

現狀

沒有搜尋條件，其實bootstrap-table本身提供了一個模糊搜尋，但是我們肯定想增加好幾個搜尋條件，符合咱們中國的這種傳統佈局。

結果

增加了三個條件，當然可以在新增一行在多增加幾個條件，都沒有問題的。這樣就比較符合我們的專案要求。按照賬號來搜尋一個試試看。結果如下：

接下來看下這裡面的程式碼吧。

先看下頁面的程式碼

上圖是頁面的幾個條件姓名、賬號、手機號碼，用的bootstrap的柵格系統。其中給搜尋的按鈕設定了一個id=“searchUsers”，給他繫結一個事件，如下圖所示。

這段程式碼我們可以看到，呼叫了一個共用的方法searchTable，這個是最終我們根據條件搜尋並查詢表格資料而封裝的共用的方法，以後只要是這種佈局的都可以直接這樣呼叫就可以了，是不是很方便。其實不是很複雜需要對bootstrap-table的框架進行研究，如下圖所示。

通過動態的設定bootstrap的請求的引數，我們就可以達到這種根據搜尋條件進行非同步請求返回資料的效果。

這裡需要注意一點，就是在一開始初始化bootstrap-table的時候，請求的url地址必須是不能帶引數的，什麼意思呢？比如說一開始初始化的地址如果是這樣的：/QiYuAdmin/user/page/list?sex=1。這樣的話bootstrap-table不會識別sex=1是一個引數，它只會把它當做地址，那麼此時如果你在根據其它的條件搜尋，sex=1一直會存在，除非你就需要這樣的需求，有一個特定的條件，不然的話最好初始化的時候把它放在引數裡面就可以了。

結論

至於後端的程式碼就不做演示了，就是在後端獲取到對應的實體類，然後在mapper.xml檔案裡面的sql語句新增在前端頁面加入的幾個條件，判斷一下是否為空，然後進行模糊搜尋就可以了。