Layui搜索数据的重载

Layui 表格重载数据

可以用ajax 但… (写的依然很抠脚.)

遇到的问题:

返回值都是null 后台无法获取参数

解决

1.page和limit参数

​ 在Layui的重载表格中，会自动向请求的地址发出page和limit参数，所以不必在写page和limit参数了。

终于体会到了作者设计此处时的奇妙和厉害之处

解决代码

// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
    //执行搜索重载
    table.reload('currentTableId', {
        url: '/queryUserByOther',
        method:'post',
        page: {
            curr: 1
        }
        , where: data.field

    }, 'data');

    return false;
});

这时会发现拿到了值

前台会把所有的字段都传递给后端，即使没有搜索也会传一个' '进来。导致了后台去查询了传来的' '，这个地方可以通过后端来处理。这里我就尝试这去使用前端来处理，所以不讨论后端。

解决办法

// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {

    // 装载数据
    var resultData = {};
    if(data.field.number != '' )
        resultData.number = data.field.number;
    if(data.field.sex != '' )
        resultData.sex = data.field.sex;
    if(data.field.phone != '' )
        resultData.phone = data.field.phone;
    if(data.field.email != '' )
        resultData.email = data.field.email;

    //执行搜索重载
    table.reload('currentTableId', {
        url: '/queryUserByOther',
        method: 'post',
        page: {
            curr: 1
        }
        , where: resultData

    }, 'data');

    return false;
});

所有代码

<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户账号名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="number" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sex" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" autocomplete="off" class="layui-input">
                    </div>
                </div>



                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                    <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh-3"></i> 重 置 </button>
                </div>

            </div>
        </form>
    </div>
</fieldset>

js

// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {

    // 装载数据
    var resultData = {};
    if(data.field.number != '' )
        resultData.number = data.field.number;
    if(data.field.sex != '' )
        resultData.sex = data.field.sex;
    if(data.field.phone != '' )
        resultData.phone = data.field.phone;
    if(data.field.email != '' )
        resultData.email = data.field.email;

    //执行搜索重载
    table.reload('currentTableId', {
        url: '/queryUserByOther',
        method: 'post',
        page: {
            curr: 1
        }
        , where: resultData

    }, 'data');

    return false;
});

controller

//根据邮箱查询
@RequestMapping("/queryUserByOther")
@ResponseBody
public JsonObject queryUserByOther(User user){
    System.err.println(user.toString());
    //String number = user.getNumber();
    //        System.err.println("number" + number);
    //    List<User> users = userService.queryUserByOther(number);
    List<User> users = userService.queryUserByOther(user);
    System.err.println("users" + users);
    //        //返回值对象信息
    JsonObject object = new JsonObject();
    object.setCode(0);
    object.setMsg("ok");
    object.setCount((long)users.size());
    object.setData(users);
    //
    return object;
}