Day04 Layui table 自动渲染，field格式转换，工具条删除，修改监听

最新推荐文章于 2022-02-28 19:49:54 发布

原创最新推荐文章于 2022-02-28 19:49:54 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui table #table #field格式转换

javaweb 同时被 2 个专栏收录

28 篇文章

订阅专栏

layui

4 篇文章

订阅专栏

本文详细介绍如何使用LayUI的table组件实现表格数据的自动渲染、格式转换、删除等功能，并提供了一个完整的示例，包括表格操作按钮及响应事件。

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

1.table自动渲染

使用lay-data ，进行table表格自动渲染。

<table class="layui-table" lay-data="{url:'http://192.168.25.38:8080/jeesite/f/sys/role/list',page:false,id:'idTest'}" lay-filter="demo">
            <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'name',  sort: true, fixed: true}">角色名称</th>
                    <th lay-data="{field:'enname'}">英文名称</th>
                    <!--<th lay-data="{field:'office.name', width:150, sort: true}">归属机构</th>-->
                    <th lay-data="{templet:'<div>{{createFormat(d.office.name)}}</div>'}">归属机构</th>
                    <th lay-data="{field:'dataScope'}">数据范围</th>
                    <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
                </tr>
            </thead>
        </table>

注意：当field,是json字符串中对象的某个属性时，则不能用office.name，而应该进行格式转换。

//书写方式
<th lay-data="{templet:'<div>{{createFormat(d.office.name)}}</div>'}">归属机构</th>
//格式转换
function createFormat(o) {
    return o;
}

2.表格删除

layer.confirm('真的删除行么', function(index) {

                $.ajax({
                    type: 'get',
                    url: 'http://192.168.25.38:8080/jeesite/f/sys/role/delete',
                    async: true,
                    data:{
                        id:data.id
                    },
                    error:function(error){
                        alert(error.status);
                        layer.msg("删除失败", {
                                icon: 5   //出现失败图标
                        });
                    },
                    success: function(result) {

                        if(result == "success") {
                            obj.del();
                            layer.close(index);
                            layer.msg("删除成功", {
                                icon: 6   //出现成功图标
                            });
                        } else {
                            layer.msg("删除失败", {
                                icon: 5
                            });
                        }
                    }
                });

    });

3 完整table操作

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>角色管理</title>
    </head>

    <body>

        <div class="layui-btn-group demoTable">
            <!--<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
          <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
          <button class="layui-btn" data-type="isAll">验证是否全选</button>-->

        </div>

        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="active">
                    <a href="http://localhost:8080/pro/start/#/sys/role/list">角色列表</a>
                </li>
                <li>
                    <a href="http://localhost:8080/pro/start/#/sys/role/form">角色添加</a>
                </li>
            </ul>
        </div>

        <table class="layui-table" lay-data="{url:'http://192.168.25.38:8080/jeesite/f/sys/role/list',page:false,id:'idTest'}" lay-filter="demo">
            <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'name',  sort: true, fixed: true}">角色名称</th>
                    <th lay-data="{field:'enname'}">英文名称</th>
                    <!--<th lay-data="{field:'office.name', width:150, sort: true}">归属机构</th>-->
                    <th lay-data="{templet:'<div>{{createFormat(d.office.name)}}</div>'}">归属机构</th>
                    <th lay-data="{field:'dataScope'}">数据范围</th>
                    <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
                </tr>
            </thead>
        </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> 

        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script>
            //格式转换
            function createFormat(o) {
                return o;
            }
            layui.use(['table', 'jquery'], function() {
                $ = layui.$;
                var table = layui.table;
                //监听表格复选框选择
                table.on('checkbox(demo)', function(obj) {
                    console.log(obj)
                });
                //监听工具条
                table.on('tool(demo)', function(obj) {
                    var data = obj.data;
                    if(obj.event === 'detail') {
                        layer.msg('ID：' + data.id + ' 的查看操作');

                    } else if(obj.event === 'del') {
                        layer.confirm('真的删除行么', function(index) {

                            $.ajax({
                                type: 'get',
                                url: 'http://192.168.25.38:8080/jeesite/f/sys/role/delete',
                                async: true,
                                data:{
                                    id:data.id
                                },
                                error:function(error){
                                    alert(error.status);
                                    layer.msg("删除失败", {
                                            icon: 5
                                    });
                                },
                                success: function(result) {

                                    if(result == "success") {
                                        obj.del();
                                        layer.close(index);
                                        layer.msg("删除成功", {
                                            icon: 6
                                        });
                                    } else {
                                        layer.msg("删除失败", {
                                            icon: 5
                                        });
                                    }
                                }
                            });

                        });
                    } else if(obj.event === 'edit') {

                        window.location.href = "http://localhost:8080/pro/start/#/sys/role/form.html?id=" + data.id;
                    }
                });

                var $ = layui.$,
                    active = {
                        getCheckData: function() { //获取选中数据
                            var checkStatus = table.checkStatus('idTest'),
                                data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                        },
                        getCheckLength: function() { //获取选中数目
                            var checkStatus = table.checkStatus('idTest'),
                                data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                        },
                        isAll: function() { //验证是否全选
                            var checkStatus = table.checkStatus('idTest');
                            layer.msg(checkStatus.isAll ? '全选' : '未全选')
                        }
                    };

                $('.demoTable .layui-btn').on('click', function() {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            });
        </script>
    </body>

</html>