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 页开始
}
}); //只重载数据
注意:这里的表格重载是指对表格重新进行渲染,包括数据请求和基础参数的读取