Fastadmin根据链接参数显示不同列表格

ETO_冬2025-02-11 11:30

前端有不同的角色，我在后台设置了不同的菜单管理账号，如下图：

不同的账号表格中要展示不同的内容，要显示不同的列。

解决办法是在定义表格前获取url中的group_id参数，根据不同参数定义不同的表格。

代码如下：

javascript 复制代码 
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    //group_id的值传递给后台接口处理相应逻辑
                    index_url: 'user/user/index'+location.search,
                    add_url: 'user/user/add'+location.search,
                    edit_url: 'user/user/edit'+location.search,
                    del_url: 'user/user/del'+location.search,
                    multi_url: 'user/user/multi',
                    table: 'user',
                }
            });

            var table = $("#table");
            // 解析 URL 查询参数 获取group_id的值
            var queryParams = new URLSearchParams(location.search);
            var groupId = queryParams.get('group_id');

            if (groupId == 1) {
                // 学员表格
                table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'id',
                    sortName: 'user.id',
                    columns: [
                        [
                            {checkbox: true},
                            {field: 'id', title: __('Id'), sortable: true,operate:false},
                            {field: 'group.name', title: __('Group'),operate:false},
                            {field: 'username', title: __('Username'), operate: 'LIKE'},
                            {field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
                            // {field: 'email', title: __('Email'), operate: 'LIKE'},
                            {field: 'mobile', title: __('Mobile'), operate: 'LIKE'},
                            {field: 'avatar', title: __('Avatar'), events: Table.api.events.image, formatter: Table.api.formatter.image, operate: false},
                            // {field: 'level', title: __('Level'), operate: 'BETWEEN', sortable: true},
                            // {field: 'gender', title: __('Gender'), visible: false, searchList: {1: __('Male'), 0: __('Female')}},
                            // {field: 'score', title: __('Score'), operate: 'BETWEEN', sortable: true},
                            // {field: 'successions', title: __('Successions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'maxsuccessions', title: __('Maxsuccessions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'logintime', title: __('Logintime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'loginip', title: __('Loginip'), formatter: Table.api.formatter.search},
                            {field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'joinip', title: __('Joinip'), formatter: Table.api.formatter.search},
                            {field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {normal: __('Normal'), hidden: __('Hidden')}},
                            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                        ]
                    ]
                });
            } else if (groupId == 2) {
                // 家长表格
                table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'id',
                    sortName: 'user.id',
                    columns: [
                        [
                            {checkbox: true},
                            {field: 'id', title: __('Id'), sortable: true,operate:false},
                            {field: 'group.name', title: __('Group'),operate:false},
                            {field: 'username', title: __('Username'), operate: 'LIKE'},
                            {field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
                            // {field: 'email', title: __('Email'), operate: 'LIKE'},
                            {field: 'mobile', title: __('Mobile'), operate: 'LIKE'},
                            {field: 'avatar', title: __('Avatar'), events: Table.api.events.image, formatter: Table.api.formatter.image, operate: false},
                            // {field: 'level', title: __('Level'), operate: 'BETWEEN', sortable: true},
                            // {field: 'gender', title: __('Gender'), visible: false, searchList: {1: __('Male'), 0: __('Female')}},
                            // {field: 'score', title: __('Score'), operate: 'BETWEEN', sortable: true},
                            // {field: 'successions', title: __('Successions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'maxsuccessions', title: __('Maxsuccessions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'logintime', title: __('Logintime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'loginip', title: __('Loginip'), formatter: Table.api.formatter.search},
                            {field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'joinip', title: __('Joinip'), formatter: Table.api.formatter.search},
                            {field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {normal: __('Normal'), hidden: __('Hidden')}},
                            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                        ]
                    ]
                });
            } else if (groupId == 3)  {
                // 经销商表格
                table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'id',
                    sortName: 'user.id',
                    columns: [
                        [
                            {checkbox: true},
                            {field: 'id', title: __('Id'), sortable: true,operate:false},
                            {field: 'group.name', title: __('Group'),operate:false},
                            {field: 'username', title: __('Username'), operate: 'LIKE'},
                            {field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
                            // {field: 'email', title: __('Email'), operate: 'LIKE'},
                            {field: 'mobile', title: __('Mobile'), operate: 'LIKE'},
                            {field: 'avatar', title: __('Avatar'), events: Table.api.events.image, formatter: Table.api.formatter.image, operate: false},
                            // {field: 'level', title: __('Level'), operate: 'BETWEEN', sortable: true},
                            // {field: 'gender', title: __('Gender'), visible: false, searchList: {1: __('Male'), 0: __('Female')}},
                            // {field: 'score', title: __('Score'), operate: 'BETWEEN', sortable: true},
                            // {field: 'successions', title: __('Successions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'maxsuccessions', title: __('Maxsuccessions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'logintime', title: __('Logintime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'loginip', title: __('Loginip'), formatter: Table.api.formatter.search},
                            {field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'joinip', title: __('Joinip'), formatter: Table.api.formatter.search},
                            {field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {normal: __('Normal'), hidden: __('Hidden')}},
                            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                        ]
                    ]
                });
            }else{
                // 体验账号表格
                table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'id',
                    sortName: 'user.id',
                    columns: [
                        [
                            {checkbox: true},
                            {field: 'id', title: __('Id'), sortable: true,operate:false},
                            {field: 'group.name', title: __('Group'),operate:false},
                            {field: 'username', title: __('Username'), operate: 'LIKE'},
                            {field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
                            // {field: 'email', title: __('Email'), operate: 'LIKE'},
                            {field: 'mobile', title: __('Mobile'), operate: 'LIKE'},
                            {field: 'avatar', title: __('Avatar'), events: Table.api.events.image, formatter: Table.api.formatter.image, operate: false},
                            // {field: 'level', title: __('Level'), operate: 'BETWEEN', sortable: true},
                            // {field: 'gender', title: __('Gender'), visible: false, searchList: {1: __('Male'), 0: __('Female')}},
                            // {field: 'score', title: __('Score'), operate: 'BETWEEN', sortable: true},
                            // {field: 'successions', title: __('Successions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'maxsuccessions', title: __('Maxsuccessions'), visible: false, operate: 'BETWEEN', sortable: true},
                            // {field: 'logintime', title: __('Logintime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'loginip', title: __('Loginip'), formatter: Table.api.formatter.search},
                            {field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                            // {field: 'joinip', title: __('Joinip'), formatter: Table.api.formatter.search},
                            {field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: {normal: __('Normal'), hidden: __('Hidden')}},
                            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                        ]
                    ]
                });
            }


            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});
