layui列表怎么取input框的值

1. layui列表简介

layui list是一款非常好用的前端UI框架，其中包含了非常多的UI组件，其中就包括列表组件。列表组件提供了非常多的功能，例如表格、树形结构、分页、批量删除等等。在很多项目中，列表都是很重要的一部分，因此学习并掌握layui列表的使用方法非常重要。

2. input框的值是什么

在介绍layui列表如何取input框的值之前，我们需要先了解一下input框的值是什么。input是一个表单元素，它可以接受用户的输入，并以相应的格式保存。而input框的值就是输入到该框中的值，例如下面的代码：

<input type="text" name="username" value="apple">

上面的代码中，name属性表示表单控件的名称，value属性表示输入框默认的值。如果用户在输入框中输入了一个新的值，那么该值就会覆盖掉原来的默认值，成为新的值。在操作input框的时候，我们通常需要获取input框当前的值，以便进行相应的处理。

3. layui列表如何取input框的值

3.1 使用form表单

在layui中，使用form表单可以方便的获取input框的值。form表单会自动收集表单元素的值，并将它们封装成一个JSON对象，以便提交到后台进行处理。下面是一个示例：

<form class="layui-form">

  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" lay-verify="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
    </div>
  </div>
</form>

上面的代码中，form表单设置了一个class为layui-form，其中包含了一个名为username的input框。当用户输入完毕并提交表单时，可以使用form对象获取input框的值。例如：

layui.use(['form'], function(){

  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    console.log(data.field.username);
    return false;
  });
});

使用form.on监听了提交事件，并在事件处理函数中使用data.field.username获取了input框的值。这里有一点需要注意，即在input框中使用了lay-verify="required"属性，表示该输入框不能为空。如果用户提交时该输入框为空，则无法通过验证，导致无法获取input框的值。

3.2 使用Table模块

在layui中，列表通常使用Table模块进行管理。Table模块不仅提供了表格展示的功能，还支持搜索、排序、分页、编辑等多种功能。在Table模块中获取input框的值非常简单，只需要使用elem参数指定input框的父元素即可。例如：

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

  var table = layui.table;
  
  table.render({
    elem: '#test',
    url:'/demo/table/user/',
    page: true,
    cols: [[
      {field:'id', width:80, title: 'ID', sort: true},
      {field:'username', width:120, title: '用户名'},
      {field:'email', width:150, title: '邮箱'},
      {field:'phone', width:120, title: '手机号码'},
      {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
    ]],
    done: function(res, curr, count){
      //获取输入框的值
      var username = $('#search_username').val();
      
      //todo 处理用户名搜索
    }
  });
});

上面的代码中，通过elem参数指定了列表所在的元素，默认为table，这里为了方便使用了div元素。在列表渲染完成后，通过获取id为search_username的输入框的值，并进行相应的处理。

4. 总结

本文介绍了如何在layui列表中取得input框的值，并分别介绍了使用form表单和Table模块两种方法。在实际开发中，根据不同的需求可以选择不同的方法。为了保证代码的可维护性和可读性，建议尽量使用方法二中的Table模块进行开发。