记录layui-table中操作列的宽度随着权限变化而变化

news2024/10/5 16:29:00

最近做一个项目,某个页面因为角色不同,所以显示的的按钮有所不同。
管理员权限
在这里插入图片描述普通人员权限
在这里插入图片描述
layui引入的table宽度是写死的,不能随着自动变化,查了一些资料,让写入css的方法
.layui-table th, .layui-table td {
white-space: nowrap; /* 不换行 /
overflow: hidden; /
超出内容隐藏 /
text-overflow: ellipsis; /
显示省略号 */
}
,测试一下效果不行。
所以自己动手按照最淳朴的写法进行修改。
首先找到table对应的操作代码:

<script type="text/html" id="tool">
    <a shiro:hasPermission="NewDoc:wens:detail" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">查看</a>
    {{# if(d.theEnd!='销毁' & d.theEnd!='存档'){ }}
    <a shiro:hasPermission="NewDoc:wens:update" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{# }}}

    {{#if(d.borrowed==0 ){}}
    <a shiro:hasPermission="NewDoc:wens:delete" class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    <a shiro:hasPermission="tostore:tostore:update" class="layui-btn layui-btn-xs layui-btn-warm" lay-event="borrowed">借阅</a>
    {{#}}}
</script>

id为”tool“,这样我们在done回调函数中可以获取tool中的显示内容,不同的权限显示不同的按钮。
然后去layui.use(done())函数中增加代码:

layui.use(['table','layer','laydate', 'tree'], function () {
        tableIns1 = table.render({
            // 渲染表格
            elem: '#deptTable'
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , page: true //开启分页
            , url: 'url' //按照实际数据接口
            , method: 'POST'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                    {title: '操作', width: 180, toolbar: '#tool'},
                    ....
                ]
            ], toolbar: '#toolbar',
done: function (res, curr, count) {
                var that = this.elem.next();
                var rolestext=$("#tool")[0].text;
                var widthpx="";
                if(rolestext.indexOf("借阅")!=-1){
                if(rolestext.indexOf("删除")!=-1){
                   that.find(".layui-table-box tbody td[data-key='1-0-0']").css("width","220px");
                   widthpx="220px";
                   document.getElementsByClassName("laytable-cell-1-0-0")[0].style.width= widthpx;
                   }else{
                      that.find(".layui-table-box tbody td[data-key='1-0-0']").css("width","170px");
                      widthpx="170px";
                      document.getElementsByClassName("laytable-cell-1-0-0")[0].style.width= widthpx;
                   }
               }else{
                  if(rolestext.indexOf("删除")!=-1){
                  that.find(".layui-table-box tbody td[data-key='1-0-0']").css("width","170px");
                  widthpx="170px";
                  document.getElementsByClassName("laytable-cell-1-0-0")[0].style.width= widthpx;
                   }else{
                       that.find(".layui-table-box tbody td[data-key='1-0-0']").css("width","120px");
                      widthpx="120px";
                      document.getElementsByClassName("laytable-cell-1-0-0")[0].style.width= widthpx;
                   }
               }
                res.data.forEach(function (item, index) {
                 document.getElementsByClassName("laytable-cell-1-0-0")[index+1].style.width= widthpx;
                   });
                   }

上述代码非常朴素淳朴的完成了不同权限用户登录后的列宽自动调整。

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

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

相关文章

微信小程序-WXS脚本

一、概述 1.WXS WXS(WeiXin Script)是小程序独有的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建出页面的结构。 2.wxs 的应用场景 wxml中无法调用在页面的.js 中定义的函数&#xff0c;但是&#xff0c;wxml 中可以调用 wxs 中定义的函数。因此&#xff0c;小程序…

容器项目之前后端分离

容器化部署ruoyi项目 #需要的镜像nginx、java、mysql、redis、 #导入maven镜像、Java镜像和node镜像 docker load -i java-8u111-jdk.tar docker load -i maven-3.8.8-sapmachine-11.tar docker load -i node-18.20.3-alpine3.20.tar #拉取MySQL和nginx镜像 docker pull mysql…

每日5题Day17 - LeetCode 81 - 85

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;81. 搜索旋转排序数组 II - 力扣&#xff08;LeetCode&#xff09; class Solution {public boolean search(int[] nums, int target) {int n nums.length;if (n…

【Redis数据库百万字详解】命令操作

文章目录 一、连接命令二、键命令 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界&#xff0c;能与您在此邂逅&#xff0c;真是缘分使然&#xff01;&#x1f60a; &#x1f338;愿您在此停留的每一刻&#xff0c;都沐浴在轻松愉悦的氛围…

Win10文件系统错误(-2147219196)

问题出现的原因&#xff1a; C盘快挤满了&#xff0c;导致电脑很卡&#xff0c;于是删掉了C盘用户下的一些文件C:\Users\DIY-PC&#xff0c;省了五六十G的内存&#xff0c;结果发现把一些系统文件也删掉了&#xff0c;导致图片预览报错 问题现象&#xff1a; &#xff08;自…

9. MySQL事务、字符集

文章目录 【 1. 事务 Transaction 】1.1 事务的基本原理1.2 MySQL 执行事务的语法和流程1.2.1 开始事务1.2.2 提交事务1.2.3 回滚&#xff08;撤销&#xff09;事务实例1&#xff1a;一致性实例2&#xff1a;原子性 【 2. 字符集 和 校对规则 】2.1 基本原理2.2 查看字符集查看…

【保姆级图文教程】QT下载、安装、入门、配置VS Qt环境

【保姆级图文教程】QT下载、安装、入门、配置VS Qt环境-CSDN博客 0.QT介绍 QT 是一个跨平台的应用程序开发框架&#xff0c;它提供了丰富的工具和类库&#xff0c;用于开发图形用户界面&#xff08;GUI&#xff09;程序。Qt 提供了 C 编程语言接口&#xff0c;同时也支持其他…

考研回顾纪录--科软考研失败并调剂兰州大学软件工程专业复试经历

1.背景 本人工作一年后决定考研&#xff0c;遂于2023年4月底离职。5月到家后开始学习。本科东北大学软件工程专业&#xff0c;绩点3.2/5&#xff0c;按照百分制计算是82分。本科纯属混子&#xff0c;只有一个四级551&#xff0c;一个数学竞赛省二等奖&#xff0c;大创学校立项…

Vue3实战笔记(59)—从零开始掌握Vue3插槽机制,进阶与提高

文章目录 前言一、具名插槽二、高级列表组件示例总结 前言 接上文&#xff0c;接下来看一点稍微复杂的&#xff1a;具名插槽 一、具名插槽 子组件 MyComponent.vue&#xff1a; <template><div><slot name"header"></slot><slot><…

解决ESP-IDF工程里面C/C++找不到路径标红的问题

解决ESP-IDF工程里面C/C找不到路径标红的问题 教程 源文件 打开这一个文件 {"configurations": [{"name": "ESP-IDF","cStandard": "c11","cppStandard": "c17","compileCommands": "…

kafka-生产者拦截器(SpringBoot整合Kafka)

文章目录 1、生产者拦截器1.1、创建生产者拦截器1.2、KafkaTemplate配置生产者拦截器1.3、使用Java代码创建主题分区副本1.4、application.yml配置----v1版1.5、屏蔽 kafka debug 日志 logback.xml1.6、引入spring-kafka依赖1.7、控制台日志 1、生产者拦截器 1.1、创建生产者拦…

Precision和Recall

Precision&#xff08;精确率 / 查准率&#xff09;和 Recall&#xff08;召回率 / 查全率&#xff09;是分类任务中常用的两种性能度量&#xff0c;它们用于评估模型在处理二分类或多分类问题时的表现。 Precision&#xff08;精确率&#xff09; 精确率衡量的是模型预测为正…

linux内存缓存占用过高分析和优化

1、什么是buffer/cache &#xff1f; buffer/cache其实是作为服务器系统的文件数据缓存使用的&#xff0c;尤其是针对进程对文件存在read/write操作的时候&#xff0c;所以当你的服务进程在对文件进行读写的时候&#xff0c;Linux内核为了提高服务的读写速度&#xff0c;则将会…

Redis页面优化

文章目录 1.Redis页面缓存1.思路分析2.首先记录一下目前访问商品列表页的QPS1.线程组配置10000次请求2.请求配置3.开始压测1.压测第一次 平均QPS为6122.压测第二次 平均QPS为6153.压测第三次 平均QPS为617 3.然后记录一下访问商品详情页的QPS1.线程组配置10000次请求2.请求配置…

SwiftUI 利用 Swizz 黑魔法为系统创建的默认对象插入新协议方法(五)

功能需求 在 SwiftUI 的开发中,我们往往需要借助底层 UIKit 的“上帝之手”来进一步实现额外的定制功能。比如,在可拖放(Dragable)SwiftUI 的实现中,会缺失拖放取消的回调方法让我们这些秃头码农们“欲哭无泪” 如上图所示,我们在拖放取消时将界面中的一切改变都恢复如初…

python怎么退出help

Python中查看帮助可以在命令提示行中输入“help()”即可。 如果想要退出帮助&#xff0c;有三种方法&#xff0c;具体如下&#xff1a; 1、直接按键盘上的“enter”键退出帮助。 2、按键盘上的“q”键退出帮助。 3、按键盘上的“CtrlZ”键退出帮助。

带DSP音效处理D类数字功放TAS5805M中文资料

国产替代D类数字功放中文资料访问下方链接 ACM8628 241W立体声182W单通道数字功放中文寄存器表 内置DSP多种音频处理效果ACM8628M-241W立体声或182W单通道数字功放 1 特性 具有增强处理能力和低功率损耗的 TAS5805M 23W、无电感器、数字输入、立体声、闭环 D 类音频放大器 …

AI网络爬虫:用GraphQL查询爬取动态网页数据

任务&#xff1a;爬取网站www.skillshare.com搜索结果页面数据&#xff1a; 查看网站的请求信息&#xff1a; 请求网址: https://www.skillshare.com/api/graphql 请求方法: POST 状态代码: 200 OK 远程地址: 127.0.0.1:10809 引荐来源网址政策: strict-origin-when-…

【微信小程序开发】小程序中的上滑加载更多,下拉刷新是如何实现的?

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

什么是泛洪攻击?DDos攻击也是泛洪攻击的一种?

在数字化时代的浪潮中&#xff0c;网络安全已成为一场没有硝烟的战争。其中&#xff0c;泛洪攻击作为一种常见的网络攻击手段&#xff0c;对个人用户、企业乃至国家网络安全构成了严重威胁。本文将对泛洪攻击进行深入剖析&#xff0c;包括其定义、原理、类型、影响以及应对策略…