table数据表格增加重载某一行数据的功能

建议 未结 10 675
棒棒的棒棒糖
悬赏:20飞吻
方案如下:
1.增加参数:主键字段,如{pk:id},代表id字段为主键字段
2.增强事件方法:event.update(),当没有传递参数时,触发更新该行数据,向url后台接口发送{id:123},接收到数据后,对该行数据进行覆盖渲染。

细节如下:
1.若未设置主键,调用了event.update(),则console.warn('缺少主键,如需异步更新某行数据,请设置参数pk'),直接使用table.reload()重载整个表格;
2.向后台发送id:123参数时,同时携带table原有的参数,如page和limit,参数最终可能为?page=1&limit=10&id=123,这么做的原因防止开发者忘记对id=123返回具体行数据时兼容性处理,关于返回值请继续看细节3;
3.后台响应格式,可以为数组、也可以为{字面量}(对象),layui需要进行判断,若为数组,则遍历并寻找id=123的行数据,如果不为数组(是对象)则直接使用该数据进行渲染。
4.响应的两种格式可参考下文:
// 允许数组
{"code":"0","msg":"","count":"1","data":[{id:121, name:666},{id:122, name:666},{id:123, name:666}]}

// 允许{字面量}(对象)
{"code":"0","msg":"","count":"1","data":{id:123, name:666}}
实现该特性的优势为:
1.借助layui.table的数据渲染功能,开发者无需再手工update数据,只需要轻松调用event.update()即可实现layui.table自动渲染。
2.后端开发者,无需再写额外代码,只需判断是否传入主键参数,给sql加个条件id=123即可,完美。
回帖
  • // 改造后的layui.table后的代码可能如下:

    table.render({
    limit: 30,
    elem: '#lst_tab',
    url: 'index.php',
    title: '订单列表',
    pk: 'id',// 指定主键字段
    cols: [
    [{
    field: 'id',
    title: 'ID',
    width: 60,
    align: 'center',
    pk: true, // 指定这是一个主键字段(实际上和上面的那个pk二选一)
    }, {
    field: 'refund_id',
    title: '退款单号',
    }, {
    field: 'money',
    title: '退款金额',
    align: 'center',
    }, {
    field: 'status',
    title: '审核状态',
    templet: function (row) {
    return "<span style='color:" + row.status_info.color + "'>" + row.status_info.name + "</span>";
    }
    }, {
    title: '操作',
    align: 'center',
    templet: function (row) {
    if (row.status == 0) {
    return "<a class='layui-btn' lay-event='verify'>审核</a>";
    }
    }
    }]
    ],
    page: true
    });


    layui.table.on('tool(test)', function (obj) {
    var data = obj.data;
    var event = obj.event;
    var tr = obj.tr;

    if (event == 'verify') {
    view.req({
    method: 'post',
    url: "do.php",
    data: {
    'id': data.id
    },
    done: function () {
    obj.event.update();// 只更新某行数据
    }
    });
    } else {
    console.warn('缺少监听');
    }
    return false;
    });
    0 回复
  • 帖子里的{"code":"0","msg":"","count":"1","data":..}格式是我config里自定义的,只是说明返回值的两种格式。
    0 回复