layui&layuiAdmin爬坑文档

本文介绍了在使用layui框架时,如何解决table数据更新后工具栏未能联动变化的问题。提供了三种解决方案:合并工具栏和状态栏、使用laytpl更新工具栏内容及重载table当前页。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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');
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值