编程的过程就是一个不断发现问题,解决问题的过程,在用ssm框架和layui开发的过程中,在使用layui数据表格重载方法实现搜索功能中遇到问题,下面贴出我的解决方法。
一、dao层方法
//按username搜索
List<User> querySerchByusername(@Param("username") String username);
二、dao层xml
<!--按username模糊搜索-->
<select id="querySerchByusername" resultType="User">
select * from mycard.user
<if test="username!=null and username != ''">
where username like concat("%",#{username},"%")
</if>
</select>
三、controller层
LayuiTypeJson是自定义的工具类,第一篇文章里有,这里不再说明
//所有用户搜索功能
@RequestMapping("/alluserserch")
public LayuiTypeJson<User> serch(@RequestParam(defaultValue = "") String username) {
List<User> list = null;
if (username.equals("")) {
list = userservice.queryAllUser();
}
if (!username.equals("")) {
list = userservice.querySerchByusername(username);
}
LayuiTypeJson<User> layuiTypeJson = new LayuiTypeJson<User>();
layuiTypeJson.setCount(list.size());
layuiTypeJson.setData(list);
return layuiTypeJson;
}
四、前台页面
注意:name属性需要和查询的字段名称保持一致
<div class="demoTable" style="float:right">
<div class="layui-inline">
<input class="layui-input" name="username" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
五、layui方法
这里遇到的坑有几个:
1、注意要给table一个id,用于重载,如:id: ‘testReload’。
2、给后台传值的时候要把layui源码中的key去掉。
<script>
layui.use('table', function () {
var table = layui.table
, form = layui.form;
table.render({
elem: '#demo'
, url: '/user/alluserserch'
, cellMinWidth: 80
, cols: [[
{type: 'numbers'}
, {type: 'checkbox'}
, {field: 'username', title: '用户名', width: 200, sort: true}
, {field: 'password', title: '密码'}
, {field: 'role', title: '角色'}
, {field: 'email', title: '邮箱'}
, {field: 'sex', title: '性别'}
, {field: 'age', title: '年龄'}
, {field: 'tel', title: '电话'}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
]]
, id: 'testReload'
, page: true
});
var $ = layui.$, active = {
reload: function () {
var username = $('#demoReload');
console.log(username.val());
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
username: username.val()
}
}, 'data');
}
};
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
功能已经成功实现,有问题的小伙伴可以在评论区留言,大家一起探讨。