layui列表点击事件_layui触发点击事件

2024-10-21 0 551

Image

layui列表点击事件_layui触发点击事件

在使用Layui框架进行前端开发时,列表点击事件的处理是一个常见的需求。本文将详细介绍如何在Layui中实现列表点击事件,并提供多种解决方案。

简述解决方案

在Layui中,可以通过监听DOM元素的点击事件来实现列表项的点击处理。Layui提供了丰富的API和方法,使得我们可以轻松地绑定和触发点击事件。本文将介绍以下几种方法:

  1. 使用原生JavaScript绑定点击事件。
  2. 使用Layui的lay-event属性。
  3. 使用Layui的table模块提供的事件处理方法。

使用原生JavaScript绑定点击事件

代码示例

html
</p>



  
  <title>Layui 列表点击事件</title>
  


  <ul id="list" class="layui-timeline">
    <li class="layui-timeline-item">
      <i class="layui-icon layui-timeline-axis"></i>
      <div class="layui-timeline-content layui-text">
        <h3 class="layui-timeline-title">列表项1</h3>
      </div>
    </li>
    <li class="layui-timeline-item">
      <i class="layui-icon layui-timeline-axis"></i>
      <div class="layui-timeline-content layui-text">
        <h3 class="layui-timeline-title">列表项2</h3>
      </div>
    </li>
  </ul>

  
  
    document.addEventListener('DOMContentLoaded', function() {
      var listItems = document.querySelectorAll('#list .layui-timeline-item');
      listItems.forEach(function(item) {
        item.addEventListener('click', function() {
          alert('点击了:' + this.querySelector('.layui-timeline-title').innerText);
        });
      });
    });
  



<p>

解释

  1. HTML结构:定义了一个包含多个列表项的<ul>元素。
  2. JavaScript:使用document.querySelectorAll选择所有列表项,并为每个列表项添加点击事件监听器。当点击列表项时,弹出一个提示框显示被点击的列表项标题。

使用Layui的lay-event属性

代码示例

html
</p>



  
  <title>Layui 列表点击事件</title>
  


  <table class="layui-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>列表项1</td>
        <td><button class="layui-btn">详情</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td>列表项2</td>
        <td><button class="layui-btn">详情</button></td>
      </tr>
    </tbody>
  </table>

  
  
    layui.use(['table'], function() {
      var table = layui.table;

      table.on('tool(test)', function(obj) {
        var data = obj.data; // 获得当前行数据
        var event = obj.event; // 获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
        if (event === 'detail') {
          layer.msg('点击了:' + data.name);
        }
      });
    });
  



<p>

解释

  1. HTML结构:定义了一个表格,其中每一行的最后一个单元格包含一个按钮,按钮上使用了lay-event属性。
  2. JavaScript:使用Layui的table模块监听tool事件。当点击带有lay-event="detail"的按钮时,弹出一个提示框显示被点击的列表项名称。

使用Layui的table模块提供的事件处理方法

代码示例

html
</p>



  
  <title>Layui 列表点击事件</title>
  


  <table id="demo"></table>

  
  
    layui.use(['table'], function() {
      var table = layui.table;

      // 渲染表格
      table.render({
        elem: '#demo',
        url: '/data.json', // 数据接口
        cols: [[
          {field: 'id', title: 'ID', width: 80},
          {field: 'name', title: '名称', width: 120},
          {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ]],
        page: true
      });

      // 监听工具条
      table.on('tool(test)', function(obj) {
        var data = obj.data; // 获得当前行数据
        var event = obj.event; // 获得 lay-event 对应的值
        if (event === 'detail') {
          layer.msg('点击了:' + data.name);
        }
      });
    });
  

  
    <a class="layui-btn layui-btn-xs">详情</a>
  



<p>

解释

  1. HTML结构:定义了一个表格,并使用lay-filter属性指定过滤器名称。
  2. JavaScript:使用Layui的table模块渲染表格,并监听tool事件。当点击带有lay-event="detail"的按钮时,弹出一个提示框显示被点击的列表项名称。

通过以上三种方法,你可以在Layui中轻松实现列表点击事件的处理。希望这些示例能对你有所帮助。

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载