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

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

layui-soul-table 是一款基于layui框架开发的用于展示数据的表格插件。要快速隐藏,可以通过以下步骤进行操作: 1. 首先,确保已加载layuilayui-soul-table的相关资源文件。可以在页面引入layuilayui-soul-table的CSS和JS文件,例如: ```html <link rel="stylesheet" href="path/to/layui/css/layui.css"> <link rel="stylesheet" href="path/to/layui-soul-table/soulTable.css"> <script src="path/to/layui/layui.js"></script> <script src="path/to/layui-soul-table/soulTable.js"></script> ``` 2. 在HTML页面,创建一个具有固定id的表格元素,例如: ```html <table id="demo" lay-filter="test"></table> ``` 3. 在JavaScript代码,使用layui-soul-table的自定义参数来创建表格,并设置隐藏的显示属性。例如: ```javascript layui.use(['table', 'soulTable'], function(){ var table = layui.table; var soulTable = layui.soulTable; table.render({ elem: '#demo', url: '/api/data', // 数据接口 cols: [[ {field:'id', title: 'ID'}, {field:'name', title: '名称'}, {field:'age', title: '年龄'}, // 其他 {field:'操作', title: '操作', toolbar: '#barDemo', width: 150} // 需要隐藏的 ]], }); soulTable.on('filter(test)', function(data){ // 判断隐藏的显示状态 var isHide = data.isHide; if(isHide){ $('#demo .layui-table-view .layui-table').find('[data-field="操作"]').hide(); }else{ $('#demo .layui-table-view .layui-table').find('[data-field="操作"]').show(); } }); }); ``` 通过以上步骤,就可以在 layui-soul-table 快速隐藏指定的。具体实现是通过监听"filter(test)"事件,判断隐藏的状态,然后利用jQuery的hide()和show()方法来控制目标的显示属性。使用这种方法,我们可以方便地实现快速隐藏功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cngm110

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值