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

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

相关推荐
解道Jdon19 分钟前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii1 小时前
JAVA Web —— A / 网页开发基础
前端
gnip1 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty1 小时前
基于hiprint的票据定位打印系统开发实践
javascript
新手村领路人2 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@3 小时前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育3 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘3 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e3 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost4 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求