背景
Angularjs工程 bootstrap3
项目中的表格想要集成Filterable插件。实现在表头筛选表格内容。效果如下
过程
Filterable的git地址Filterable
下载Demo中的download.zip在本地运行,发现是bootstrap2版本
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link href="./libs/bootstrap-editable.css" rel="stylesheet">
<link href="../src/bootstrap-filterable.css" rel="stylesheet">
<link href="http://lightswitch05.github.io/filterable/stylesheets/main.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./libs/bootstrap-editable.min.js"></script>
<script src="./libs/jquery.filterable.min.js"></script>
bootstrap-combined.no-icons.min.css在bootstrap3中没有找到,应该是变成了bootstrap.min.css。
bootstrap.min.js替换成了3.3.7版本。
bootstrap-editable.min.js是1.5.1版本对应bootstrap3,发现会报typeahead找不到的错误,
在网上找到了bootstrap3-typeahead.min.js发现还是报错,最后看X-editable官网demo中有支持bootstrap3的例子,下载下来看例子的源码,发现引入了typeaheadjs.js,其实还引入了其他很多混淆的js文件,对比之后发现typeaheadjs.js是有用的。
jquery.filterable.min.js是filterable的支持文件。
文件引入了之后可以运行了,有两个问题:
- 每列的表头上没有filter的图标
- 输入的时候没有模糊匹配的下拉列表
问题1:后来仔细对比官网demo的控制台的index.html文件发现,代码使用filterable()的时候加了参数
$("#baseTable").filterable({editableSelector: 'i.fa.fa-filter'})
并且在th中加入了i标签,editableSelector的意思是用图标来控制filterable,如果不设置,就是表头来控制。
问题2:debugger源码发现,typeaheadjs文件中
this.$input.typeahead(this.options.typeahead);
应该是起作用的地方,其中this.options.typeahead为null,所以不显示模糊列表。看了一些官网的demo代码,发现这里一般传递的是数组,而this.options.source就是应该传递的数组,所以改动了源码,替换成了this.options.source。这里没有深入了解其原理,只是结果导向,直接使用source。
到此,filterable插件引入就完成了,效果如上面所示。
贴一下文件引入情况:
css省略。。。
<script src="xx/bootstrap.min.js"></script>
<script src="xx/bootstrap3-typeahead.min.js"></script>
<script src="xx/bootstrap-editable.min.js"></script>
<script src="xx/typeaheadjs.js"></script>
<script src="xx/jquery.filterable.min.js"></script>