layui使用open打开一个type是1的页面。content内容是一个input框。怎么在yes回调函数中获取input里输入的内容

在 layui中打开一个 type 为 1 的页面，可以使用 `layer.open()` 方法，并设置 `type: 1` 和 `content` 属性来定义页面内容。而在回调函数中获取 input 框的内容，则可以通过以下步骤来实现：

1. 给 input 元素设置一个 `id` 属性，例如 `id="inputContent"`。
2. 在回调函数中获取 input 元素的值，可以使用 `document.getElementById('inputContent').value` 来获取。
3. 将获取到的值传递给回调函数的处理逻辑即可。

示例代码如下：

layer.open({
  type: 1,
  content: '<input type="text" id="inputContent" placeholder="请输入内容">',
  btn: ['确认', '取消'],
  yes: function(index, layero){
    var inputValue = document.getElementById('inputContent').value;
    // 将 input 框的内容传递给回调函数的处理逻辑
    console.log(inputValue);
    layer.close(index);
  }
});

相关问题

layui表格，在第一个页面通过data定义数据，渲染页面，但是弹出层代码写在第二个页面上，弹出层如何获取表格里面的值

您可以这样做：在点击弹出层按钮的时候，触发一个函数，在该函数中获取选中行的值，然后将这些值传递给弹出层。具体实现方法如下：

1. 在表格加载数据时，给每一行添加一个自定义属性，例如：data-id，值为该行的id。

2. 在点击弹出层按钮时，触发一个函数，获取当前选中行的id。

3. 在弹出层中，定义一个隐藏域，将选中行的id存储到该隐藏域中。

4. 在弹出层的表单提交事件中，获取隐藏域中的值，这样就可以获取到当前选中行的所有值了。

具体实现细节可以看一下以下代码示例:

//渲染表格
layui.table.render({
elem: '#table',
url: 'xxx',
cols: [
[
{type: 'checkbox'},
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'city', title: '城市', width: 150},
{field: 'sign', title: '签名', minWidth: 200},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'operate', title: '操作', toolbar: '#barDemo', fixed: 'right', width: 120}
]
],
page: true
});

//监听工具条
layui.table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.open({
type: 2,
title: '详情页面',
area: ['600px', '450px'],
content: 'detail.html',
btn: ['关闭', '提交'],
yes: function(index, layero){
layer.close(index);
},
btn2: function(index, layero){
//获取当前选中行的id，并将其存储到隐藏域中
var id = data.id;
$("#selectedId").val(id);
//提交表单
$("#form").submit();
//阻止默认行为
return false;
}
});
}
});

在弹出层的页面中，需要定义一个隐藏域:

<input type="hidden" name="selectedId" id="selectedId" value=""/>
在提交表单事件中，就可以获取到选中行的id了:

var id = $("#selectedId").val();

layui表格在最后一行添加一个新增按钮

好的，您想了解如何在layui表格的最后一行添加一个新增按钮。您可以通过以下步骤来实现：

1. 首先，您需要在表格的配置项中添加一个自定义操作列（toolbar）。

2. 在这个操作列中，添加一个自定义按钮，并设置它的事件。

3. 在事件中，您可以编写代码来弹出一个对话框，让用户填写新的数据。

4. 当用户输入完数据后，您需要将这些数据提交到后台，并将返回的数据插入到表格的最后一行。

下面是一个示例代码，可以帮助您实现上述功能：

// 定义表格的配置项
var options = {
  // 定义操作列
  toolbar: '#toolbar',
  // 设置数据
  data: [{id: 1, name: '张三', age: 18}, {id: 2, name: '李四', age: 20}],
  // 定义表头
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'},
    {field: 'age', title: '年龄'}
  ]]
};

// 初始化表格
var table = layui.table.init('#table', options);

// 监听新增按钮的点击事件
$('#add-btn').click(function() {
  // 弹出对话框，让用户输入数据
  var dialog = layer.open({
    title: '新增数据',
    content: '<div><input type="text" name="name" placeholder="姓名" /><br/><input type="text" name="age" placeholder="年龄" /></div>',
    btn: ['保存', '取消'],
    yes: function(index, layero) {
      // 获取用户输入的数据
      var name = layero.find('input[name="name"]').val();
      var age = layero.find('input[name="age"]').val();
      // 将数据提交到后台，并插入到表格的最后一行
      $.ajax({
        url: '/add',
        data: {name: name, age: age},
        success: function(result) {
          table.append(result);
          layer.close(dialog);
        }
      });
    }
  });
});

这段代码中，我们在表格的配置项中定义了一个操作列(toolbar)，并在其中添加了一个自定义按钮(add-btn)。当用户点击这个按钮时，会弹出一个对话框，让用户输入新增数据。用户输入完数据后，我们通过ajax将数据提交到后台，并将返回的结果插入到表格的最后一行。

希望以上内容能帮助您解决问题，如果还有不清楚的地方，欢迎继续提问。