layui实现数据表格点击搜索功能

下面我就为你详细讲解 layui 实现数据表格点击搜索功能的完整攻略。

1. 组件准备

首先，我们需要在页面中引入 layui 的相关组件，包括 layui.css、layui.js 和以及所需的模块文件。具体操作如下：

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//cdn.layui.com/layui/v2.5.6/css/layui.css">

<!-- 引入 layui.js -->
<script src="//cdn.layui.com/layui/v2.5.6/layui.js"></script>

<!-- 引入所需的模块文件 -->
<script src="js/modules/jquery.js"></script>
<script src="js/modules/table.js"></script>

上述代码中，我们引入了 layui 的 css 和 js 文件，并通过 modules 文件夹下的 jquery.js 和 table.js 文件引入了 layui.jquery 和 layui.table 两个模块。

2. 数据表格实现

接下来，我们需要定义一个数据表格，并将其渲染到页面中。具体代码如下：

<!-- 定义数据表格 -->
<table class="layui-hide" id="table" lay-filter="table"></table>

<!-- 引入数据表格模板 -->
<script type="text/html" id="tpl">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
</script>

<!-- 渲染数据表格 -->
<script>
  layui.use(['table', 'jquery'], function () {
    let table = layui.table;
    let $ = layui.jquery;

    // 初始化数据表格
    table.render({
      elem: '#table',
      url: '/api/data',
      toolbar: 'default',
      cols: [[
        { field: 'id', title: 'ID', width: 80, sort: true },
        { field: 'name', title: '姓名', width: 120 },
        { field: 'title', title: '职位', width: 200 },
        { field: 'salary', title: '薪资', width: 120 },
        { align: 'center', toolbar: '#tpl', title: '操作' }
      ]]
    });

    // 搜索按钮的点击事件
    $('#search').on('click', function () {
      let keyword = $('#keyword').val();
      table.reload('table', {
        where: {
          keyword: keyword
        }
      });
    });
  });
</script>

上述代码中，我们首先定义了一个 table 元素，并为其定义了一个 ID 和 lay-filter 属性值，分别为 table 和 table。然后，我们通过 type="html" 的方式引入了数据表格模板，里面定义了一个按钮。最后，我们使用 table.render() 方法初始化数据表格，并在方法的回调函数中为搜索按钮绑定了点击事件。这个点击事件会获取输入框中的搜索关键字，并使用 table.reload() 方法重新加载数据表格，同时传递搜索关键字为表格的 where 参数。

3. 服务端接口实现

最后，我们需要在服务端接口实现搜索功能。具体代码如下：

// 引入 express 和 mockjs
const express = require('express');
const Mock = require('mockjs');

// 创建 express 实例
const app = express();

// 定义数据接口
app.get('/api/data', (req, res) => {
  let keyword = req.query.keyword;
  let data = Mock.mock({
    'list|50': [{
      'id|+1': 1,
      'name': '@cname',
      'title': '@ctitle(5, 10)',
      'salary|1000-20000': 1000
    }]
  }).list;

  // 如果有 keyword，则进行过滤
  if (keyword) {
    data = data.filter(item => item.name.indexOf(keyword) > -1);
  }

  // 返回数据
  res.json({
    code: 200,
    message: 'success',
    data: data
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

上述代码中，我们使用 express 定义了一个数据接口 /api/data，同时在接口中使用 mockjs 生成 50 条数据。然后，我们获取查询参数 keyword，如果 keyword 存在则对数组进行过滤，最后通过 res.json() 方法返回数据。

至此，我们就完成了 layui 实现数据表格点击搜索功能的完整攻略。