layui table工具栏点击时间_layui工具栏按钮监听事件

layui工具栏按钮监听事件

给大家分享的功能是layui工具栏按钮监听事件

Layui工具栏按钮监听事件：点击头部工具栏区域设定了属性为lay-event="" 的元素时触发

关键属性为lay-event=""

效果图：

图一是查询按钮的监听事件效果

图二是新增按钮的监听事件效果

图三是修改按钮的监听事件效果

图四是删除按钮的监听事件效果

图五是刷新按钮的监听事件效果

需要用到的css、js样式：

按钮代码：

按钮是用JavaScript封装得来的

绑定表格：

创建一个table实例最简单的方式是，在页面放置一个元素，然后通过table.render()方法指定该容器，如下所示：

绑定表格代码：

layui.use('table', function () {

var table = layui.table;

table.render({

elem: '#table',

data: [],

//url: 'SelectDepartment', //数据接口

page: true, //开启分页

cols: [[ //表头

{type: 'checkbox', fixed: 'left'},

{ type: 'numbers', title: '序号', align: 'center', width: 100 },

{ field: 'DepartmentNumber', title: '部门编号', align: 'center' },

{ field: 'Department', title: '部门名称', align: 'center' }

]],

id: 'table',

toolbar: '#toolbarDemo',//开启自定义工具行，指向自定义工具栏模板选择器

defaultToolbar: ['filter', 'print', 'exports']

});

});

头部工具栏按钮监听事件代码：

table.on('toolbar(test)', function (obj) {

var checkStatus = table.checkStatus(obj.config.id);

switch (obj.event) {

case 'getSelect':

layer.msg("这是查询", { icon: 6, anim: 6 });

break;

case 'getInsert':

layer.msg("这是新增", { icon: 6, anim: 6 });

break;

case 'getUpdate':

layer.msg("这是修改", { icon: 6, anim: 6 });

break;

case 'getDelete':

layer.msg("这是删除", { icon: 6, anim: 6 });

break;

case 'getRefresh':

layer.msg("这是刷新", { icon: 6, anim: 6 });

//location.reload();

break;

}

});