简介
QiYuAdmin项目的前端是基于漂亮的前端模板Metronic的，现在的版本是V4.7版本，由于没有提供开发的详细文档，只能慢慢的摸索，正好公司的项目也用到了，所以就将自己开发的过程中的一些经验给整理出来，努力做出一个基于Metronic模板的中文文档出来，给分享出来。这篇文章主要是将bootstrap-table插件增加通用的搜索条件功能，方便以后类似的功能直接调用封装好的共用js方法。
- 共用js和css梳理结果
- BootStrap-Table增加搜索功能
共用js和css梳理结果
上一篇文章 QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)，最终梳理了一下项目的共用js和css，还有把首页也给整理了一下，感觉轻松很多啊。
共用的css文件
共用的js文件
首页梳理的js和css分别为
删掉了很多无用的js和css，可以提高页面的访问速度了，注意：谷歌的api还没有删掉，如果你的网速比较慢或者还没有连接网络，那可能会影响速度。至于其它提高访问速度的地方我们在一一完善吧，接下来我们来看下bootstrap-table增加通用的搜索功能吧。
BootStrap-Table增加搜索功能
现状
没有搜索条件，其实bootstrap-table本身提供了一个模糊搜索，但是我们肯定想增加好几个搜索条件，符合咱们中国的这种传统布局。
结果
增加了三个条件，当然可以在添加一行在多增加几个条件，都没有问题的。这样就比较符合我们的项目要求。按照账号来搜索一个试试看。结果如下：
接下来看下这里面的代码吧。
先看下页面的代码
上图是页面的几个条件姓名、账号、手机号码，用的bootstrap的栅格系统。其中给搜索的按钮设定了一个id=“searchUsers”，给他绑定一个事件，如下图所示。
这段代码我们可以看到，调用了一个共用的方法searchTable，这个是最终我们根据条件搜索并查询表格数据而封装的共用的方法，以后只要是这种布局的都可以直接这样调用就可以了，是不是很方便。其实不是很复杂需要对bootstrap-table的框架进行研究，如下图所示。
通过动态的设置bootstrap的请求的参数，我们就可以达到这种根据搜索条件进行异步请求返回数据的效果。
这里需要注意一点，就是在一开始初始化bootstrap-table的时候，请求的url地址必须是不能带参数的，什么意思呢？比如说一开始初始化的地址如果是这样的：/QiYuAdmin/user/page/list?sex=1。这样的话bootstrap-table不会识别sex=1是一个参数，它只会把它当做地址，那么此时如果你在根据其它的条件搜索，sex=1一直会存在，除非你就需要这样的需求，有一个特定的条件，不然的话最好初始化的时候把它放在参数里面就可以了。
结论
至于后端的代码就不做演示了，就是在后端获取到对应的实体类，然后在mapper.xml文件里面的sql语句添加在前端页面加入的几个条件，判断一下是否为空，然后进行模糊搜索就可以了。