table根据权限动态展示不同列.改如何操作?

提问 已结
9 130
飞翔的燕子
悬赏:20飞吻
版本:layui 浏览器:
因为不同账号权限不一样,希望根据权限情况分配展示列。
比如管理员账号可以看到所有信息, (客户信息 商品 数量 成本 利润)但是不想让员工账号也看到成本,那么只能暂时部分列(客户信息 商品 数量)
table.render({ });里面么有办法写if语句来判断,外面又没办法获取后台传递过来的值,该如何操作呢,坐等?
回帖
  • IDyun
    2018-12-4
    https://www.layui.com/doc/modules/table.html#async


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1542630986934" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
    </head>
    <body>

    <table class="layui-hide" id="demo" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <script src="//res.layui.com/layui/dist/layui.js?t=1542630986934"></script>
    <script>
    layui.config({
    version: '1542630986934' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
    var laydate = layui.laydate //日期
    ,laypage = layui.laypage //分页
    ,layer = layui.layer //弹层
    ,table = layui.table //表格
    ,carousel = layui.carousel //轮播
    ,upload = layui.upload //上传
    ,element = layui.element //元素操作
    ,$= layui.$
    var manage=[ //管理表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
    ,{field: 'city', title: '城市', width:150}
    ,{field: 'sign', title: '签名', width: 200}
    ,{field: 'classify', title: '职业', width: 100}
    ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]
    var normal=[ //普通表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
    ,{field: 'sex', title: '性别', width:80, sort: true}

    ]


    //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    ,totalRow: true //开启合计行
    ,cols: []
    ,parseData: function(res){ //res 即为原始返回的数据

    if(res.code==0){//判断是否是管理员 0是管理员
    this.cols[0]=manage//管理员表头
    }else{
    this.cols[0]=normal//普通用户表头
    }

    return {
    "code": res.code, //解析接口状态
    "msg": res.msg, //解析提示文本
    "count": res.count, //解析数据长度
    "data": res.data//解析数据列表
    };
    }
    });

    });
    </script>
    </body>
    </html>
    0 回复
  • 三目运算符不行吗
    0 回复
  • 我也和你一样遇到这样的问题。不过只有两种权限,一种,超级管理员和普通用户
    最后笨办法,分别使用了两个js文件,后端SQL也判断了,显示的字段。。[泪]
    0 回复
  • layui-table自身提供了模板引擎了解一下。希望可以解决你的问题。
    0 回复
  • @IDyun +1 厉害了。
    0 回复
  • @IDyun 老铁帮忙看看我的问题: https://fly.layui.com/jie/45154/ 。。
    0 回复
  • @快乐浪子哥 如果里面不能写,就只能像你这样,就是代码太多
    0 回复
  • @IDyun 非常感谢,完美的解决了我的问题,不过为啥我在示例里面没有看到你的截图的那些?
    还有
    return {
    "code": res.code, //解析接口状态
    "msg": res.msg, //解析提示文本
    "count": res.count, //解析数据长度
    "data": res.data//解析数据列表
    };
    这段话的作用是啥呀,可以帮忙解惑下吗?
    0 回复
  • IDyun
    2018-12-5
    parseData - 数据预解析回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式
    https://www.layui.com/doc/modules/table.html#async
    就是说数据接口返回的数据格式和layui table 所需的数据格式不一样,就需要这个方法来转换。

    相当在layui table 渲染数据之前的方法。
    现在只是利用渲染之前的方法过程来加载表头,并没有转换数据格式。
    0 回复