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

最近做一个项目,某个页面因为角色不同,所以显示的的按钮有所不同。
管理员权限
在这里插入图片描述普通人员权限
在这里插入图片描述
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.mzph.cn/web/22543.shtml

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

相关文章

[MYSQL]销售分析III

表&#xff1a; Product ----------------------- | Column Name | Type | ----------------------- | product_id | int | | product_name | varchar | | unit_price | int | ----------------------- product_id 是该表的主键&#xff08;具有唯一值的列&am…

【JavaScript脚本宇宙】深入JavaScript文件上传库: 功能与应用一网打尽

模块化轻量级的文件上传&#xff1a;未来的趋势 前言 在这个时代&#xff0c;我们的生活和工作都离不开文件上传。为了解决文件上传问题&#xff0c;许多优秀的JavaScript库被创造出来。本文将详细介绍六个不同的JavaScript文件上传库&#xff0c;包括它们的概述、主要特性、…

LabVIEW的大气环境实时监测

LabVIEW的大气环境实时监测 设计并实现了一个基于LabVIEW的大气环境实时监测系统。通过使用高精度环境传感器采集温度、湿度、PM2.5、CO2等环境数据&#xff0c;利用LabVIEW进行数据处理、显示和存储。该系统能够实时监控环境参数&#xff0c;并通过阈值报警功能提示异常&…

Linux中,ll 命令 列出目录的内容

文章目录 1、2、3、4、5、 1、 在Linux中&#xff0c;ll 通常是一个别名&#xff08;alias&#xff09;用于 ls -l 命令。ls 命令用于列出目录的内容&#xff0c;而 -l 选项会以长格式&#xff08;long format&#xff09;显示信息&#xff0c;包括文件或目录的权限、所有者、…

E.小绿的房子[牛客周赛45][二维vector存图巧解]

题目描述 B市的地图是一棵有nn个节点的树&#xff0c;每个节点上都有房子出售。小棕和小绿是一对好朋友&#xff0c;他们近期都准备在B市买房。为了方便周末一起玩&#xff0c;小绿希望他的房子一定不要离小棕的太远。不过为了给小棕一个惊喜&#xff0c;小绿没有去找小棕问他买…

MATLAB cell数组 (tuple)

创建cell数组:访问和修改cell数组:遍历cell数组:转换cell数组:cell数组函数:删除cell数组中的元素:总结 MATLAB中的 cell数组是一种特殊类型的数组&#xff0c;可以用来存储不同类型和大小的数据。与一般的数值数组不同&#xff0c; cell数组可以包含不同类型的数据&#xff…

【SITS_CC】卫星图像时间序列的变化字幕(IEEE GRSL)

摘要 Satellite images time series (SITS) 提供了一种有效的方法来同时获取地球上观测区域的时间和空间信息。然而&#xff0c;传统的遥感CD方法的输出是二进制图或语义变化图&#xff0c;往往难以被最终用户解释&#xff0c;传统的遥感图像变化字幕方法只能描述双时图像。提…

微信,qt6953188,添 加 频繁怎么办?分享5种解决方案!

最近不少朋友反馈一个问题&#xff0c;就是微 信&#xff0c;qt6953188 添 加 频繁&#xff0c;想要联系的时候&#xff0c;加不上&#xff0c;不知道怎么办&#xff1f;也有因为添加不上&#xff0c;结果造成了一定的损失。 在2021年的时候&#xff0c;一位北京的朋友添 加…

【python】成功解决“ModuleNotFoundError: No module named ‘timm’”错误的全面指南

成功解决“ModuleNotFoundError: No module named ‘timm’”错误的全面指南 一、引言 在Python编程中&#xff0c;经常会遇到各种导入模块的错误&#xff0c;其中“ModuleNotFoundError: No module named ‘timm’”就是一个典型的例子。这个错误意味着你的Python环境中没有安…

充电宝哪款质量好性价比高?精选四大宝藏款充电宝分享

在这个快节奏的数字时代&#xff0c;智能手机、平板电脑等电子设备已成为我们日常生活与工作中不可或缺的伙伴。然而&#xff0c;电量焦虑似乎也如影随形&#xff0c;时刻考验着我们的耐心与行程安排。于是&#xff0c;一款质量上乘、性价比高的充电宝便成了许多人的随身必备“…

