layui框架数据表格的使用及常见问题

最新推荐文章于 2025-09-25 00:06:28 发布

原创最新推荐文章于 2025-09-25 00:06:28 发布 · 3.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#数据表格 #layui

前端框架同时被 2 个专栏收录

4 篇文章

订阅专栏

layui

4 篇文章

订阅专栏

本文详细介绍如何使用layui框架创建数据表格，包括引用样式和脚本文件、声明table模块、配置渲染参数如容器ID、高度、数据接口及分页设置。演示了如何定义表头字段、宽度和排序功能，并提供勾选框的重要性说明，以及自定义工具栏和监听事件的示例。

一、准备工作

1.引用layui.css和layui.js

2.声明table模块

layui.use('table', function(){
  var table = layui.table;
  )}

二、开始使用

 table.render({
    elem: '#demo' //此处填写容器ID
    ,height: 312 //高度，可选填
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
       { type: 'checkbox', fixed: 'left' }
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
    <table id="demo" lay-filter="test"></table>

特别提醒，在使用layui的数据表格的时候，如果没有开启勾选框（ { type: ‘checkbox’, }），大部分时候会导致表头和数据不对齐，推荐使用的时候开启勾选框。如果不开启的话就需要给每个字段固定的宽度，否则会出现如下图的问题。

很多新人都在这里遇到了表头不对齐的问题

toolbar: 'default' //让工具栏左侧显示默认的内置模板

默认表头
在这里插入图片描述

自定义按钮表头

toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器

toolbar: '#toolbarDemo'

<script type="text/html" id="toolbarDemo">
        <div class="layui-btn-group">
            <div class="layui-inline" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
            </div>
            <div class="layui-inline" lay-event="update">
                <i class="layui-icon layui-icon-edit"></i>
            </div>
            <div class="layui-inline" lay-event="delete">
                <i class="layui-icon layui-icon-delete"></i>
            </div>
            <div class="layui-inline" lay-event="buttoninfo">
                <i class="layui-icon layui-icon-file"></i>
            </div>
        </div>
    </script>

在这里插入图片描述

点击表头弹窗

table.on('toolbar(test)', function (obj) {//监听事件
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '请进行操作',
                        area: ['100%', '100%'],
                        maxmin: true,
                        content: 'index.html',//弹出的页面

                        yes: function () {
                            $(".layui-laypage-btn")[0].click();
                            layer.closeAll();
                            
                        },
                      
                    });
                    break;
            };
        });

          <div class="layui-inline" lay-event="add">//表头
                <i class="layui-icon layui-icon-add-1"></i>
            </div>

获取弹窗数据

success: function (layero, index) {
               var body = layer.getChildFrame('body', index);
               var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                                                      
                body.find("input[name='ID']").val(data[0].ID);
                body.find("input[name='Name']").val(data[0].Name);
                                                    },

2018年12月19日收笔，后续会继续更新