博客
关于我
2021-09-23 工作记录--LayUI-搜索重载
阅读量:798 次
发布时间:2023-04-04

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

LayUI 搜索重载实现

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

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

  • 员工姓名(name):输入框,支持自动完成功能
  • 操作内容(title):输入框,支持自动完成功能
  • 操作人(admin):输入框,支持自动完成功能
  • 操作类型(remark):下拉选择框
  • 快捷查询(convenient):下拉选择框
  • 在 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/

    你可能感兴趣的文章
    MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
    查看>>
    Mysql中varchar类型数字排序不对踩坑记录
    查看>>
    MySQL中一条SQL语句到底是如何执行的呢?
    查看>>
    MySQL中你必须知道的10件事,1.5万字!
    查看>>
    MySQL中使用IN()查询到底走不走索引?
    查看>>
    Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
    查看>>
    MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
    查看>>
    mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
    查看>>
    mysql中出现Unit mysql.service could not be found 的解决方法
    查看>>
    mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
    查看>>
    Mysql中各类锁的机制图文详细解析(全)
    查看>>
    MySQL中地理位置数据扩展geometry的使用心得
    查看>>
    Mysql中存储引擎简介、修改、查询、选择
    查看>>
    Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
    查看>>
    mysql中实现rownum,对结果进行排序
    查看>>
    mysql中对于数据库的基本操作
    查看>>
    Mysql中常用函数的使用示例
    查看>>
    MySql中怎样使用case-when实现判断查询结果返回
    查看>>
    Mysql中怎样使用update更新某列的数据减去指定值
    查看>>
    Mysql中怎样设置指定ip远程访问连接
    查看>>