console
let tableId = "listTable"
let cols = [[
{ type: 'numbers', fixed: 'center' },
{ field: 'brand', title: '品牌' },
{ field: 'title', title: '商品名称' },
{ field: 'price', title: '价格'},
{
field: 'LAY_CELL_TOOLBAR',
title: '操作',
align: 'center',
templet: "#cell-tool-bar-tpl"
},
]]
table.render({
id: tableId ,
elem: '#' + tableId ,
url: 'https://dummyjson.com/products',
height: 'full-130',
cols,
page: true,
request :{pageName: 'skip', limitName: 'limit'},
response: {
dataName: 'products',
statusName: 'total',
statusCode: 100,
countName: 'total'
}
});
$("#operation-buttons .layui-btn").on('click', function () {
let layevent = this.getAttribute("lay-event");
if (layevent == 'reload') {
table.reload(tableId, {
url: 'https://dummyjson.com/products',
});
}
});
table.on(`cell(${tableId})`, function (obj) {
layer.success(`当前行:${obj.rowIndex},当前列:${obj.colIndex},当前行数据:${JSON.stringify(obj.data)}`)
});
<div class="layui-card">
<div class="layui-card-header">基础方法</div>
<div class="layui-card-body">
<div id="operation-buttons">
<button class="layui-btn layui-btn-sm layui-btn-normal " lay-event="reload">
刷新
</button>
</div>
<table id="listTable" lay-filter="listTable" class="row-editable-table" ></table>
</div>
</div>
<script type="text/html" id="cell-tool-bar-tpl">
{{# if(isBlank(d.id)){ }}
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="newEdit" title="保存"><i
class="layui-icon layui-icon-ok"></i></a>
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="newDel" title="删除"><i
class="layui-icon layui-icon-close"></i></a>
{{# } else { }}
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" title="保存"><i
class="layui-icon layui-icon-release"></i></a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" title="删除"><i
class="layui-icon layui-icon-close-fill"></i></a>
{{# } }}
</script>
.pull-right{
float: right;
}