layui的table怎么获取数据-layui table data

2024-10-21 0 1,227

layui的table怎么获取数据-layui table data

在使用Layui框架时,获取表格(table)中的数据是一项常见的需求。Layui提供了多种方式来获取和操作表格数据,本文将介绍几种常用的方法,帮助开发者轻松实现这一功能。

1. 直接从表格中获取数据

1.1 使用getData方法

Layui的table模块提供了一个getData方法,可以直接获取当前表格的所有数据。以下是一个简单的示例:

html
</p>



  
  <title>Layui Table Data Example</title>
  


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

  <button id="get-data-btn" class="layui-btn">获取数据</button>

  
  
    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},
          {field: 'age', title: '年龄', width: 80}
        ]],
        page: true
      });

      // 获取数据按钮点击事件
      document.getElementById('get-data-btn').addEventListener('click', function() {
        var data = table.getData('demo');
        console.log(data);
      });
    });
  



<p>

1.2 使用table.cache属性

除了getData方法,还可以通过table.cache属性直接访问表格的数据缓存。以下是一个示例:

html
</p>



  
  <title>Layui Table Data Example</title>
  


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

  <button id="get-data-btn" class="layui-btn">获取数据</button>

  
  
    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},
          {field: 'age', title: '年龄', width: 80}
        ]],
        page: true
      });

      // 获取数据按钮点击事件
      document.getElementById('get-data-btn').addEventListener('click', function() {
        var data = table.cache['demo'];
        console.log(data);
      });
    });
  



<p>

2. 通过事件获取选中行的数据

2.1 使用on方法监听行点击事件

如果需要获取用户选中的行数据,可以使用on方法监听行点击事件。以下是一个示例:

html
</p>



  
  <title>Layui Table Data Example</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},
          {field: 'age', title: '年龄', width: 80}
        ]],
        page: true
      });

      // 监听行点击事件
      table.on('row(test)', function(obj) {
        var data = obj.data; // 获取当前行的数据
        console.log(data);
      });
    });
  



<p>

2.2 使用checkStatus方法获取选中行

如果表格启用了多选功能,可以通过checkStatus方法获取所有选中的行数据。以下是一个示例:

html
</p>



  
  <title>Layui Table Data Example</title>
  


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

  <button id="get-selected-data-btn" class="layui-btn">获取选中数据</button>

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

      // 渲染表格
      table.render({
        elem: '#demo',
        url: '/data.json', // 数据接口
        cols: [[
          {type: 'checkbox'},
          {field: 'id', title: 'ID', width: 80},
          {field: 'name', title: '姓名', width: 120},
          {field: 'age', title: '年龄', width: 80}
        ]],
        page: true
      });

      // 获取选中数据按钮点击事件
      document.getElementById('get-selected-data-btn').addEventListener('click', function() {
        var checkStatus = table.checkStatus('demo');
        var data = checkStatus.data; // 获取选中的行数据
        console.log(data);
      });
    });
  



<p>

通过以上几种方法,你可以根据具体需求选择合适的方式来获取Layui表格中的数据。希望这些示例能帮助你在项目中更高效地使用Layui。

Image

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

源码下载