根据 “账户，名称，角色” 做一个搜索框

最新推荐文章于 2026-06-14 14:30:41 发布

原创最新推荐文章于 2026-06-14 14:30:41 发布 · 171 阅读

本内容遵循CC 4.0 BY-SA版权协议

该博客介绍了如何使用layui框架实现一个包含账户、名称和角色的搜索框功能。通过监听提交按钮，当用户输入搜索条件并点击搜索时，会重新加载表格数据，展示匹配的搜索结果。涉及的技术包括layui表单、layui表格、layui util、jQuery和layui layer。

<!--加上一个搜索框-->
<form class="layui-form layui-form-pane" action="" onsubmit="return false">
    <div class="layui-form-item">
        <label class="layui-form-label">账户</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入账号：" class="layui-input">
        </div>

        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input type="text" name="real_name" placeholder="请输入姓名：" class="layui-input">
        </div>

    <label class="layui-form-label">角色</label>
    <div class="layui-input-inline">
        <select name="type">
            <option value="" selected="">请选择</option>
            <option value="1">管理员</option>
            <option value="2">用户</option>
        </select>
    </div>

    <div class="layui-input-inline">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索</button>
    </div>
    </div>
</form>

使用模块

layui.use(['form','table','util','jquery','layer','laydate'], function(args){
    var table = layui.table;
    var form = layui.form;
    var util = layui.util;
    var $ = layui.jquery;
    var layer = layui.layer;
    var laydate = layui.laydate;

//监听搜索框
form.on('submit(searchBtn)', function(data){
    console.log(data.field)
    table.reload('test', {
        where: { //设定异步数据接口的额外参数，任意设
            username: data.field.username
            ,type: data.field.type
            ,real_name: data.field.real_name
            //…
        }
        ,page: {
            curr: 1 //重新从第 1 页开始
        }
    }); //只重载数据
    return false;
});

}）