layui 单元格事件

最新推荐文章于 2024-08-04 10:25:33 发布

孟启云

最新推荐文章于 2024-08-04 10:25:33 发布

阅读量4.3k

点赞数

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

本文链接：https://blog.csdn.net/weixin_44438032/article/details/120016125

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述
正常单元格如上图所示，一般在最后一列都会有一个操作列，但如果想要在单元格中添加事件，应该怎么写呢？
在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>

要点：