大家好，欢迎来到IT知识分享网。
断断续续，把流水统计模块做完了，今天正好上线了，主要供内部使用^^
回头一想，虽然只是一个小功能，但是涉及到的部门和技术还不少呢。
-
和源库源表所在的组了解数据接口
-
找架构组，完成配置实现数据分表映射单表全量同步，以及增量同步
-
我这边需要监听增量同步的Kafka消息，实现数据及时同步，添加一些定时器，保证数据每天统计更新等等
-
画界面，包括明细以及统计信息的表格展示和图表展示，使用了bootstrap， highchart以及一会要介绍的bootstrap-select
界面这块，后面有时间还需要优化调整。
Bootstrap-Select
鉴于在已有的框架下使用的是JQuery和Bootstrap，又要用到绑定数据源的下拉框，那就非Bootstrap-Select莫属了。
Bootstrap-Select是一个可以Bootstrap效果的JQuery插件。
官方网站：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标签添加地址即可比如类似下图所示
引用JS和CSS
在<head>标签中加上如图所示
编写页面代码
有了前面的工作，我们就可以在页面里添加下拉框控件了，很简单
<select id="testSelect" class="selectpicker show-tick form-control" data-width="250px" data-live-search="true">
-
selectpicker、show-tick和form-control都是样式，data-width是设置的宽度，从而保证下拉框不会出现宽度抖动的情况
-
data-live-search设置为true，表示支持搜索功能，即可以从所有的下拉选项中筛选你搜索的项
-
这里的value=”-1″是人为加上的
-
如果你想实现默认情况下拉框不显示任何值并给出一个虚化的提示信息，可以在select中加上data-first-option=”false” title=’请选择需要查询的合作方’
-
通过foreach标签遍历从后台取出的selectItems值，然后显示为一个个选项
下面展示的搜索的功能，直接输入，bootstrap-select会立即筛选会候选项
添加监听事件
有时候我们使用下拉框不仅仅是需要展示，我们需要使用它的监听事件，比如change，当选中一个新的选项，我们希望展示的数据会跟随选项值更新，这时候我们需要利用到函数change，好比这样
$("#testSelect").change(function() {
怎么样，是不是很简单，又很好用，你学会了？
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/49847.html
