本文共 1933 字，大约阅读时间需要 6 分钟。

LayUI 搜索重载实现

在 LayUI 中，搜索重载是一项非常实用的功能，能够通过用户的交互操作动态刷新数据表格。以下将从实现方式入手，详细讲解如何实现搜索重载。

首先，需要在 HTML 中添加相应的表单结构。通过 LayUI 的表单输入框，可以让用户输入筛选条件。如上所示，主要包括以下几个搜索框：

在 JavaScript 部分，需要实现搜索重载的功能。主要有两种实现方式：

第一种方式是通过 LayUI 的 active 对象直接定义搜索重载的逻辑。具体实现如下：

layui.use(['layer', 'laydate','table'], function() {
    var table = layui.table;
    // 渲染表格
    table.render({
        elem: '#demo',
        id: 'testReload',
        url: '{:url('logList')}', // 数据接口
        title: '日志表',
        where: { 'type': { $type } },
        page: true,
        cols: [
            { field: 'real_name', title: '用户名', align: 'center' },
            { field: 'title', title: '操作', align: 'center' },
            { field: 'old', title: '旧数据', align: 'center' },
            { field: 'new', title: '新数据', align: 'center' },
            { field: 'detail_id', title: '原序号', align: 'center' },
            { field: 'input_time', title: '时间', align: 'center' },
            { field: 'admin', title: '操作人', align: 'center' }
        ]
    });
    // 搜索重载1
    $ = layui.$;
    var active = {
        reload: function(obj) {
            table.reload('testReload', {
                page: { curr: 1 },
                where: obj
            }, 'data');
        }
    };
});

第二种方式是通过 jQuery 调用搜索按钮的 click 事件，手动获取表单输入值并调用 LayUI 表格的 reload 方法。具体实现如下：

$('#reload').on('click', function() {
    var name = $('input[name=name]').val();
    var admin = $('input[name=admin]').val();
    var title = $('input[name=title]').val();
    var remark = $('select[name=remark]').val();
    var convenient = $('select[name=convenient]').val();
    var obj = {
        name: name,
        admin: admin,
        title: title,
        remark: remark,
        convenient: convenient
    };
    active.reload(obj);
});

以上就是 LayUI 搜索重载的两种实现方式，分别对应不同的使用场景和需求。通过以上方法，可以轻松实现表格数据的动态刷新功能。

转载地址：http://oprfk.baihongyu.com/