LayUI 数据表格学习和应用

最新推荐文章于 2022-06-18 09:31:40 发布

原创

最新推荐文章于 2022-06-18 09:31:40 发布 · 990 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了LayUI数据表格的三种渲染方式，重点讲解了方法渲染的使用，包括设置表格唯一标识、高度、数据接口、额外条件、分页参数以及核心的cols配置。还列举了表格的八个基础方法，如设定全局默认参数、获取选中行、导出数据等，并分享了实用技巧和事件监听示例，如监听单元格、复选框和头部工具栏事件。

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

LayUI的数据表格有三种渲染方式，方法渲染、自动渲染、转换数据表格。我用的最多的第一种，方法渲染，直接在HTML网页写一行代码然后剩下的业务逻辑和实现都交给Js去处理。这种方式个人感觉比较容易实现和发现问题，通过id把两者关联起来。下面的篇幅就是介绍这种方式的使用，另外两种也要了解，见到代码能看懂，知道原理是啥就行。下面的方式必须掌握。

示例：

var table = layui.table;

table.render({
    elem: '#userTable'
    ,height: 'full-210'
    ,url: APP.restfulPrefix('/account/um_user/get_all_by_is_manage') //数据接口
    ,where:{is_manager: 1, loginKey:sessionStorage.getItem("account_login_key")}
    ,page: {limit:50} //开启分页
    ,cols: [[ //表头
        {type:'checkbox',width:50, fixed: 'left'}
        ,{field: 'tenantId', title: '机构编码',  width:120}
        ,{field: 'tenantName', title: '机构名称', width:120,}
        ,{field: 'id', title: '账号', width:120, sort: true,toolbar: '#id'}
        ,{field: 'realname', title: '姓名', width:100}
        ,{field: 'nickname', title: '昵称', width:100}
        ,{field: 'mobile', title: '手机', width:120}
        ,{field: 'email', title: '邮箱', width:150}
        ,{fixed: 'right', title: '管理',width:80, align:'cent