layui工具栏按钮监听事件

给大家分享的功能是layui工具栏按钮监听事件
Layui工具栏按钮监听事件：点击头部工具栏区域设定了属性为lay-event="" 的元素时触发
关键属性为lay-event=""

效果图：





图一是查询按钮的监听事件效果
图二是新增按钮的监听事件效果
图三是修改按钮的监听事件效果
图四是删除按钮的监听事件效果
图五是刷新按钮的监听事件效果

需要用到的css、js样式：

<link href="~/Contents/assets/layui/css/layui.css" rel="stylesheet" />
<script src="~/Contents/js/jquery-3.3.1.min.js"></script>
<script src="~/Contents/assets/layui/layui.all.js"></script>

按钮代码：

按钮是用JavaScript封装得来的

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="getSelect">查询</button>
		<button class="layui-btn layui-btn-sm" lay-event="getInsert">新增</button>
		<button class="layui-btn layui-btn-sm" lay-event="getUpdate">修改</button>
		<button class="layui-btn layui-btn-sm" lay-event="getDelete">删除</button>
		<button class="layui-btn layui-btn-sm" lay-event="getRefresh">刷新</button>
	</div>
</script>

绑定表格：
创建一个table实例最简单的方式是，在页面放置一个元素<table id="table"></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;
	}
});