layui&layuiAdmin爬坑文档

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

---

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

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

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

<table id="tableAccount" lay-filter="tableAccount"></table>
<!-- 将提现状态和操作合并到一栏 -->
<script type="text/html" id="tableToolBar">
  {{# if(d.withdraw_state == 'default'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="success">通过</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="fail">驳回</a>
  {{# } else if(d.withdraw_state == 'success'){ }}
  <span class="layui-badge layui-bg-gray">已成功</span>
  {{# } else if(d.withdraw_state == 'fail'){ }}
  <span class="layui-badge layui-bg-gray">已失败</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');