layui&layuiAdmin爬坑文档

table数据更新,工具栏无法联动变化


原因:table对非对应field更新数据是无法响应的。没有templet字段就没法让update()识别。


  • 将工具栏和变动状态栏合并。缺点是table结构限制,优点是代码简单

方案一 把工具栏和相关联的field的合并,工具栏需要添加templet:#tool_ID用来让update()识别,从而更新完成,必须是withdraw_state这一列没有,可以有更好的展示效果

"tableAccount" lay-filter="tableAccount">table><script type="text/html" id="tableToolBar">
  {{# if(d.withdraw_state == 'default'){ }}
  class="layui-btn layui-btn-xs" lay-event="success">通过</a>
  驳回a>
  {{# } else if(d.withdraw_state == 'success'){ }}
  class="layui-badge layui-bg-gray">已成功</span>
  {{# } else if(d.withdraw_state == 'fail'){ }}
  已失败span>
  {{# } }}
script> 
  
{
  field: 'withdraw_state',
  title: '操作',
  fixed: 'right',
  width: 180,
  align: 'center',
  templet: '#tableToolBar',
  toolbar: '#tableToolBar'
}

使用.update()更新table数据,然后工具栏会变化

obj.update({
  withdraw_state: 'success',
  withdraw_time: time,
});
  • 使用layui的laytpl来对工具栏进行更新。缺点是代码量大,逻辑复杂,优点是适用性强

    方案二 使用updata更新table,
    原因:因为不是对应field的数据,所以[data-field=”toolStatus”]所在的工具条不支持更新,
    1.只能通过使用laytpl获取到更新后的代码模板,
    2.操纵tr = obj.tr找到tool对应的field(‘td[data-field=”toolStatus”]’),找到对饮field下面的的div用html()更新tool内容 。

    状态和操作是分开两列的。

{
 field: 'withdraw_state',
  title: '提现状态',
  templet: '#withdraw_state'
},
{
 field: 'toolStatus',
  title: '操作',
  fixed: 'right',
  width: 180,
  align: 'center',
  templet: '#tableToolBar',
  toolbar: '#tableToolBar'
}

var timestamp = new Date(1527837613 * 1000);
var time = utils.formatTime(timestamp);
obj.update({
  withdraw_state: 'success',
  withdraw_time: time,
});
data.withdraw_state = 'success';
laytpl(tableToolBar.innerHTML).render(obj.data, function (html) { //tableToolBar为toolbar的script模板id
  toolhtml = html;
});
tr.children('td[data-field="toolStatus"]').children('div').html(toolhtml); //toolStatus为当前表格工具列是表格的第几列


  • 重载table的当前页,缺陷是可能table的数据量变化,导致当前行不在当前页了,优点是代码量少

方案三 使用.layui-laypage-btn(表格分页中的确定按钮),重载当前页面

$(".layui-laypage-btn").trigger('click');

你可能感兴趣的:(前端)