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

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