SOURCE

console 命令行工具 X clear

                    
>
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;
}

本项目引用的自定义外部资源