相关推荐
Moment16 分钟前
想做远程工作？这些技术栈和思维得准备好 🥰🥰🥰
前端·javascript·面试
晓得迷路了1 小时前
栗子前端技术周刊第 83 期 - Rolldown-Vite、Angular v20、Docusaurus 3.8...
前端·javascript·vite
独立开阀者_FwtCoder1 小时前
如何让 Cursor AI Agent始终遵守项目规范：使用自动规则生成技术
java·前端·javascript
独立开阀者_FwtCoder1 小时前
尤雨溪宣布：Vue 3.6 重大更新！Vite 将彻底重写！
前端·javascript·后端
婵鸣空啼1 小时前
PHP与MYSQL结合中中的一些常用函数,HTTP协议定义，PHP进行文件编程,会话技术
学习·mysql·http·php
江城开朗的豌豆1 小时前
JavaScript篇：如何实现add(1)(2)(3)()=6？揭秘链式调用的终极奥义！
前端·javascript·面试
江城开朗的豌豆1 小时前
JavaScript篇：GET、POST、PUT...傻傻分不清？一篇文章带你玩转HTTP请求！
前端·javascript·面试
nvvas6 小时前
Laravel单元测试使用示例
单元测试·php·laravel
hao_wujing10 小时前
使用逆强化学习对网络攻击者的行为偏好进行建模
开发语言·网络·php
烛阴11 小时前
Date-fns教程：现代JavaScript日期处理从入门到精通
前端·javascript
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05DeepSeek各版本说明与优缺点分析06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08【2025年最新】OpenWrt 更换国内源的指南（图形界面版)09VMware虚拟机安装Win7专业版保姆级教程（附镜像包）10模糊PID控制算法实战讲解-案例温度控制（附C语言实现）