2023年1月9日:fastadmin在列表操作列区域添加按钮及控制已有按钮显示

news2024/11/17 4:44:38

列表操作列区域添加按钮 

buttons: [{
       name: 'detail',
       title: __('详情'),
       classname: 'btn btn-xs btn-primary btn-dialog',
       icon: 'fa fa-list',
       url: 'audit/detail',
       callback: function (data) {
                Layer.alert("接收到回传数据:" + JSON.stringify(data), {title: "回传数据"});
      }
}],

配置含义:

name:唯一标识,其中index/add/edit/del/multi/import这几个框架已经暂用,如果使用将会覆盖已有属性
text:按钮上的文本,可以为空时,为空时按钮将不显示文字信息,为空时最好配置上icon的值
title:按钮的标题信息,当鼠标移到上面时显示的文字,同时作为dialog弹出窗时的标题信息
icon:按钮上的按钮信息,可使用Font-awesome的按钮,当text为空时请务必填写该值
classname:按钮的class标签的值,建议btn btn-xs为必选,这样可以和其它按钮更加协调搭配,可搭配用的按钮颜色有btn-primary、btn-success、btn-danger、btn-warning,还有额外的功能class如btn-dialog、btn-addtabs、btn-ajax,下面会详细介绍。
url : 按钮点击后跳转的链接,可选且可使用相对链接。为空时按钮的链接为javascript:;
dropdown:按钮分组名称,用于将按钮分组下拉
refresh:是否在执行完事件后刷新列表,常配合classname:'btn-ajax'使用
confirm:提示确认信息,常配合classname属性为btn-ajaxbtn-dialogbtn-addtabs使用
extend:扩展属性,用于扩展按钮的自定义属性
hidden:控制按钮是否隐藏属性,支持function
visible:控制按钮是否显示属性,支持function
disable:控制按钮是否禁用属性,支持function

功能Class

btn-dialog : 点击按钮后将会以弹窗的形式打开url这个链接
btn-addtabs : 点击按钮后将会在顶部选项卡中新增一个选项卡并跳转
btn-ajax : 点击按钮后将会发起一个Ajax请求

根据权限控制按钮显示

经过上述的操作,添加按钮已经成功了,如何根据权限控制按钮的显示呢?这里我们需要找到index.html这个视图,其中table的内容如下

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
      data-operate-edit="{:$auth->check('audit/edit')}"
      data-operate-del="{:$auth->check('audit/del')}"
      width="100%">
</table>

其中可以看到我们给表格添加了额外的data属性,默认添加了edit、del这两个权限检测。
如果需要对detail按钮进行权限控制,可添加data-operate-detail属性,如下

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
      data-operate-edit="{:$auth->check('audit/edit')}"
      data-operate-del="{:$auth->check('audit/del')}"
      data-operate-detail="{:$auth->check('audit/detail')}"
      width="100%">
</table>

其中data-operate-detail这里的detail对应的就是我们按钮中的name值,而{:$auth->check('audit/detail')}中的audit/detail对应的就是我们方法的控制器和方法。
只需要上面这一行代码,如果管理员没有audit/detail这个权限,则detail这个按钮就不会显示了。

如果需要隐藏默认的编辑删除按钮,可以将相应的值置为空即可,如下:

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
      data-operate-edit=""
      data-operate-del=""
      data-operate-detail="{:$auth->check('audit/detail')}"
      width="100%">
</table>

 自己学习当笔记用(引用地址:fastadmin如何在列表操作列区域添加按钮及控制已有按钮显示 - 走看看)

案例:

js按钮

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
     buttons: [{
         name: 'detail',
         title: __('详情'),
         classname: 'btn btn-xs btn-primary btn-dialog',
         icon: 'fa fa-list',
         url: 'audit/details',
         callback: function (data) {
             Layer.alert("接收到回传数据:" + JSON.stringify(data), {title: "回传数据"});
         }
      }],
     formatter: Table.api.formatter.operate
}

 控制器方法

    /**
     * 补卡详情
     */
    public function details($ids){
        $row = $this->model->get(['id' => $ids]);
        if (!$row) {
            $this->error(__('No Results were found'));
        }
        if ($this->request->isAjax()) {
            $this->success("Ajax请求成功", null, ['id' => $ids]);
        }
        $data = $row->toArray();
        $recdata = db('record r')
            ->join('user u','r.user_id = u.id')
            ->join('labor l','r.labor_id = l.id')
            ->join('client c','r.client_id = c.id')
            ->where('r.id',$data['record_id'])
            ->field('u.username,u.idcard,l.labname as labname,c.sitename as sitename,r.site,r.cardtype')
            ->find();
        switch ($recdata['cardtype']){
            case 3 :
                $data['cardtype']= "上班补卡";
                break;
            case 4 :
                $data['cardtype']= "下班补卡";
                break;
        }
        $data['username'] = $recdata['username'];
        $data['site'] = $recdata['site'];
        $data['idcard'] = $recdata['idcard'];
        $data['site'] = $recdata['site'];
        $data['labname'] = $recdata['labname'];
        $data['sitename'] = $recdata['sitename'];
        $data['createtime'] = date('Y-m-d H:m:s',$data['createtime']);
        $this->view->assign("row", $data);
        return $this->view->fetch();
    }

 模板文件

