一、3个都显示
- 1、图片
- 2、代码
二、自定义显示[筛选列-filter]
- 1、图片
- 2、代码
三、工具栏监听
- 1、监听筛选列、导出列、打印列
- 2、监听自定义按钮
四、参考地址

一、3个都显示

1、图片

2、代码

table.render({...,toolbar: true //开启工具栏...
});//或table.render({...,toolbar:'default' //开启工具栏...
});

二、自定义显示[筛选列-filter]

1、图片

2、代码

table.render({...,toolbar: true //开启工具栏,defaultToolbar: ['filter']...
});//或table.render({...,toolbar:'default' //开启工具栏,defaultToolbar: ['filter']...
});

三、工具栏监听

1、监听筛选列、导出列、打印列

table.on('toolbar(tableFilter)', function(obj) {// console.log(obj.event, obj);switch (obj.event) {case 'LAYTABLE_COLS':console.log('监听筛选列');break;case 'LAYTABLE_EXPORT':console.log('监听导出列');break;case 'LAYTABLE_PRINT':console.log('监听打印列');break;};
});

2、监听自定义按钮

详细代码请移步 https://www.layui.com/demo/

//监听头工具栏事件
table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data; //获取选中的数据switch(obj.event){case 'add':layer.msg('添加');break;case 'update':if(data.length === 0){layer.msg('请选择一行');} else if(data.length > 1){layer.msg('只能同时编辑一个');} else {layer.alert('编辑 [id]：'+ checkStatus.data[0].id);}break;case 'delete':if(data.length === 0){layer.msg('请选择一行');} else {layer.msg('删除');}break;};
});

四、参考地址

layui中的table中toolbar自定义过程
在线示例 Layui
table 数据表格文档 - layui.table

Layui中的table中toolbar自定义过程相关推荐

html表格td点击事件,监听layui中的table中的td点击事件
上图就是用layui生成的一个table表格; 在这里我们给td绑定class,再通过jq的方式去监听是不可行的; 会监听不到事件; 不过在layui中,给了监听方法,并且还可以获取到该行所有的数据 ...
PHP中cellspacing,table 中 cellspacing 与 cellpadding 区别
table是什么?它是由一个个cell单元格构成的,在表格中, 的个数取决于每行中包裹的cell单元格个数!此外,默认table表格在没有添加css样式:表格的一行,有几对tr表格就有几行: B.-: ...
layui 给table里面的添加图标_layui中的table中toolbar自定义过程
自己挖过的坑需要自己来填. layui的table默认表头工具栏右边有3个操作,分别是过滤字段.导出excel.打印功能. 在js中代码添加toolbar即可实现上面的效果: table.render ...
css中设置table中的td内容自动换行
在项目中,有用到表格.因为有的内容比较长,所以需要列宽大一些,有的内容比较短,列宽就小一些.遇到了一个问题,在学校联系方式表里面,联系人电话/电子邮件这两列,无论我加多大的宽度,内容总是会把表格列撑的 ...
jquery中获得table中第几个td元素的值
<script type="text/javascript"> $(document).ready(function(){ $("table").e ...
关于element中，table中使用 overflow:hidden； white-space:nowrap； text-overflow:ellipsis；火狐浏览器无效的问题
如下图显示: 折腾了半天,有的可以正常-,有的不行,就以为接口数据格式的问题最后审查元素看了下因为**word-break: break-all;导致的问题.我们这里可以设置word-break: ...
elementui table 固定列_element-ui 中的table的列隐藏问题解决
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
element-ui 中的table的列隐藏问题
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
layui数据表格table在选项卡tabs中分页条不显示的解决
layui数据表格table在选项卡tabs中分页条不显示的解决解决:渲染后重新设置高度:$(".layui-table-box").css("height" ...
elementUI中table中自定义修改时间格式2020-10-26T10:00:00
问题描述: 前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办 ? 方法一: elementUI中的table提供了 ...

Layui中的table中toolbar自定义过程

一、3个都显示

1、图片

2、代码

二、自定义显示[筛选列-filter]

1、图片

2、代码

三、工具栏监听

1、监听筛选列、导出列、打印列

2、监听自定义按钮

四、参考地址

Layui中的table中toolbar自定义过程相关推荐

最新文章

热门文章