layui table templet

最新推荐文章于 2024-10-31 10:16:17 发布

fish0402

最新推荐文章于 2024-10-31 10:16:17 发布

阅读量885

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： javascript

本文链接：https://blog.csdn.net/fish0402/article/details/105405234

layui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种基于layui框架的用户列表展示方法，通过表格渲染实现用户信息的动态加载，包括用户ID、手机号码及权限等级。特别关注了不同权限用户的管理操作，如删除与权限转让，并详细展示了如何根据不同角色显示不同的操作选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table.render({
                       elem:'#userList',
                       height:400,
                       title:'用户列表',
                       page:{
                           layout: ['limit', 'count', 'prev','page','next','skip'],
                           groups:1,
                           first:false,
                           last:false,
                           limit:10
                       },
                    cols:[[
                        {field:'id', title:'ID', hide:'true'},
                        {field:'username', title:'手机号码', width:'20%'},
                        {field:'role', title:'用户权限',width:'20%', templet:function(d){
                                if(d.role == 1){
                                    return '管理员';
                                }else if(d.role == 2){
                                    return '查询权限';
                                }else if(d.role == 3){
                                    return '普通用户';
                                }
                            }},
                        {fixed:'right', title:'操作', templet:function(d){
                           if(isAdmin){
                                if(d.role == 1){
                                    return "<a class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event=\"del\">删除</a>";
                                    }else{
                                        return "<a class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event=\"del\">删除</a><a class=\"layui-btn layui-btn-xs\"  lay-event=\"makeover\">转让管理员权限</a>";
                                    }
                            } else {
                                return "<label>需要管理员权限</label>";
                            }
                        }}
                    ]],
                    data:[
                        {"id":1,"username":"9999","role":1}
                    ]