<table class="table table-striped">
    <thead>
    <tr>
        <th>{:__('Title')}</th>
        <th>{:__('Content')}</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>姓名:</td>
        <td style="word-break: break-all;">{$row.username}</td>
    </tr>
    <tr>
        <td>身份证号:</td>
        <td style="word-break: break-all;">{$row.idcard}</td>
    </tr>
    <tr>
        <td>所属劳务:</td>
        <td style="word-break: break-all;">{$row.labname}</td>
    </tr>
    <tr>
        <td>客户现场:</td>
        <td style="word-break: break-all;">{$row.sitename}</td>
    </tr>
    <tr>
        <td>地址:</td>
        <td style="word-break: break-all;">{$row.site}</td>
    </tr>
    <tr>
        <td>补卡类型:</td>
        <td style="word-break: break-all;">{$row.cardtype}</td>
    </tr>
    <tr>
        <td>补卡理由:</td>
        <td style="word-break: break-all;">{$row.bk_reason}</td>
    </tr>
    <tr>
        <td>审批意见:</td>
        <td style="word-break: break-all;">{$row.bh_report}</td>
    </tr>
    <tr>
        <td>提交时间:</td>
        <td style="word-break: break-all;">{$row.createtime}</td>
    </tr>
    </tbody>
</table>
<div class="hide layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
        <button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">{:__('Close')}</button>
    </div>
</div>
详情

 

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

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

相关文章

【nvivo11plus教程】01_nvivo介绍、案例与批注

1、查看nvivo版本2、nvivo是如何支持质性研究的3、nvivo的项目介绍4、建立nvivo项目(1)建立项目(2)文件夹(3)新建分类(4)建立备忘录5、案例(1)建立案例(2)案例节点分类的变量设置(3)归类案例6、批注7、备忘录链接1、查看nvivo版本 2、nvivo是如何支持质性研究的 是一个迭代的过…

MATLAB算法实战应用案例精讲-【数据分析】时许异常检测

前言 时间序列异常检测的目的就是在时间序列中寻找不符合常见规律的异常点,无论是在学术界还是工业界这都是一个非常重要的问题。企业的运维场景中有海量的运维指标数据,如果单纯依靠人力来发现并定位异常,将是十分低效的,所以如果可以开发一个智能运维系统对于异常波动自…

MAC地址

目录MAC地址广播信道的数据链路层必须使用地址&#xff08;MAC&#xff09;IEEE 802局域网的MAC地址格式IEEE 802局域网的MAC地址发送顺序单播MAC地址举例广播MAC地址举例多播MAC地址举例MAC地址 使用点对点信道的数据链路层不需要使用地址使用广播信道的数据链路层必须使用地址…

加解密与HTTPS(6)

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e;随着成本的下降&#xff0c;主流网站都已经开始使用HTTPS了。但有了可信机构颁发的证书&#xff0c;网站就真的绝对安全了吗&#xff1f;以之前出现过的上大学被冒…

多任务系统概述

一个例子&#xff1a; int Main(void) { TargetInit(); //初始化目标板OSInit(); //初始化操作系统 OSTaskCreate(Task0,&StackTask0[StackSizeTask0 - 1],PrioTask0); // 创建一个任务Uart_Printf("Ready to start OS\n"); OSStart(); //运行操作系统return 0…

AtCoder Beginner Contest 284(A~E)

比赛名称&#xff1a;AtCoder Beginner Contest 284 比赛链接&#xff1a;AtCoder Beginner Contest 284 A - Sequence of Strings 输入若干字符串&#xff0c;再把这些字符串按输入顺序倒序输出 #include <bits/stdc.h> using namespace std; signed main() {ios::sy…

年终盘点(二)丨2022计讯物联荣誉资质大盘点

峥嵘岁月&#xff0c;奋力前行。2022年&#xff0c;计讯物联积极发扬实干精神&#xff0c;聚力做强做精做专物联网产业&#xff0c;全面助力数字化转型升级&#xff0c;以硬核的实力揽获多项殊荣。 每一项荣誉的背后是计讯领导的的正确指导与全力支持&#xff0c;更是全体计讯人…

综合项目 旅游网【2. 优化servlet】没有指定的js文件读不到文件 错误

优化servlet目的减少Servlet的数量&#xff0c;现在是一个功能一个Servlet&#xff0c;将其优化为一个模块一个Servlet&#xff0c;相当于在数据库中一张表对应一个Servlet&#xff0c;在Servlet中提供不同的方法&#xff0c;完成用户的请求。如何解决测试时控制台中文乱码&…

VS2019+Opencv3.4+Win10配置详解

