layui 直接赋值 重载问题+动态新增table

这个问题实在是解决的有一些好笑了,记录一下
html,放个table

<table class="layui-hide" id="imagetable" lay-filter="test"></table>

js

<script>

    layui.use(['form', 'table',], function () {
        var form = layui.form;
        var $ = layui.jquery;
    
        var itemImgList = itemInfoData.itemImgList!=null?itemInfoData.itemImgList:{
            "id": 0,
            "imageUrl": "",
            "sort": 0,
        };

        var table = layui.table;
     
        var imagetable = table.render({
            elem: '#imagetable',
            data:itemImgList,
            limit:1000,
            cols: [
                [{
                    type: 'checkbox'
                    //     field: 'id',
                    //     title: '编号'
                }, {
                    field: 'imageUrl',
                    title: '图片',
                    },
                }, {
                    field: 'sort',
                    title: '排序',
                    sort: true
                }, {

                    title: '操作',
                    toolbar: '#barDemo',
                    minWidth: 200
                }]
            ],
            toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            ,
            defaultToolbar: [] //无右侧标题栏功能
            ,
            title: '产品组图数据表',
            id: 'imagetable'
        });

 
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var dataList = checkStatus.data;
            var arrnew = [];
            dataList.forEach(e => {
                arrnew.push(e.id)
            });
            switch (obj.event) {
                //新增
                case 'getAddData':
                    var imagedata = {
                        "id": 0,
                        "imageUrl": "",
                        "sort": 0,
                    };
                    itemImgList.push(imagedata);
                    imagetable.reload('imagetable', {
                        data: itemImgList
                    });
                    break;
            }
            ;
        });

    });

</script>

重点在3
1.一定要 limit赋个值,不然超过十行,再怎么添加也没用
limit:1000
2.重载的代码

 imagetable.reload('imagetable', {
                        data: itemImgList
                    });

==============================================================================
layui上是这么写的

表格重载
很多时候,你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求(可任选一种)。

1.table.reload(ID, options, deep)
参数 ID 即为基础参数id对应的值,见:设定容器唯一ID
参数 options 即为各项基础参数
参数 deep:是否采用深度重载(即参数深度克隆,也就是重载时始终携带初始时及上一次重载时的参数),默认 false
注意:deep 参数为 layui 2.6.0 开始新增。 所有渲染方式
2.tableIns.reload(options, deep) 参数同上
tableIns 可通过 var tableIns = table.render() 得到 仅限方法级渲染

重载示例:

示例1:自动化渲染的重载code
【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
 
【JS】
table.reload('idTest', {
  url: '/api/table/search'
  ,where: {} //设定异步数据接口的额外参数
  //,height: 300
});

示例2:方法级渲染的重载code
//所获得的 tableIns 即为当前容器的实例

var tableIns = table.render({
  elem: '#id'
  ,cols: [] //设置表头
  ,url: '/api/data' //设置异步接口
  ,id: 'idTest'
}); 
 
//这里以搜索为例
tableIns.reload({
  where: { //设定异步数据接口的额外参数,任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});
//上述方法等价于
table.reload('idTest', {
  where: { //设定异步数据接口的额外参数,任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
}); //只重载数据

注意:这里的表格重载是指对表格重新进行渲染,包括数据请求和基础参数的读取