c语言编程笔录

首页 >   > 笔记大全

笔记大全

layUI怎样使用layer .open在content打开数据表格获取值并返回

更新时间：2023-10-01

layUI中使用layer.open打开数据表格并获取值

首先，需要在页面引入layUI和layer的相关文件。可以使用CDN引入，也可以下载源代码自行引入。 

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

接下来，我们需要在脚本中编写相关的代码。下面是一个示例的HTML结构和JavaScript代码。 

<body>
  <input type="button" id="openBtn" value="打开数据表格">
  <div id="tableContainer"></div>

  <script>
    layui.use(['layer', 'table'], function() {
      var layer = layui.layer;
      var table = layui.table;

      // 监听打开按钮的点击事件
      $('#openBtn').click(function() {
        // 使用layer.open打开一个弹窗，并指定content为一个HTML元素
        var index = layer.open({
          type: 1,
          content: $('#tableContainer'),
          area: ['800px', '600px'],
          success: function() {
            // 表格渲染
            table.render({
              elem: '#tableContainer',
              url: 'path/to/data',
              cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名称'},
                {field: 'age', title: '年龄'}
              ]],
              done: function(res, curr, count) {
                // 监听表格数据加载完成的事件
                table.on('tool(tableContainer)', function(obj) {
                  // 监听表格内操作按钮的点击事件
                  if (obj.event === 'edit') {
                    // 获取点击行的数据
                    var data = obj.data;
                    // 关闭弹窗
                    layer.close(index);
                    // 执行其他操作
                    // ...
                  }
                });
              }
            });
          }
        });
      });
    });
  </script>
</body>

上述代码中，我们使用layer.open方法打开了一个弹窗，内容是一个空的div标签，id为tableContainer。在success回调函数中，我们使用table.render方法渲染了一个数据表格，并通过url指定了获取数据的接口。在done回调函数中，我们监听了表格的工具条事件，并在编辑按钮的点击事件中获取了点击行的数据，关闭了弹窗并执行了其他操作。

总结

通过layUI和layer的配合，我们可以轻松实现在弹窗中打开数据表格并获取值的功能。通过监听表格的工具条事件，我们可以在用户操作表格内的按钮时获取相应的数据并进行其他操作。这种方式简洁灵活，适用于各种需要在弹窗中操作数据表格的场景。

图文推荐