坑的一匹，layui表格后面加一条数据哪么难？

虔潜

已于 2023-04-19 16:24:43 修改

阅读量473

点赞数

文章标签： layui javascript 前端 html jquery

于 2023-04-19 16:20:08 首次发布

本文链接：https://blog.csdn.net/weixin_46652259/article/details/130245629

版权

文章讲述了在使用Layui框架时遇到的表格数据添加和重载问题。作者发现Layui官方文档缺少在表格后添加数据的示例，并且网络上的解决方案存在兼容性或实效性问题。文中提供了修改过的添加表格行数据的方法，通过模拟后台数据传输来实现前端的数据再渲染，解决了界面未显示新数据的问题。

摘要由CSDN通过智能技术生成

layui官网table 数据表格文档 - Layui-BeJSON.com文档没有在表格后面加入一条数据的样例，在百度的各个博客社区的方法多都是一个样的，也不知道谁抄谁的！

本文样例

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultrag.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>layui title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../jquery.js"></script>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">

</head>
<body>
    <table id="tableId" lay-filter="tableFilter"></table>
</body>
<script id="tableHead" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#tableId'
            ,id: 'modeId'
            ,height: 500
            ,toolbar: '#tableHead'
            ,url: '/layui/test0'
            ,page: true
            ,response:{
                statusCode: 200 //规定成功的状态码，默认：0
            }
            ,limits: [5,10,15,20,25,30]
            ,cols: [ [
                {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}
            ] ]
        });
    });
</script>
</html>

效果

layui官网文档表格尾部加入数据方法（表格重载）

//由于 2.6.0 之前的版本是采用深重载，
//所以如果您之前真实采用了深重载机制，那么建议将以下代码放入您的全局位置，从而可对老项目起到兼容作用
var tableReload = table.reload;
table.reload = function(){
  var args = [];
  layui.each(arguments, function(index, item){
    args.push(item);
  });
  args[2] === undefined && (args[2] = true);
  return tableReload.apply(null, args);
};
//但如果你之前没有采用深重载机制，也可以不放。不放甚至可以解决你之前因为多次 reload 而带来的各种参数重叠问题

注意：table.reload不是table.reload()或者table.reload(ID, options, deep)，table.reload(options)；就是table.reload。不然的话会报找不到tableReload.apply方法异常！

结果：界面无刷新，无界面闪动效果，但底层通过table.cache["modeId"]方法获取表数据可以看到新增，多次按下也有对应的数据，但界面无效果！

网络解决方法（不能解决，可能是版本问题）,表格有重载闪动，但界面无新行加入

table.on('toolbar(tableFilter)', function(obj){
    switch(obj.event){
        case "add":
            var newData = table.cache["modeId"];
            var newRow = {
                id:"5",username:"用户5",sex:"2",city:"2",sign:"dasfds"
                ,experience:"11", score:"11",classify:"11",wealth:"adsfads"
            }
            newData.push(newRow);
            table.reload('modeId', {
                data: data
            });
            break;
        }
    });
});

修改过的添加表格行数据方法

table.on('toolbar(tableFilter)', function(obj){
    switch(obj.event){
        case "add":
            var newData = table.cache["modeId"];
            var newRow = {
                id:"5",username:"用户5",sex:"2",city:"2",sign:"dasfds"
                ,experience:"11", score:"11",classify:"11",wealth:"adsfads"
            }
            newData.push(newRow);
            table.reload('modeId', {
                parseData: function(res){
                    return {
                        code: 200,
                        data: newData
                    }
                }
            });
            break;
        }
    });
});

效果图