转头一想,虽然只是一个小功能,但是涉及到的部门和技能还不少呢。

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

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

html筛选功能下拉菜单前端你要的炫酷下拉框BootstrapSelect来了 Bootstrap

我这边须要监听增量同步的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() {

怎么样,是不是很大略,又很好用,你学会了?