记录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;
                   });
                   }

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能楼宇安防3D数据可视化平台满足日益增长的安防需求

在当今社会&#xff0c;安全是每个人和企业最为关心的问题。为满足日益增长的安防需求&#xff0c;3D可视化公司深圳华锐视点隆重推出安防平台3D可视化管理系统&#xff0c;以先进的三维技术为您的安全保驾护航。 安防平台3D可视化管理系统通过创新的三维可视化技术&#xff0c…

优化你的WordPress网站:内链建设与Link Whisper Pro插件的利用

文章目录 内链的重要性WordPress SEO插件&#xff1a;Link Whisper Pro主要功能使用指南下载与安装 结语 在数字营销和网站管理领域&#xff0c;SEO内部优化是提升网站排名、增加流量和提高用户参与度的核心策略。在众多SEO技巧中&#xff0c;内链建设是构建良好网站结构和提升…

Glide支持通过url加载本地图标

序言 glide可以在load的时候传入一个资源id来加载本地图标&#xff0c;但是在开发过程中。还得区分数据类型来分别处理。这样的使用成本比较大。希望通过自定义ModelLoader实现通过自定义的url来加载Drawab。降低使用成本 实现 一共四个类 类名作用GlideIcon通过自定义url的…

轻松搭建AI应用的三个大模型技术路线

时下聊起AI&#xff0c;想必最热的就是使用AI的应用&#xff08;chatGPT&#xff0c;文心一言等&#xff09;来提升自己工作的效率&#xff0c;比如破局俱乐部&#xff0c;洋哥带领星球2万多人开启大航海&#xff0c;教人使用这一波新起的应用进行赚钱与赋能。 在我的视角来看…

PS系统教程11

HUD拾色器 作用&#xff1a;它可以帮助使用者更加高效地选择和使用颜色&#xff0c;从而提高工作效率和设计质量。 先确定色相值改变饱和度改变亮度使用HUD拾色器选中画笔工具画笔模式-正常shiftAlt右键 色相轮 上下移动从黑到白亮度变化左右移动从浅到深饱和度的变化选中颜…

探索 Adobe Illustrator 2023 (AI 2023) for Mac/Win——创意设计的强大工具

Adobe Illustrator 2023 (AI 2023) for Mac/Win 是一款在设计领域备受推崇的专业矢量图形编辑软件软件&#xff0c;为设计师们提供了无尽的创意可能性。 它具有强大而精确的绘图功能&#xff0c;让用户能够轻松绘制出各种复杂的图形、线条和形状。无论是简洁的图标设计还是精美…

不服就干!FEAST微生物溯源:一场微生物“寻根究底”的浪漫之旅

微生物一直处于不断变化的状态&#xff0c;估计不同源微生物群落&#xff08;source,“源”&#xff09;对特定微生物群落&#xff08;sink,“汇”&#xff09;的贡献或混合比例被称为微生物溯源&#xff08;MST&#xff09;问题。了解样本中这些生物体来自何处以及如何形成群落…

机器学习之数学基础(六)~时间复杂度和空间复杂度

目录 算法背景 background 1. 时间复杂度 Time Complexity 1.1 时间复杂度分类 1.1.1 O(1) 常数阶 1.1.2 O(n) 线性阶 1.1.3 O(n^2) 平方阶 1.1.4 O(logn) 对数阶 1.1.5 O(nlogn) 线性对数阶 1.1.6 O(2^n) 指数阶 1.1.7 O(n!) 阶乘阶 1.1.8 时间复杂度分类 1.2 时…

记录Nuxt 3 官网项目的一次部署

本来以为就是一次简单的部署&#xff0c;之前也是部署过几次nuxt项目了&#xff0c;所以&#xff0c;并没有要记录的想法。但是过程出现了很多问题&#xff0c;最后考虑还是写下来吧。留个记录&#xff08;完整的配置部署过程&#xff09; 这里我将要说明两种部署方式以供选择&…

electron-Vue: Module parse failed: Unexpected character ‘ ‘

​ electron-Vue项目中&#xff0c;我自己写了一个node的C扩展&#xff08;xx.node&#xff09;&#xff0c;然后在.vue文件里import它&#xff0c;然后运行npm run electron:serve&#xff0c;报错如下: ​​ electron-Vue打包默认使用webpack&#xff0c;默认情况下webpack没…

