斷斷續(xù)續(xù)，把流水統(tǒng)計(jì)模塊做完了，今天正好上線了，主要供內(nèi)部使用^^
回頭一想，雖然只是一個小功能，但是涉及到的部門和技術(shù)還不少呢。
和源庫源表所在的組了解數(shù)據(jù)接口
找架構(gòu)組，完成配置實(shí)現(xiàn)數(shù)據(jù)分表映射單表全量同步，以及增量同步
我這邊需要監(jiān)聽增量同步的Kafka消息，實(shí)現(xiàn)數(shù)據(jù)及時同步，添加一些定時器，保證數(shù)據(jù)每天統(tǒng)計(jì)更新等等
畫界面，包括明細(xì)以及統(tǒng)計(jì)信息的表格展示和圖表展示，使用了bootstrap， highchart以及一會要介紹的bootstrap-select
請點(diǎn)擊此處輸入圖片描述
界面這塊，后面有時間還需要優(yōu)化調(diào)整。
Bootstrap-Select
鑒于在已有的框架下使用的是JQuery和Bootstrap，又要用到綁定數(shù)據(jù)源的下拉框，那就非Bootstrap-Select莫屬了。
Bootstrap-Select是一個可以Bootstrap效果的JQuery插件。
官方網(wǎng)站：http://silviomoreto.github.io/bootstrap-select/
Github地址：https://github.com/silviomoreto/bootstrap-select
如何使用Bootstrap-Select
下載JS和CSS
如果你需要將js和css文件下載到本地可以到http://www.bootcdn.cn/bootstrap-select/找你需要的版本，然后分別下載bootstrap-select.min.css和bootstrap-select.min.js
如果你希望通過在線訪問的形式，就可以在head標(biāo)簽添加地址即可比如類似下圖所示
引用JS和CSS
在<head>標(biāo)簽中加上如圖所示
編寫頁面代碼
有了前面的工作，我們就可以在頁面里添加下拉框控件了，很簡單
<select id="testSelect" class="selectpicker show-tick form-control" data-width="250px" data-live-search="true">
selectpicker、show-tick和form-control都是樣式，data-width是設(shè)置的寬度，從而保證下拉框不會出現(xiàn)寬度抖動的情況
data-live-search設(shè)置為true，表示支持搜索功能，即可以從所有的下拉選項(xiàng)中篩選你搜索的項(xiàng)
這里的value="-1"是人為加上的
如果你想實(shí)現(xiàn)默認(rèn)情況下拉框不顯示任何值并給出一個虛化的提示信息，可以在select中加上data-first-option="false" title='請選擇需要查詢的合作方'
通過foreach標(biāo)簽遍歷從后臺取出的selectItems值，然后顯示為一個個選項(xiàng)
下面展示的搜索的功能，直接輸入，bootstrap-select會立即篩選會候選項(xiàng)
添加監(jiān)聽事件
有時候我們使用下拉框不僅僅是需要展示，我們需要使用它的監(jiān)聽事件，比如change，當(dāng)選中一個新的選項(xiàng)，我們希望展示的數(shù)據(jù)會跟隨選項(xiàng)值更新，這時候我們需要利用到函數(shù)change，好比這樣
$("#testSelect").change(function() {
怎么樣，是不是很簡單，又很好用，你學(xué)會了？
