layui table工具栏点击时间_layui中的table中toolbar自定义过程

自己挖过的坑需要自己来填。

layui的table默认表头工具栏右边有3个操作,分别是过滤字段、导出excel、打印功能。

6b27428b1069dd0d5050e37a6c959ffd.png

在js中代码添加toolbar即可实现上面的效果:

table.render({

elem:"#demo",height:420,url:"/demo/table/user/" //数据接口

,title: "用户表",page:true //开启分页

,toolbar: "default" //开启工具栏,此处显示默认图标,可以自定义模板,详见文档

,totalRow: true //开启合计行

,cols: [[ //这里省略 ]]

});

如果在分页的情况下,这里默认导出的是当前页筛选后的结果。我们其实需要从后台返回数据提供给这个组件。

经过一番查找后,终于发现修改的思路,这里需要更新到官方2.5.5版本的layui。

然后在官方的文档里面看到如下的内容:

注意这部分内容在文档的中间部分,但是右边的目录上是没有的,之前把右边的目录点了遍也没发现。

整段的内容全部放在一个页面上,右边的锚点也不全,这种文档读起来真费事。

38b24803632ad5e94b2ff19af6da7b06.png

下面说下怎么改:

原来在table里面渲染的 toolbar: "default"可以自己修改为自定义的图标和事件。

由于我既定义了自己的头部工具条在左边,又修改了默认的右边的工具条,所以就成了下面这样。

,defaultToolbar: ["filter","print",{title:"提示",layEvent: "LAYTABLE_EXCEL",icon: "layui-icon-table"}] //这里在右边显示

,toolbar:"#tblToolBar" //这里在左边显示,然后指定到模版id

显示如下:

5362411170a4984202b12394ed392688.png

接下来,指定事件触发:

//监听头工具栏

table.on("toolbar(lay-tableList)", function(obj){if(obj.event === "refresh"){

reloadTable();

}else if(obj.event === "LAYTABLE_EXCEL"){

console.log("excel export");

}

});

事件触发正常。

bbabffb147c0eb1689ccca04fb64299f.png

接下来,就是通过ajax查询后台,把结果赋值给data,然后通过table.exportFile("table的id", data)即可导出数据。


版权声明:本文为weixin_30026297原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。