layui的一些记录

最新推荐文章于 2023-09-14 14:45:17 发布

逝去～的✨

最新推荐文章于 2023-09-14 14:45:17 发布

阅读量681

点赞数

分类专栏： layui 文章标签： layui javascript html

本文链接：https://blog.youkuaiyun.com/qq_43924690/article/details/121691906

版权

layui 专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍了layui中$(‘ ’).on()方法用于绑定点击事件，通过class筛选元素。接着讲解了table.on()针对表格行的监听，以及如何使用layer.open({})创建弹窗。最后，详细阐述了table.render({})用于表格渲染的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

一、$(’ ').on()

绑定点击事件，根据class筛选
如：html

<span class="layui-btn" data-type="update"><i class="layui-icon">&#xe624;</i>刷新数据</span>

js：

layui.use('table',funtion(){
	var table = layui.table;
	````省略
	var active = {
		update:function(){
			````省略
		},
	};
	//筛选class为layui-btn的标签click点击事件
	$('.layui-btn').on('click', function () {
		//$(this).data('type')获取标签中 data-type="update"的update值
		//即type=update  
		//data('值') 对应标签 data-值="update"
        var type = $(this).data('type');
        //对应上面的变量 
        //.call(this)继承  用来表示此方法继承active中方法和属性
        active[type] ? active[type].call(this) : '';
    });
    
}

二、table.on()

上面一是class的on监听，那么这个是table的on监听
不过这个是table行监听
代码如下（示例）：

html：

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
					·····
                <table class="layui-hide" id="tbl" lay-filter="tbl"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

js 官方文档中

layui.use('table',funtion(){
	var table = layui.table;
	````省略
	//工具条事件
	table.on('tool(tbl)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器		的属性 lay-filter="对应的值"
  		var data = obj.data; //获得当前行数据
  		var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  		var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  		if(layEvent === 'detail'){ //查看
    		//弹窗
    		layer.open({})
  		} else if(layEvent === 'del'){ //删除
    		layer.confirm('真的删除行么', function(index){
      		obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      		layer.close(index);
      		//向服务端发送删除指令
    	});
  		} else if(layEvent === 'edit'){ //编辑
    		//do something
    		layer.open({})
    		//同步更新缓存对应的值
    		obj.update({
      			username: '123'
      			,title: 'xxx'
    	});
  		} else if(layEvent === 'LAYTABLE_TIPS'){
    		layer.alert('Hi，头部工具栏扩展的右侧图标。');
  		}
	});
    
}

layer.open({})

layer弹窗
js

   layer.open({
       type: 2,//弹窗类型；0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
       //iframe层 弹窗调用其他页面 content为URL
       title: "编辑参数",
       area: ['850px', '650px'],
       content: context + "param/editParam/" + data.id,
       btn: ["提交", "取消"],
       yes: function (index, layero) {//确定后回调方法
       
       		var submit = layero.find('iframe').contents().find("#send");//通过layero找到iframe页面的id #send为页面层提交按钮ID
       		submit.click();// 触发提交监听
       		return false;
       }

   })

三、table.render({})

表格渲染：方法渲染
代码如下（示例）：
html

<table class="layui-hide" id="tbl" lay-filter="tbl"></table>

layui.use('table',funtion(){
	var table = layui.table;
	````省略
    table.render({
        elem: '#tbl'  //对应标签id
        , url: context + 'param/getList' //表格数据来源
        , toolbar: true //开启表格头部工具栏区域，该参数支持四种类型值：
        , title: '系统参数列表'
        , height: 420
        , totalRow: true  //是否开启合计行区域
        , limit: 5  //一页多少
        //页面请求参数重命名
        , request: {
            pageName: "curr",
            limitName: "nums"
        }
        , initSort: {//初始化排序
            field: 'createTime' //排序字段，对应 cols 设定的各字段名
            , type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
        }
        , cols:
            [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true}
                    , {field: 'identify', title: '唯一标识', width: 150}
                    , {field: 'params', title: '参数值', width: 100}
                    , {field: 'otherParams', title: '其它参数值', width: 100}
                    , {field: 'createTime', title: '创建时间', width: 100}
                    , {field: 'updateTime', title: '更新时间', width: 100}
                    , {field: 'detail', title: '详细描述', width: 200}
                    , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo'}
                ]
            ]
        , page: true
        , response: {
            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
        }
        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
            return {
                "code": 200,
                "count": res.total, //解析数据长度
                "data": res.list //解析数据列表
            };
        }
    });
    
}