• 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这样我们就可以搜索了!

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

    希望可以帮助到大家!

  • 相关阅读:
    RedisDesktopManager远程连接redis
    vue的第2篇 开发环境vscode的安装以及创建项目空间
    一个程序员的职业生涯到底该怎么规划?
    【Git1】指令,分支,ssh免密登录
    【配电网重构】基于粒子群算法的配电网重构问题研究附matlab代码
    【C++】-c++的类型转换
    电脑dll修复工具下载安装,专门解决(win系统)MSVCP100/110/120/140.dll丢失问题
    382. 链表随机节点
    【原创】在Linux上安装Zabbix客户端
    SpringMVC笔记
  • 原文地址:https://blog.csdn.net/qq_41904362/article/details/126298463