前端-你要的炫酷下拉框Bootstrap-Select来了

断断续续,把流水统计模块做完了,今天正好上线了,主要供内部使用^^
回头一想,虽然只是一个小功能,但是涉及到的部门和技术还不少呢。

  • 和源库源表所在的组了解数据接口

  • 找架构组,完成配置实现数据分表映射单表全量同步,以及增量同步

  • 我这边需要监听增量同步的Kafka消息,实现数据及时同步,添加一些定时器,保证数据每天统计更新等等

  • 画界面,包括明细以及统计信息的表格展示和图表展示,使用了bootstrap, highchart以及一会要介绍的bootstrap-select

前端-你要的炫酷下拉框Bootstrap-Select来了_第1张图片
37e40001f1c0fc9aa13d

请点击此处输入图片描述


前端-你要的炫酷下拉框Bootstrap-Select来了_第2张图片
37e700000ff68c9cc903

界面这块,后面有时间还需要优化调整。

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来了_第3张图片
37e300020b792cd3788c

如何使用Bootstrap-Select

下载JS和CSS

  • 如果你需要将js和css文件下载到本地可以到http://www.bootcdn.cn/bootstrap-select/找你需要的版本,然后分别下载bootstrap-select.min.css和bootstrap-select.min.js

  • 如果你希望通过在线访问的形式,就可以在head标签添加地址即可比如类似下图所示

前端-你要的炫酷下拉框Bootstrap-Select来了_第4张图片
37e300020f7d8c057d35

引用JS和CSS
在标签中加上如图所示

37e400020b6b5319a1dc

编写页面代码
有了前面的工作,我们就可以在页面里添加下拉框控件了,很简单