一.下载opencv 官网&#xff1a;Releases - OpenCV 不同版本vs对应不同版本的opencv,其中高版本vs可以配置低版本vc&#xff0c;低版本不能配置高版本vc。 windows系统直接下载Windows版本就可以&#xff08;下载的文件是一个exe文件&#xff0c;运行相当于解压缩&#xff0…

1143汉诺塔

题目描述汉诺塔问题是这样的&#xff1a;有3根柱子A,B,C&#xff0c;其中A柱上有64个盘子&#xff0c;盘子大小不等&#xff0c;大的在下&#xff0c;小的在上。要求把这64个盘子从A柱移到C柱上&#xff0c;在移动过程中可以借助B柱&#xff0c;每次只允许移动一个盘子&#xf…

什么是 Java 泛型?怎样使用 Java 泛型?

目录 1、为什么使用泛型&#xff1f; 2、什么是泛型类&#xff1f;如何定义一个泛型类&#xff1f; 泛型的命名约定 3、什么是泛型方法&#xff1f;如何定义一个泛型方法&#xff1f; 4、什么是有界类型参数&#xff1f;如何定义有界类型参数&#xff1f; &#xff08;1&…

Maven高级-私服

分模块合作开发 9.2)Nexus Nexus是Sonatype公司的一款maven私服产品 下载地址&#xff1a;https://help.sonatype.com/repomanager3/download Nexus*安装、启动与配置** 启动服务器&#xff08;命令行启动&#xff09; nexus.exe /run nexus访问服务器&#xff08;默认端口…

linux安装部署vsftpd

yum直接安装yum -y install vsftpd ftp 创建新用户&#xff1a;ftpd更新ftpd密码&#xff1a;echo "123456" |passwd --stdin ftpd创建ftp目录&#xff1a;mkdir -p /home/ftpd/test授权&#xff1a;chown -R ftpd:ftpd /home/ftpd/testchmod 777 -R /home/ftpd/test…

某程序员哀叹:最近阳的人越来越多,面对员工们纷纷倒下,公司领导公然宣称“发烧请病假不等于在家睡大觉,再不回复工作就滚蛋”...

最近阳的人越来越多&#xff0c;面对员工们纷纷倒下&#xff0c;有的公司通情达理&#xff0c;有的公司却开始“不当人”了。一位网友曝光公司领导在群里所有人&#xff0c;称“发烧请病假不意味着在家睡大觉&#xff0c;啥也不管&#xff0c;联系不上&#xff0c;安排不予响应…

【SAP Hana】SAP HANA SQL 基础教程

SAP HANA SQL 基础教程1、SQL 标准简介2、HANA STUDIO 的安装3、HANA STUDIO 的设置4、HANA SQL 基础教程&#xff08;1&#xff09;查看表数据&#xff08;2&#xff09;查看表结构&#xff08;3&#xff09;SELECT&#xff08;4&#xff09;WHERE&#xff08;5&#xff09;WH…

B站直播带货,带货直播数据如何查看?

随着时代发展&#xff0c;直播电商带货也是越来越火&#xff0c;在这个直播带货火热期&#xff0c;B站也是当仁不让的加入到直播带货行业中&#xff0c;在今年双11中&#xff0c;B站第一次参加双十一直播电商混战&#xff0c;但是并未像其他电商平台一般&#xff0c;趁双十一流…

【自学Python】Python浮点型(float)

Python浮点型(float) Python浮点型(float)教程 Python 浮点型数值用于保存带小数点的数值。Python 的浮点数有两种表示形式&#xff0c;即十进制形式和科学计数法形式。 Python浮点型(float)详解 十进制形式 Python 最常见的浮点型数就是十进制形式的浮点型数。Python 中的…

Java-类加载

静态加载和动态加载 4种加载时机&#xff0c;只有反射是动态加载 静态加载举个例子 Cat父类Animal mao是Cat类独有方法 Animal anew Cat(); a.mao();//编译看左边 //左边类型为Animal&#xff08;会加载Animal类&#xff0c;编译时进行加载叫静态加载&#xff09; //然后加载…

OpenShift 容器平台企业版 OCP 4.11.9 部署(基于KVM,CentOS)

参考&#xff1a; 阿里云上Openshift-4.10.5搭建 OpenShift4.8在oVirt下的自动化安装 红帽OpenShift安装部署-阿里云帮助中心 安装配置操作节点&#xff08;Operator&#xff09;&#xff0c;并获取OCP离线安装文件 OCP安装定制文件准备_frank0521的博客-CSDN博客 第 23 章…

【Java数据结构与算法】第二十一章 元组

【Java数据结构与算法】第二十一章 元组 文章目录【Java数据结构与算法】第二十一章 元组1.概念2.自定义元组3.第三方Jar包1.概念 元组&#xff08;Tuple&#xff09;是一种数据结构&#xff0c;可以存放多个元素&#xff0c;每个元素的数据类型可以不同。用List与Tuple类比&a…