fastadmin后台表格新增tab选项卡不生效问题

news2024/9/24 11:29:34

官方一张图解析表格列表功能文档:(一张图解析FastAdmin中的表格列表的功能 - FastAdmin问答社区)

会遇到后期手动添加tab栏的情况

首先,需要在控制器对应的index.html页面中需要增加你想要筛选的字段

  <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="is_alone">
            <li class="{:$Think.get.is_alone === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a>
            </li>
            {foreach name="isAloneList" item="vo"}
            <li class="{:$Think.get.is_alone === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}"data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>

其次需要在对应模型中去定义上述文件的isAloneList数据

 public function getIsAloneusList()
    {
        return ['0'=>__('Is_alone 0'),'1'=>__('Is_alone 1')];
    }

再其次需要经过控制器将数据传递到index.html页面

   $this->model = new \app\admin\model\api\Order;
   $this->assign("isAloneList",$this->model->getIsAloneusList());

经过上述操作后后台页面已经会呈现出你想要的tab选择框

 但是当你点击时会发现没有达到你想要的筛选数据的效果

最后需要再js中var table = $("#table");添加以下代码

  $('.panel-heading a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var field = $(this).closest("ul").data("field");
                var value = $(this).data("value");
                var options = table.bootstrapTable('getOptions');
                options.pageNumber = 1;
                options.queryParams = function (params) {
                    var filter = {};
                    if (value !== '') {
                        filter[field] = value;
                    }
                    params.filter = JSON.stringify(filter);
                    return params;
                };
                table.bootstrapTable('refresh', {});
                return false;
            });

注意:

        tab栏字段一定要和js中显示的字段相对应,否则也会发生不生效的作用

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/930805.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于神经网络的3D地质模型

地球科学家需要对地质环境进行最佳估计才能进行模拟或评估。 除了地质背景之外&#xff0c;建立地质模型还需要一整套数学方法&#xff0c;如贝叶斯网络、协同克里金法、支持向量机、神经网络、随机模型&#xff0c;以在钻井日志或地球物理信息确实稀缺或不确定时定义哪些可能是…

leetcode 583. 两个字符串的删除操作

2023.8.26 本题看似很绕&#xff0c;其实就是 最长公共子序列 的变式。 求出最长公共子序列之后&#xff0c;再用两单词的总长度减去他们的最长公共子序列即可。 代码如下&#xff1a; class Solution { public:int minDistance(string word1, string word2) {vector<vec…

Java——单例设计模式

什么是设计模式&#xff1f; 设计模式是在大量的实践中总结和理论化之后优选的代码结构、编程风格、以及解决问题的思考方式。设计模式免去我们自己再思考和摸索。就像是经典的棋谱&#xff0c;不同的棋局&#xff0c;我们用不同的棋谱、“套路”。 经典的设计模式共有23种。…

时序分解 | MATLAB实现基于SVD奇异值分解的信号分解分量可视化

时序分解 | MATLAB实现基于SVD奇异值分解的信号分解分量可视化 目录 时序分解 | MATLAB实现基于SVD奇异值分解的信号分解分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 SVD分解重构算法&#xff0c;MATLAB程序&#xff0c;奇异值分解 (Singular Value Decompo…

响应式web-PC端web与移动端web(H5)兼容适配 选型方案

背景 项目需要&#xff0c;公司已经有一套PC端web&#xff0c;需要做一套手机端浏览器可用的&#xff0c;但是又想兼容pc端&#xff0c;适配的web项目。 以下是查阅到响应布局现成的开源模版。根据自己技术栈&#xff0c;vue2,js来搜索相关的开源项目。 RuoYi 使用若依快速…

【C++进阶(一)】STL大法以及string的使用

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; STL标准库 1. 前言2. STL库的版本以及缺陷3. ST…

骨传导耳机和普通耳机哪个危害大?一文读懂骨传导耳机!

作为一个5年重度运动爱好者&#xff0c;常年跑步、爬山、骑行&#xff0c;入手过的各类耳机超30款&#xff0c;用真实体验告诉大家&#xff0c;骨传导耳机和普通耳机哪个危害大&#xff01; 首先大家要知道的是&#xff0c;不管什么类型的耳机&#xff0c;如说说音量过大&…

origin导出pdf曲线超出边框

软件版本 软件版本Word2021Origin2021Adobe Acrobat Pro2023 问题描述 Origin导出的emf格式矢量图片&#xff0c;插入到Word中&#xff0c;显示正常&#xff0c;但是在使用Word导出→创建Adobe PDF→创建Adobe PDF导出PDF文件后&#xff0c;图片曲线就会超出边框&#xff0c…