k8s系列-Docker、Containerd和Crictl的命令比较

Docker、Containerd和Crictl的命令比较&#xff1a; 命令Dockerctr (containerd)crictl (kubernetes)查看运行的容器docker psctr task ls/ctr container lscrictl ps查看镜像docker imagesctr image lscrictl images查看容器日志docker logs无crictl logs查看容器数据信息doc…

Flutter 中的 PerformanceOverlay 小部件:全面指南

Flutter 中的 PerformanceOverlay 小部件&#xff1a;全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架&#xff0c;它允许开发者使用 Dart 语言构建高性能、美观的应用。在 Flutter 的开发过程中&#xff0c;性能监控是一个重要的方面。PerformanceOverlay 是 Flutter…

“JS逆向 | Python爬虫 | 动态cookie如何破~”

案例目标 目标网址:aHR0cHMlM0EvL21hdGNoLnl1YW5yZW54dWUuY29tL21hdGNoLzI= 本题目标:提取全部 5 页发布日热度的值,计算所有值的加和,并提交答案 常规 JavaScript 逆向思路 JavaScript 逆向工程通常分为以下三步: 寻找入口:逆向工程的核心在于找出加密参数的生成方式。…

KT1025A的双模蓝牙芯片,参考标准蓝牙天线,蓝牙距离短,会卡

一、问题简介 使用KT1025A的双模蓝牙芯片&#xff0c;为什么我参考BT201或者BT301&#xff0c;或者BT321F设计的蓝牙天线&#xff0c;蓝牙距离短&#xff0c;会卡等等&#xff0c;这个可能是什么原因&#xff0c;如何改善呢&#xff1f; 问题详细分析 首先看看客户的板子PCB…

SQL入门教程:从零开始掌握数据库查询语言

SQL入门教程&#xff1a;从零开始掌握数据库查询语言 在数字化时代&#xff0c;数据无处不在。从简单的用户注册信息到复杂的商业交易数据&#xff0c;数据库成为了存储、检索和管理这些数据的关键工具。而SQL&#xff08;结构化查询语言&#xff09;则是与数据库交互的通用语…

MT2085 小码哥的福利

思路&#xff1a; 1. 耐受度从小到大排序&#xff0c;每一个甜品都找到第一个能忍受其甜度的手下。 例如样例&#xff1a;甜度为1的2份甜品给第1个人吃&#xff08;此人耐受为2&#xff09;&#xff1b;甜度为3的9份甜品给第2个人吃&#xff08;此人耐受为3&#xff09;&…

计算机网络学习记录 运输层 Day5

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github https://github.com/Qiuner ⭐️ ​ gitee https://gitee.com/Qiuner &#x1f339; 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1f604; (^ ~ ^) 想看更多 那就点个关注吧 我…

python-flask项目的服务器线上部署

在部署这部分我首先尝试了宝塔面板&#xff0c;始终连接失败 换了一种思路选择了Xshell成功连接 首先我们需要下载个免费版本的Xshell 免费的&#xff1a;家庭/学校免费 - NetSarang Website 下载完毕打开 1新建-> 输入服务器的账号密码&#xff1a; 在所有会话中点击自…

如何避免U盘数据泄露?U盘重要文件怎么加密?

U盘是最常用的移动存储设备&#xff0c;小巧的体积可以帮助我们存储大量数据。而为了保护U盘数据&#xff0c;避免文件泄露&#xff0c;我们需要加密保护U盘。那么&#xff0c;U盘重要文件该怎么加密呢&#xff1f;下面我们就来了解一下吧。 BitLocker 当你的U盘文件不多&…

三生随记——饮水机的秘密

在一个寂静的小镇边缘&#xff0c;矗立着一座废弃的工厂。工厂内&#xff0c;除了一排排锈迹斑斑的机器&#xff0c;最引人注目的便是角落里那台孤零零的饮水机。这台饮水机看似普通&#xff0c;却隐藏着不为人知的秘密。 小镇的居民都知道&#xff0c;那台饮水机是不祥之物。传…