Layui Table 中使用 field+templet 动态改变 toolbar 的方法

分享 未结 置顶 精帖 19 3700
CrazyYi
CrazyYi 2020-1-7
悬赏:20飞吻
最近遇到一个问题:在使用layui table 的时候,点击行的按钮(一般是用toolbar 或templet 的方式生成的按钮),按钮要跟着动态变化样式(不仅仅只是修改按钮显示的文字text,还包括 按钮对应的lay-event,对应的class 等)——如何能够动态的改变 toolbar 的值。

发现了好几个帖子,好像都讲得不是很详细,也许是我理解不够。反正折腾了好多天。

类似帖子:
如何动态改变toolbar的值
table通过工具条obj.update()方法更新数据后,工具条列没有重新渲染
table中的toolbar怎么样才能当前行数据和菜单按钮权限两种数据传入laytpl中生成按钮菜单
layui表格obj.update 能不能同时更新toolbar的按钮

这个问题,研究了几天,终于找到比较好的解决办法,供大家参考。

以下是效果显示



一、方法一:采用 field + templet 的方式
二、方法二:采用 field 自动更新html 的方式
以下我会将两种方法一同实现在页面上给大家看看效果。


## 1、首先先定义一个 templet 模板(这个怎么定义,就直接参考官方文档吧)
<!-- templet 模板,用于toolbar 操作 -->
<!-- event,class,title 都是由“行形参”中的某个字段进行控制 -->
<script type="text/html" id="barExpand">
<a lay-event="{{d.expandFunc}}"><i class="layui-icon {{d.expandIcon}}"></i>{{d.expandTitle}}</a>
</script>



## 2、定义测试数据(这个就大家自己发挥)


在后端代码获取到数据后,还要手动为每条记录增加几个字段。
这些字段,你可以在后端代码中先处理好,也可以在下一步 table render 的parseData 或done 回调中进行处理。
关键是这几个字段一定要有。



## 3、 初始化options 并进行table render


以下是代码,可拷贝
    // 初始化 options,注意,这里不要用toolbar,需要用 templet 才有效
let options = {
elem: '#mainList'
, url: '{:url("table")}'
, method: 'get'
, toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, title: '业务订单表'
, totalRow: true
, cols: [[
{fixed: 'left', title: '1', field: 'expandHtml', width: 100},
{fixed: 'left', title: '2', field: 'expandTitle', templet: '#barExpand', width: 100},
{field: 'order_no', title: '流水号', width: 200, fixed: 'left',},
{field: 'carname', title: '车辆名', width: 100},
{field: 'cartype_name', title: '车辆类型', width: 100},
{field: 'do_time', title: '创建时间', width: 200, sort: true},
{field: 'do_city', title: '城市', width: 100, templet: '#tipsTpl'},
{field: 'order_status_name', title: '订单状态', width: 100},
{field: 'pay_status_name', title: '支付状态', width: 100},
{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150},
]]
, page: true
, limit: 20
, limits: [10, 20, 30, 50, 100]
, response: {
}
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return res;
}
};
let insTb = table.render(options);
到目前为止,页面上就可以正常显示了(至于页面上如何显示table等,这个不在这里介绍,请参考官方文档)。
效果如下:



## 4、实现toolbar event事件的监听



    //监听行工具事件
table.on('tool(test)', function (obj) {
switch (obj.event) {
// 监听:展开事件 expand
case 'expand':
layer.msg('当前正在点击:expand');
obj.update({
expand: 1,
expandFunc: 'closed', // 这个是方法1中对应的 lay-event
expandIcon: 'layui-icon-triangle-d', // 这个是方法1中对应的 class
expandTitle: '折叠',

// 这个是方法2,直接更新对应的field(直接把html更改了)
expandHtml: '<a lay-event="closed"><i class="layui-icon layui-icon-triangle-d"></i>折叠</a>',
});
break;
// 监听:折叠事件 closed
case 'closed':
layer.msg('当前正在点击:closed');
obj.update({
expand: 0,
expandFunc: 'expand', // 这个是方法1中对应的 lay-event
expandIcon: 'layui-icon-triangle-r', // 这个是方法1中对应的 class
expandTitle: '展开',

// 这个是方法2,直接更新对应的field(直接把html更改了)
expandHtml: '<a lay-event="expand"><i class="layui-icon layui-icon-triangle-r"></i>展开</a>',
});
break;
}
});

大功告成。
因为方法一和方法二,对应的 lay-event 都是一样的。所以同一个 lay-event 的操作,会同步更新两个方法。
对应在页面上,就是你操作第一列或第二列,两个列都会变化。

以下是效果显示

回帖
  • Right_tzw
    2020-1-7
    赞一个。。。
    2 回复
  • jyh123
    2020-1-10
    @jyh123 456
    2 回复
  • 帅气啊!这种贴要顶
    1 回复
  • 楼主的想法果然是清新脱俗! 这种贴要顶一下
    1 回复
  • jyh123
    2020-1-10
    @wuhen 123
    1 回复
  • 可以的。踩个点,有这样的需求可以回看了。
    1 回复
  • 666,一直在想动态表格怎么做像dede里面那种点击展示和收起二级栏目,继续关注
    1 回复
  • JacFang
    2020-1-17
    请问,第2步在table render 的parseData 或done 回调中加 expand 几个字段是怎么加的?
    1 回复
  • 李青石
    2020-1-14
    11111111111111111111111111111111
    0 回复
  • [生病]
    0 回复