LayUI实现数据表格和分页的方法
一.前端部分
html只需要放一个有id的div就行了,方便js获取渲染区域
<div lay-filter="demo" ></div>
js部分需要注意url为异步数据接口,done是渲染完表格之后的回调函数
table.render({
elem: '#data_grid'
//,width: 900
//,height: 274
,cols: [[ //标题栏
{field: 'id', title: 'ID', width: 80, sort: true}
,{field: 'username', title:'用户名',width: 100} //空列
,{field: 'password', title: '密码', width: 120}
,{field: 'gender', title: '性别', width: 150}
,{field: 'nichen', title: '昵称', width: 150}
,{field: 'birthday', title: '出生年月', width: 120}
,{fixed: 'right', width: 215,align:'center', toolbar: '#barDemo'}
]]
,url:url
,skin: 'row' //表格风格
,even: true
,page: true //是否显示分页
,limits: [3,5,10]
,limit: 5 //每页默认显示的数量
,done:function(res){
userPage.data = res.data;
}
//,loading: false //请求数据时,是否显示loading
});
根据条件查询,表格异步刷新,where为附带参数
$('#sub_query_form').on('click',function () {
var queryPo = page.formToJson($('#query_form').serialize());
var table = layui.table;
table.reload('data_grid', {
url: '/getUserList.action',
page:{
curr:1 //从第一页开始
},
method:'post',
where:{
queryStr:queryPo
},
done:function (res) {
userPage.data = res.data;
}
});
});
将x-www-form-urlencoded转化为json字符串
formToJson:function (data) {
data=data.replace(/&/g,"\",\"");
data=data.replace(/=/g,"\":\"");
data="{\"" data "\"}";
return data;
}
表格工具栏使用
1.首先在html里定义好按钮
<script type="text/html" id="barDemo">
<a lay-event="add">增加</a>
<a lay-event="detail">查看</a>
<a lay-event="edit">编辑</a>
<a lay-event="del">删除</a>
<!-- 这里同样支持 laytpl 语法,如: -->
{{# if(d.auth > 2){ }}
<a lay-event="check">审核</a>
{{# } }}
</script>
2.js内引用
layui.use('table', function(){
var table = layui.table;
userPage.tab('/getUserList.action');
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
userPage.data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:' data.id ' 的查看操作');
}
else if(obj.event === 'del'){
layer.confirm('真的要删除这条记录么',{icon: 3, title:'确定删除'}, function(index){
obj.del();
$.post('/doDelete.action?id=' data.id,function (res) {
userPage.reload(res);
});
layer.close(index);
});
}
else if(obj.event === 'add'){
layer.open({
title:'增加窗口',
content:userPage.template,
yes:function () {
var user = page.formToJson($('#layer_form').serialize());
var data = 'user=' user;
$.post('/doAdd.action',data,function (res) {
userPage.reload(res);
});
layer.closeAll();
}
})
}
else if(obj.event === 'edit'){
layer.open({
title:'编辑窗口',
content:userPage.template,
success:function () {
$('input[name="id"]').val(userPage.data.id);
$('input[name="username"]').val(userPage.data.username);
$('input[name="password"]').val(userPage.data.password);
$('input[name="gender"]').val(userPage.data.gender);
$('input[name="nichen"]').val(userPage.data.nichen);
$('input[name="birthday"]').val(userPage.data.birthday);
},
yes: function(){
var mgUser = page.formToJson($('#layer_form').serialize());
var data = 'user=' mgUser;
$.post('/doEdit.action',data,function (res) {
userPage.reload(res);
});
layer.closeAll();
}
})
}
});
});
二.服务端部分
Controller层需要接收以下参数,page,limit,要查询的条件,返回值根据layui文档给出的默认返回值
@RequestMapping("/getUserList")
@ResponseBody
public PageList<MgUser> getUserList(@RequestParam(required = false,defaultValue = "1") int page,@RequestParam(required = false,defaultValue = "5") int limit,@RequestParam(required = false) String queryStr){
QueryPo queryPo = null;
if (!StringUtils.isEmpty(queryStr)){ //性别类型转换
queryPo = JSONObject.parseObject(queryStr,QueryPo.class);
if ("1".equals(queryPo.getGender())){
queryPo.setGender("男");
}
if ("2".equals(queryPo.getGender())){
queryPo.setGender("女");
}
}
PageList pageList = new PageList();
try {
if (!StringUtils.isEmpty(queryPo)){ //中文字转码
if(!StringUtils.isEmpty(queryPo.getKeywords())){
queryPo.setKeywords(URLDecoder.decode(queryPo.getKeywords(),"utf-8"));
}
}
List<MgUser> userList = userService.getUserList(page,limit,queryPo); //根据条件查询分页数据
pageList.setCode("0");
pageList.setMsg("ok");
pageList.setData(userList);
int count = userService.countUserByExample(queryPo);
pageList.setCount(count);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
pageList.setCode("-1");
pageList.setMsg("数据获取异常");
return pageList;
}
return pageList;
}
Service层根据条件查询并分页
public List<MgUser> getUserList(int page , int limit, QueryPo queryPo) {
MgUserExample userExample = new MgUserExample();
MgUserExample.Criteria criteria = userExample.createCriteria();
if(!StringUtils.isEmpty(queryPo)){
if (!StringUtils.isEmpty(queryPo.getGender())){
criteria.andGenderEqualTo(queryPo.getGender());
}
if (!StringUtils.isEmpty(queryPo.getKeywords())){
criteria.andUsernameLike("%" queryPo.getKeywords() "%");
}
}
userExample.setStart((page-1)*limit);
userExample.setLimit(limit);
List<MgUser> mgUsers = userMapper.selectByExample(userExample);
return mgUsers;
}
注意由于mybatis逆向工程生成的Example没有limit和page,所以需要自己加上
private int start;
private int limit;
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
接着修改Mybatis的mapper.xml,需要加上分页条件
<select resultMap="BaseResultMap" parameterType="com.wang.entity.MgUserExample" >
select
<if test="distinct" >
distinct
</if>
<include refid="Base_Column_List" />
from mg_user
<if test="_parameter != null" >
<include refid="Example_Where_Clause" />
</if>
<if test="orderByClause != null" >
order by ${orderByClause}
</if>
<if test="start !=0 or limit!=0">
limit #{start},#{limit}
</if>
</select>
本文转自:https://www.cnblogs.com/wangxiayun/p/9145638.html
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfechf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01