LayUI+mybatis+高级查询

1.页面增加按钮  

<script type="text/html" id="toolbarDemo">
    <div class="layui-inline">
        <form id="searchForm">
            用户名:
            <div class="layui-input-inline">
                <input type="text" value="" id="usernameSearch" name="name" 
                       placeholder="请输入部门关键字" class="layui-input search_input">
            </div>
            <button class="layui-btn" type="button" lay-event="search">查询</button>
            <button class="layui-btn layui-btn-normal" type="button" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-danger " type="button" lay-event="batchDel">批量删除</button>
        </form>
    </div>

2.js---->绑定事件

//头工具栏事件
table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
        //新增
        case 'add':
            //清空form表单
            $("#addForm").clearForm();
            var data = checkStatus.data;
            layer.open({
                title : "新增用户",
                type:1,
                skin:'layui-layer-rim',
                area: ['350px', '400px'],
                content: $("#add"),
                success : function(layero, index){
                    setTimeout(function(){
                        layui.layer.tips('点击此处可返回', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500)
                }
            })
            break;
        case 'search':
            table.reload('test', {
                where: $("#searchForm").serializeObject()//用jquery.jdirk.js实现的，将form表单中的input值转成json格式
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            break;
        case 'batchDel':
            var data = checkStatus.data;
            if(data.length==0){
                layer.alert("请至少选中一行再进行操作",{
                    icon:2,
                    title:'错误'
                });
                break;
            }
            //准备一个id数组
            var ids=[];
            $.each(data,function (index, obj) {
                ids.push(obj.id)
            })
            layer.confirm('确定删除这些数据?', function(index) {
                $.post("/department/batchDel", {"ids": ids.toString()}, function (result) {
                    if (result.succe) {
                        //刷新页面
                        table.reload('test',{page:{curr:1}});
                        layer.close(index);
                    } else {
                        layer.alert(result.backMessage, {
                            icon: 2,
                            title: '错误'
                        });
                    }
                })
            })
            break;
    };
});

3.前台接收参数

public class DepartmentQuery extends BaseQuery {

    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

4.Mapper.xml

<!--准备公共sql-->
<sql id="whereSql">
  <where>
    <if test="name!=null and name!=''">
      and name like concat("%",#{name},"%")
    </if>
  </where>
</sql>


<!--分页查询-->
<select id="querySelectAll" parameterType="EmployeeQuery" resultMap="BaseResultMap">
  select id, sn, name, manager, parent, children, dirpath, atate, tenant
  from t_department
 <include refid="whereSql"/>
</select>

5.接口

//根据Query拿到分页对象(分页)
Page findPageByQuery(BaseQuery baseQuery);

6.实现

@Override
@Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
public Page findPageByQuery(BaseQuery baseQuery) {
    PageHelper.startPage(baseQuery.getPage(),baseQuery.getLimit());
    return baseMapper.querySelectAll(baseQuery);
}

7.controller

//高级查询
@RequestMapping("/query")
@ResponseBody
public Layui query(DepartmentQuery query){
    Page pageByQuery = departmentService.findPageByQuery(query);
    Layui data = Layui.data(pageByQuery.getTotal(), pageByQuery,"",0);
    return data;
}