300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > layui 给table里面的添加图标_layui中的table中toolbar自定义过程

layui 给table里面的添加图标_layui中的table中toolbar自定义过程

时间:2018-09-30 02:17:28

相关推荐

layui 给table里面的添加图标_layui中的table中toolbar自定义过程

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

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

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

table.render({

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

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

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

,totalRow: true //开启合计行

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

});

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

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

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

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

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

下面说下怎么改:

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

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

,defaultToolbar: [‘filter‘,‘p

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。