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;
    	}
});