layui 事件和监听-Toy模板网

这篇具有很好参考价值的文章主要介绍了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事件...其他略....

}

方法五: lay-on

<lable id="lab1" lay-on="test-iframe-table" style="cursor:pointer;">点击并选择:</lable>
<script>
        layui.use(function () {
            var $ = layui.$;
            var layer = layui.layer;
            var util = layui.util;
            // 事件
            util.on('lay-on', {
                'test-iframe-table': function () {
                    //...略...
                }
            })
        });
    </script>

属性: lay-on="test-iframe-table"

调用: var util = layui.util;// 事件
util.on('lay-on', {
'test-iframe-table': function () {
//...略...
}
})文章来源地址https://www.toymoban.com/news/detail-506269.html