layui 单元格事件

正常单元格如上图所示，一般在最后一列都会有一个操作列，但如果想要在单元格中添加事件，应该怎么写呢？
在layui的文档中提供了单元格事件：layui官方文档.

详细代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>点击下面表格中的【签名列】，以演示单元格事件<table class="layui-table" lay-data="{height: 308, url:'/demo/table/user/'}" lay-filter="demoEvent"><thead><tr><th lay-data="{field:'id', width:80}">ID</th><th lay-data="{field:'username', width:80}">用户名</th><th lay-data="{field:'sign', width:'50%', event: 'setSign', style:'cursor: pointer;'}">签名</th><th lay-data="{field:'experience'}">积分</th><th lay-data="{field:'score'}">评分</th></tr></thead>
</table> <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('table', function(){var table = layui.table; //监听单元格事件table.on('tool(demoEvent)', function(obj){var data = obj.data;if(obj.event === 'setSign'){layer.prompt({formType: 2,title: '修改 ID 为 ['+ data.id +'] 的用户签名',value: data.sign}, function(value, index){layer.close(index);//这里一般是发送修改的Ajax请求//同步更新表格和缓存对应的值obj.update({sign: value});});}});
});
</script></body>
</html>

要点：

表格中的 lay-filter，作监听之用
行中的event，此事件在点击单元格的时候会触发

layui 单元格事件相关推荐

layui table单元格事件修改值
事件中的 this相当于document.getElementById("id") 替代方法就是将原本 document.getElementById("id" ...
layui单元格换行
layui单元格换行使其能显示,如果左右列固定,在done回调中使用下方方法 .layui-table-cell {height: auto;} //固定行随单元格自动调整 function aut ...
layui单元格编辑监听
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年7月26日 Layui数据表格有一个edit属性,只要我们在表格初始化把这个属性设置好了就能进行编辑了,修改数据关键:edit: 't ...
ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息
场景双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息. 效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公 ...
elementui 弹窗显示详细信息_ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息...
场景双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息. 效果如下注: 实现首先给el-table设置cell-dblclick事件 v-loading="l ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
iview table点击单元格事件
点击事件 on: {click: () => {this.handleShow(params.row) //点击事件}} title设置 domProps: {title: params.row ...
layui单元格内的多个名称，通过拼接的方式显示
一.如下图的销售订单商品所示,像这种订单类型的表格,里面通常都会有多个不同类型的商品和数量之类的.那么像这样使用的layui表格里面又是怎么把他拼接完成上去的呢! 二.首先说明下我表的结构,销售单对应 ...
layui的table表格在同一单元格换行显示2个数据（layui-table）
转自:https://blog.csdn.net/qq15577969/article/details/104109430 先看一下最终效果图: 查看全文 http://www.taodudu.cc/ ...

layui 单元格事件

layui 单元格事件相关推荐

最新文章

热门文章