Vue2.0项目搭建流程(一步一步教你如何初始化一个前端项目)

文章目录 1.环境准备2.项目初始化3.删除不必要的初始化文件 1.环境准备 1.winr在cmd终端界面输入node -v&#xff0c;检测node环境是否安装成功 2.cmd终端界面输入vue -V&#xff0c;检测前端脚手架vue/cli是否安装成功 没有显示则终端输入以下指令 //以下内容三选一 cnpm …

vue的elementUI的el-tree的选择

有一棵树型的数据,需要实现:在外部加一个 全选和不全选的按钮,去全部勾选树结构里面每一项的选框。 当点击勾选全选的时候,树的每一项都勾选; 当取消全选的时候,树的每一项都不勾选; 当选树的其中一项时,全选按钮是半选状态; 实现效果如下: <template><…

骨传导耳机哪个牌子好?精选5大品质上乘的尖货骨传导耳机推荐!

作为一名数码博主&#xff0c;我已有十余年的行业经历&#xff0c;其中&#xff0c;骨传导耳机作为近年来新兴的技术产品&#xff0c;凭借特殊的传声方式和佩戴方式吸引到了不少消费者&#xff0c;我也是亲自体验并评测了数十款。基于这些经验&#xff0c;我深感有必要提醒大家…

玩转Matlab-Simscape(初级)- 09 - 在Simulink中创建曲柄滑块机构的控制模型

** 玩转Matlab-Simscape&#xff08;初级&#xff09;- 09 - 在Simulink中创建曲柄滑块机构的控制模型 ** 目录 玩转Matlab-Simscape&#xff08;初级&#xff09;- 09 - 在Simulink中创建曲柄滑块机构的控制模型 前言一、问题描述二、创建模型2.1 识别机构中的刚体2.2 确定刚…

标准发布 | 反渗透和纳滤水处理膜修复再利用技术指南

一、编制单位 本文件由浙江大学、中华环保联合会水环境治理专业委员会提出。 本文件由中华环保联合会归口。 本文件主编单位&#xff1a;浙江大学、河南一膜环保技术有限公司、安徽精高水处理有限公司、国能龙源环保有限公司、湖南沁森高科新材料有限公司。 本文件参编单位&…

C++ | Leetcode C++题解之第119题杨辉三角II

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> getRow(int rowIndex) {vector<int> row(rowIndex 1);row[0] 1;for (int i 1; i < rowIndex; i) {row[i] 1LL * row[i - 1] * (rowIndex - i 1) / i;}return row;} };

简搭云可视化大屏设计器:前端技术探索与实践

一、引言 随着数字化时代的到来&#xff0c;数据可视化已经成为企业决策和业务分析不可或缺的一部分。为了满足用户对于数据展示的直观性、便捷性和高效性需求&#xff0c;简搭云可视化大屏设计器应运而生。本文旨在探讨简搭云可视化大屏设计器的前端技术实现&#xff0c;并通…

店匠科技亮相VivaTech,新零售解决方案引关注

在中法建交60周年之际,两国关系持续发展并共同推动双方在人工智能和全球治理领域达成重要合作。同时,浙江-法国高新产业创新合作对接会在巴黎顺利举行,进一步促进了中法两国在高新技术领域的交流与合作。 紧跟此次访问的步伐,众多中国科技创新企业齐聚巴黎,于5月22日至25日在法…

计算机SCI期刊,中科院3区,专业性强,审稿专业

一、期刊名称 Frontiers in Neurorobotics 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;计算机科学 影响因子&#xff1a;3.1 中科院分区&#xff1a;3区 三、期刊征稿范围 神经机器人前沿在体现自主系统的科学和技术及其应用方面发表了严格的同行评审…

笔记 | 软件工程01:从程序到软件

1 软件工程知识域 2 程序 2.1 何为程序及程序的质量要求 何为程序&#xff1a; 理解&#xff1a;软件工程可能就是在弥补OOP语言与自然语言之间还存在的鸿沟 2.1.1 程序质量的内在和外在体现 2.1.2 程序质量的语法和语义体现 2.2 编写代码的基本原则 2.3 程序质量保证方法 …