Layui模糊查询（VIP典藏版）

Layui常用总结

Layui常用总结50篇（VIP典藏版）

目录

一、模糊查询条件

二、列表项

三、重载Reload写法

四、扩展

五、常见问题解决

---

一、模糊查询条件

<form class=”layui-form” action=””>
    <label class=”layui-form-label”>参数1：</label>
    <div class=”layui-inline”>
        <input class=”layui-input” name=”param1″ id=”param1″ autocomplete=”off” placeholder=”请输入参数1：”>
    </div>

    参数2：
    <div class=”layui-inline”>
        <input class=”layui-input” name=”param2″ id=”param2″ autocomplete=”off” placeholder=”请输入参数2：”>
    </div>

    <button type=”button” class=”layui-btn” data-type=”reload” id=”search”>搜索</button>
    <button type=”reset” class=”layui-btn”>重置</button>

</form>

<form class="layui-form" action="">
    <label class="layui-form-label">参数1：</label>
    <div class="layui-inline">
        <input class="layui-input" name="param1" id="param1" autocomplete="off" placeholder="请输入参数1：">
    </div>

    参数2：
    <div class="layui-inline">
        <input class="layui-input" name="param2" id="param2" autocomplete="off" placeholder="请输入参数2：">
    </div>

    <button type="button" class="layui-btn" data-type="reload" id="search">搜索</button>
    <button type="reset" class="layui-btn">重置</button>

</form>

二、列表项

table.render({

    elem: ‘#test’
    , url: ctxPath + ‘xx/selectGaga’
    , toolbar: ‘#toolbarDemo’
    , title: ‘示例列表’
    , cellMinWidth: 150
    , cols: [
        [
            {title: ‘ID’, fixed: ‘left’, unresize: true, type: ‘numbers’}
            , {field: ‘param1’, title: ‘参数1’, align: ‘left’}
            , {field: ‘param2’, title: ‘参数2’, align: ‘left’}
            , {fixed: ‘right’, title: ‘操作’, toolbar: ‘#barDemo’, width: 150}
        ]
    ]
    , page: true
    , id: ‘reload’
});

table.render({
    elem: '#test'
    , url: ctxPath + 'xx/selectGaga'
    , toolbar: '#toolbarDemo'
    , title: '示例列表'
    , cellMinWidth: 150
    , cols: [
        [
            {title: 'ID', fixed: 'left', unresize: true, type: 'numbers'}
            , {field: 'param1', title: '参数1', align: 'left'}
            , {field: 'param2', title: '参数2', align: 'left'}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
        ]
    ]
    , page: true
    , id: 'reload'
});

三、重载Reload写法

var $ = layui.$, active = {

    reload: function () {

        var param1 = $(‘#param1’);
        var param2 = $(‘#param2’);

        //执行重载
        table.reload(‘reload’, {

            page: {

                curr: 1 //重新从第 1 页开始
            }
            , where: {

                param1: param1.val(),//逗号隔开
                param2: param2.val()
            }
        }, ‘data’);
    }
};

$(‘#search’).on(‘click’, function () {

    var type = $(this).data(‘type’);
    active[type] ? active[type].call(this) : ”;
});

var $ = layui.$, active = {
    reload: function () {
        var param1 = $('#param1');
        var param2 = $('#param2');

        //执行重载
        table.reload('reload', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            , where: {
                param1: param1.val(),//逗号隔开
                param2: param2.val()
            }
        }, 'data');
    }
};

$('#search').on('click', function () {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
});

PS：where部分也可以介么写

where: {
        param1: $('#param1').val(),//逗号隔开
        param2: $('#param2').val()//最后一个参数没逗号
    }

四、扩展

table.init('filter', options); //转化静态表格
var tableObj = table.render({});
tableObj.reload(options); //重载表格

五、常见问题解决

Layui重载reload使用后加载不了页面

Layui重载reload使用后加载不了页面

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！