• FastAdmin列表实现自定义搜索及传值


    背景

    这段时间我在做一个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就可以在这里用到了

    重点代码:

    1. //这里可以动态赋值,比如从URL中获取admin_id的值,filter.admin_id=Fast.api.query('admin_id');
    2. filter.admin_id = Fast.api.query('admin_id');
    3. op.admin_id = "=";

    我们可以将admin_id修改成为我们自己传过来的name这样我们就可以搜索了!

    以上是示例中的演示 万变不离其宗 我们可以根据自己的需求去进行修改

    希望可以帮助到大家!

  • 相关阅读:
    Vue页面结构
    CSS笔记(黑马程序员pink老师前端)定位
    Hadoop快速上手-1
    qt nodeeditor编译安装
    数据治理建设管理办法(参考)(粉丝福利)
    Pytest接口自动化测试实战演练
    2022年全国职业院校技能大赛:网络系统管理项目-模块B--Windows样题10
    酷炫效果 进度条
    K8S 极速入门
    ROS工程实践1—创建工作空间和功能包
  • 原文地址:https://blog.csdn.net/qq_41904362/article/details/126298463