layui表格搜索功能

在网站开发中，数据的展示与搜索是一个很常见的需求。而在前端框架中，layui 是一个广受欢迎的UI框架，也提供了便捷的表格组件。本文将介绍如何在 layui 表格中添加搜索功能。

基本思路

Layui 表格中没有原生的搜索功能，但提供了许多基础组件，可以根据实际需要实现搜索功能。基本的实现思路如下：

1. 获取用户输入的搜索关键字。
2. 遍历表格数据，判断每条数据是否符合搜索条件。
3. 如果符合条件则显示数据，否则隐藏数据。

实际操作

下面我们将使用 layui 的一个示例表格进行演示。示例代码如下：

<table class="layui-table" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'id',width:80}">ID</th>
      <th lay-data="{field:'username',width:120}">用户名</th>
      <th lay-data="{field:'email',width:200}">邮箱</th>
      <th lay-data="{field:'sign',width:500}">签名</th>
      <th lay-data="{field:'sex',width:80,templet:'#sexTpl'}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'ip'}">IP</th>
      <th lay-data="{field:'jointime',width:120}">加入时间</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>user-1</td>
      <td>[e-mail]</td>
      <td>人生就像是一场修行</td>
      <td>{{d.sex}}</td>
      <td>北京市</td>
      <td>192.168.0.8</td>
      <td>2018-10-08</td>
    </tr>
    <!-- 更多数据省略 -->
  </tbody>
</table>

在本示例中，使用了一个 layui 表格，默认情况下是一个静态的表格，数据不支持排序和搜索。我们需要对其进行改造，使其支持搜索功能。

获取搜索关键字

要实现搜索，首先需要获取用户输入的搜索关键字。我们可以在页面中添加一个输入框和一个搜索按钮，用户在输入关键字后点击搜索按钮，即可开始搜索。示例代码如下：

<div class="search-box">
  <input type="text" class="layui-input" placeholder="请输入关键字">
  <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
</div>

搜索函数

获取用户输入关键字后，我们需要编写一个搜索函数，实现搜素逻辑。搜索函数可以使用 JavaScript 的 Array 类型的 filter() 方法来实现。我们首先需要获取表格数据，再根据用户输入的关键字，过滤出符合条件的数据。示例代码如下：

// 获取表格数据
var tableData = [];
layui.use(['table'], function () {
  var table = layui.table;
  tableData = table.cache.demo;
});

// 搜索函数
function searchData(keyword) {
  var resultData = tableData.filter(function(item, index) {
    return item.username.indexOf(keyword) !== -1 ||
      item.email.indexOf(keyword) !== -1 ||
      item.sign.indexOf(keyword) !== -1 ||
      item.city.indexOf(keyword) !== -1;
  });
  return resultData;
}

在本函数中，我们使用 table.cache.demo 获取表格数据，然后使用 filter() 方法过滤出符合关键字的数据。

添加搜索按钮事件

在搜索按钮被点击之后，我们需要执行搜索函数，并将结果显示在表格中。我们可以通过 layui 的 table.reload() 方法来实现。示例代码如下：

// 添加搜索按钮事件
layui.use(['table'], function () {
  var table = layui.table;

  // 监听搜索点击
  $('.search-box .layui-btn').on('click', function () {
    // 获取关键词
    var keyword = $('.search-box input').val();
    // 过滤数据
    var resultData = searchData(keyword);
    // 渲染表格
    table.reload('demo', {
      data: resultData
    });
  });

  // 重载表格
  table.reload('demo', {
    data: tableData
  });
});

在本代码中，我们首先监听搜索按钮的点击事件，获取用户输入的关键字，并使用 searchData() 函数过滤数据。最后，我们使用 table.reload() 方法重新加载表格，并将过滤后的数据传入表格中。

总结

通过上述步骤，我们即可在 layui 表格中实现搜索功能。当然，搜索功能可能有更加复杂的需求，但本示例的思路可以作为一个起点，让我们可以依据实际需要对其进行扩展。

参考文献：

• Layui表格搜索功能的实现
• Layui table类