MySQL—MySQL的NULL值是怎么存放的

一、引言 1、MySQL数据存放在哪个文件&#xff1f; 创建一个数据库会产生三种格式的文件&#xff0c;分别是.opt格式、.frm格式、.ibd格式。 opt格式&#xff1a;用来存储当前数据库的默认字符集和字符校验规则。 frm格式&#xff1a;该文件是用来保存每个表的元数据信息的&…

骨传导耳机哪个牌子好?这几款热门骨传导耳机款式不要错过

我是一名耳机的重度使用者&#xff0c;每天上下班的路上都会使用耳机来听音乐&#xff0c;以前使用有线耳机多一些&#xff0c;后来无线耳机出现&#xff0c;我就开始使用无线耳机。无线耳机有很多种&#xff0c;挂颈式、真无线、骨传导、气传导等各种耳机都有用过&#xff0c;…

nodejs+vue养老院管理系统 u1yrv

本智慧养老中心管理系统是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了老人信息和管理员这两者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可…

无涯教程-进程 - 内存映射

mmap()系统调用提供了将文件或设备映射到内存的调用进程的虚拟地址空间中的映射。这有两种类型- 文件映射 - 此映射将进程的虚拟内存区域映射到文件&#xff0c;这意味着读取或写入那些内存区域会导致文件被读取或写入&#xff0c;这是默认的映射类型。 匿名映射 - 此映射…

AI新时代,英特尔如何加强产学研融合?

人工智能作为当前数字经济发展的核心驱动力&#xff0c;我们在关注AI技术发展之际&#xff0c;为发挥AI强大助力&#xff0c;更需进一步思考AI的科研、产业应用与人才培育的工作&#xff0c;推动产学研融合创新。 正如英特尔公司高级副总裁、英特尔中国区董事长王锐在刚结束的…

[Linux]命令行参数和进程优先级

[Linux]命令行参数和进程优先级 文章目录 [Linux]命令行参数和进程优先级命令行参数命令行参数的概念命令函参数的接收编写代码验证 进程优先级进程优先级的概念PRI and NI使用top指令修改nice值 命令行参数 命令行参数的概念 命令行参数是指用于运行程序时在命令行输入的参数…

论文阅读:Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks

前言 要弄清MAML怎么做&#xff0c;为什么这么做&#xff0c;就要看懂这两张图。先说MAML**在做什么&#xff1f;**它是打着Mate-Learing的旗号干的是few-shot multi-task Learning的事情。具体而言就是想训练一个模型能够使用很少的新样本&#xff0c;快速适应新的任务。 定…

windows下MSYS、MinGW编译环境使用网络API时报错:undefined reference to `inet_pton‘解决办法

windows下MSYS、MinGW编译环境使用网络API时报错&#xff1a;undefined reference to inet_pton’解决办法 mingw-gcc环境使用网络需要加上库 -lws2_32。 如果是使用的是Qt Creator那么需要在.pro文件中加入一行&#xff1a;win32:LIBS -lws2_32。 当在项目中使用inet_pton、…

Vue2向Vue3过度Vuex状态管理工具快速入门

目录 1 Vuex概述1.是什么2.使用场景3.优势4.注意&#xff1a; 2 需求: 多组件共享数据1.创建项目2.创建三个组件, 目录如下3.源代码如下 3 vuex 的使用 - 创建仓库1.安装 vuex2.新建 store/index.js 专门存放 vuex3.创建仓库 store/index.js4 在 main.js 中导入挂载到 Vue 实例…

在为水质担忧吗?——水质检测大屏展示系统启动(inscode直观运行)

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…

哪款运动耳机好用、舒服的运动耳机推荐

如今&#xff0c;运动耳机已成为备受热捧的运动潮流单品&#xff0c;消费者对耳机的需求非常多元化。一款出色的运动耳机不仅要满足基本的运动需求&#xff0c;还需要具备丰富的功能&#xff0c;这直接决定了耳机的附加价值。接下来&#xff0c;我将向大家推荐5款佩戴舒适、牢固…

Arduino驱动四位0.36英寸共阴数码管模块

目录 一、简介二、参数性能三、电路原理图四、使用方法 一、简介 点击图片购买 四位0.36英寸共阴数码管模块由一个12引脚的0.36英寸红色共阴数码管和一个TM1650驱动芯片构成&#xff0c;大大减少了驱动引脚与连线&#xff0c;只需要四根引线IIC即可控制数码管的显示。TM11650是…