layui 事件和监听

方法一: data-type

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
</div>
<table class="layui-table" id="idTest" lay-filter="demo"></table>

<script>
    layui.use('table', function () {
        var $ = layui.$, 
            active = {
                 getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                , getCheckLength: function () { //获取选中数目
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                }
       };
    }
</script>

 说明:

<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>

active = {
    getCheckData: function () {
        //...略...
    }
}

// data-type='getCheckData', 在 active 中,调用 匿名 function()

 方法二: lay-filter

<div class="layui-form-item'>
	<input type="radio" value="男" lay-filter="sex" />男
	<input type="radio" value="女" lay-filter="sex" />女
</div>

<div class="layui-form-item'>
	<input type="radio" value="小学" lay-filter="grade" />小学
	<input type="radio" value="初中" lay-filter="grade" />初中
	<input type="radio" value="高中" lay-filter="grade" />高中
</div>

<script>
	layui.use(['form','jquery'],function(){
		form.on('radio(sex)',function(data){//lay-filter="sex" 
			if(data.value=="男"){
				//...略...
			} else{
				//...略...
			}
		})
		form.on('radio(grade)',function(data){// lay-filter="grade"
			if(data.value=="小学"){
				//...略...
			} 
			else if(data.value=="初中"){
				//...略...
			} 
			else{
				//...略...
			}
		})
	});
</script>

说明: 

form.on('event(lay-filter)',function(){
    //...略...
})

//event 就是表单控件类型type, 类似:radio select CheckBox text table 等等
//lay-filter 就是表单控件的 自定义lay-filter属性值
//举例:     
//<input type="radio" value="男" lay-filter="sex" />男
//form.on('radio(sex)',function(data){ ... }

方法三: lay-event 

<div class="layui-hide layui-btn-group" id="toolbar">
    <button class="layui-btn " lay-event="getall">查看所选数据</button>
    <button class="layui-btn " lay-event="getnum">查看所选数量</button>
</div>
<table class="layui-table" id="idTest" lay-filter="demo"></table>

<script>
    layui.use('table', function () {
        var $ = layui.$;//在layui里引用jQuery
        var table = layui.table;//实例化layui 表格
        table.on('toolbar(demo)', function (obj) {//我给表格设置的lay-filter叫demo
                var checkStatus = table.checkStatus('idTest')//表格id，获取选中行
                switch (obj.event) {//对lay-event的值，进行不同的判断
                    case 'getall'://lay-event
                        layer.msg(JSON.stringify(checkStatus.data));
                        break;
                    case 'getnum'://lay-event
                        layer.msg(JSON.stringify(checkStatus.data.length));
                        break;                    
                }
            });
    }
</script>

说明:

<button class="layui-btn " lay-event="getall">查看所选数据</button>

table.on('toolbar(demo)', function (obj) { //是event事件的入口
switch (obj.event) {//对lay-event的值，进行不同的操作判断
case 'getall'://执行lay-event='getall'的按钮事件
//...略...
break;

方法四:jQuery

layui.use('table', function () {
        var $ = layui.$;//在layui里引用jQuery

        $("#btn").click(function(){ ... });  //之类的js事件...其他略....

}文章来源地址https://uudwc.com/A/Rxkxe