背景
这段时间我在做一个FastAdmin二开的项目,其中有一个功能是搜索公司下拉框筛选出对应的公司部门,但是fastadmin给定的搜索中没有下拉框筛选,我们就需要自己去动手添加一个联动下拉框的功能,并且不能够影响到原有搜索。
要实现的效果如下
首先,fastadmin给我们提供了一个开发实例,我们可以借鉴开发实例中的表格完整示例或者自定义搜索示例如下图
列表上的搜索条件一般放在了js文件中我们需要找到示例的js文件
地址为:/public/assets/js/backed/example/bootstraptable.js
找到表格初始化 table.bootstrapTable 找到如下位置
我们可以发现示例中的联动搜索使用的是Template 首先我们要在js中引入Template 那么我们需要在对应的index.html中找到categorytpl模板
如下图
他使用的是两个select标签 data-url是请求后台的地址 加载页面请求第一个select的值,当选择第一个select后会自动请求第二个select
注意:以下代码是必须写的 其中的data-name与select中的name必须对应 想传几个值就需要写几个input 否则页面不会把值传到后台
<input type="hidden" class="operate" data-name="admin_id" value="=" />
我们来看一下data-url的地址请求
注意:返回一定要是用$this->success 否则无法显示
现在刷新页面就可以看到信息了
到现在应该是可以搜索了吧 NO NO NO 点击提交会发现没有任何反映。这是怎么回事呢?
因为这个我们自定义的搜索参数,我们需要把它们放到后台的where条件中去,我们应该怎么放呢?再回到js文件中去 找到如下代码:
它是用来追加搜索条件的我们刚才在html中添加name就可以在这里用到了
重点代码:
- //这里可以动态赋值,比如从URL中获取admin_id的值,filter.admin_id=Fast.api.query('admin_id');
- filter.admin_id = Fast.api.query('admin_id');
- op.admin_id = "=";
我们可以将admin_id修改成为我们自己传过来的name这样我们就可以搜索了!
以上是示例中的演示 万变不离其宗 我们可以根据自己的需求去进行修改
希望可以帮助到大家!