记录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,一经查实,立即删除!

相关文章

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;小绿没有去找小棕问他买…

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

摘要 Satellite images time series (SITS) 提供了一种有效的方法来同时获取地球上观测区域的时间和空间信息。然而&#xff0c;传统的遥感CD方法的输出是二进制图或语义变化图&#xff0c;往往难以被最终用户解释&#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;一款质量上乘、性价比高的充电宝便成了许多人的随身必备“…

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

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

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

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

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盘文件不多&…

自动驾驶仿真:python和carsim联合仿真案例

文章目录 前言一、Carsim官方案例二、Carsim配置1、车辆模型2、procedure配置3、Run Control配置 三、python编写四、运行carsim五、运行python总结 前言 carsim内部有许多相关联合仿真的demo&#xff0c;simulink、labview等等都有涉及&#xff0c;这里简单介绍下python和car…

vuInhub靶场实战系列-DC-9实战

免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关。 目录 免责声明前言一、环境配置二、信息收集2.1 主机发现2.2 端口扫描2.3 指纹识别2.4 目录扫描2.4.1 Nikto目录扫描2.4.2 dirsearch目录扫描 2.5 漏洞发现2.5.…

OTTO、亚马逊、Temu卖家如何运用测评补单来提高购买率?

在跨境电商的广阔舞台上&#xff0c;测评补单无疑是一股不可或缺的强劲动力。商家们深知&#xff0c;通过补单这一手段&#xff0c;能够快速为产品注入活力&#xff0c;使销量迅猛攀升&#xff0c;评论如潮涌至&#xff0c;进而在激烈的竞争中脱颖而出&#xff0c;勇攀销量之巅…

绘画新手必备!六款免费易用的绘图软件推荐

在当今的数字世界里有各种各样的设计创作工具&#xff0c;那么问题来了我们应该如何在众多免费绘图软件中选择呢&#xff1f;为了回答这个问题&#xff0c;我们将在本文中介绍和测评六个领先的绘图软件。每一个都有自己独特的特点和优势&#xff0c;适合不同的需求和用户。以下…

香港优才计划是什么?一文说明白2024香港优才政策、申请条件、流程及利弊

香港优才计划是拿香港身份比较热门的方式之一&#xff0c;对很多想要保留生活重心在内地&#xff0c;但是又需要香港身份为子女规划教育升学的人来说&#xff0c;申请香港优才计划是获取香港身份再好不过的方式。 我们刚开始了解香港优才计划可能会有各种各样的担心&#xff0…

Terraform安装+部署Azure Resource笔记

安装 下载 Terraform&#xff1a; 首先&#xff0c;访问 官方 Terraform 网站。找到适用于 Windows 的 Terraform 包&#xff0c;并下载 zip 文件。解压 Terraform 包&#xff1a; 将下载的 zip 文件解压到一个新文件夹中&#xff0c;命名为 “Terraform”。可以选择任何位置作…

IDC最新报告:预计到2027年全球数字化转型支出将近4万亿美元

根据国际数据公司&#xff08;IDC&#xff09;5月30日发布的《全球数字化转型支出指南》&#xff0c;预计到2027年全球数字化转型&#xff08;DX&#xff09;支出将接近4万亿美元。在人工智能&#xff08;AI&#xff09;和生成式人工智能&#xff08;Generative AI&#xff09;…

手机自动化测试笔记:1.appium的安装与使用

建议先安装前置的程序&#xff0c;同时建议使用anconda进行环境管理。 参考1&#xff1a; 深度学习笔记&#xff1a;1.anaconda安装-CSDN博客https://blog.csdn.net/weixin_42771529/article/details/139434840 参考2&#xff1a; 笔记&#xff1a;如何在pycharm中使用anaco…