LayUI数据表格和分页的实现
发布时间
阅读量：
阅读量
1、简单表格
样式
没有分页，没有crud操作
html代码
<table class="layui-hide" id="test"></table>js代码
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test' //id选择器
,url:'/demo/table/user/' //数据接口
,cellMinWidth: 80 //全局定义常规单元格的最小宽度
,cols: [[
{field:'id', width:80, title: 'ID', sort: true} //field 字段
,{field:'username', width:80, title: '用户名'} //title tr名
,{field:'sex', width:80, title: '性别', sort: true} //sort 此字段可排序
,{field:'city', width:80, title: '城市'} //width 宽度
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度
,{field:'experience', title: '积分', sort: true}
,{field:'score', title: '评分', sort: true}
,{field:'classify', title: '职业'}
,{field:'wealth', width:137, title: '财富', sort: true}
]]
});
});接口数据
code：固定是0
msg：随便写啥好像都没差别
count:此数据的总数
data:表格数据，来多少条显示多少条。
这4个是接口数据必须的4个属性
{
"code":0,
"msg":"",
"count":1000,
"data":[
{.....数据.....},
{.....数据.....}]2、自动分页表格
样式
有分页，没有crud
html代码
<table class="layui-hide" id="test"></table>js代码
自动分页表格，和普通的表格的js代码部分差不多，就多了一句 page： true
但前后端交互的数据不一样了。
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/demo/table/user/'
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '签名', minWidth: 150}
,{field:'experience', width:80, title: '积分', sort: true}
,{field:'score', width:80, title: '评分', sort: true}
,{field:'classify', width:80, title: '职业'}
,{field:'wealth', width:135, title: '财富', sort: true}
]]
,page: true //开启自动分页
});
});request参数和接口数据
开启自动分页后，request里会自动 带上分页数据。
page：第几页
limit：每页几条数据
这些参数是可以通过HttpServletRequest取出来的。
（这里只是展示，实际我这里用到springmvc的自动取参。）
String pageStr=request.getParameter("page");
String limitStr=request.getParameter("limit");拿到这些参数后，我们可以进行sql分页查询
@RequestMapping("/list")
@ResponseBody
public Map<String,Object> selectAll(Repair repair,@RequestParam(defaultValue="1")int page,@RequestParam(defaultValue="5")int limit) {
List<Repair> countData=service.selectAll(); //查询总数
List<Repair> data=service.selectByPage(page,limit); //分页查询数据
Map<String,Object> map=new HashMap<>(); //装填回调数据
map.put("code", 0);
map.put("msg", "随便写啥");
map.put("count", countData.size()); //获得数据的总数
map.put("data",data); //本次分页查询的数据
return map;
}json格式
{
"code":0,
"msg":"随便写啥",
"count":1000, //数据的总数
"data":[ //本次分页查询的数据
{.....数据.....},
{.....数据.....}]3、定制分页表格 和 手动设置参数
样式
和自动分页表格差不多，手动挡和自动挡的区别。
html
<table class="layui-hide" id="demo"></table>js代码
可以设置下一页、上一些、跳页这些按钮的顺序，
当回调数据不叫code、msg、data时，可以手动设置对应关系。
layui.use('table', function(){
var table = layui.table; //加载table模块
table.render({
elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
,title:"售后维修点表格"
,height: 315 //容器高度
,url:'${contextPath }/repair/list' //数据接口
//设置分页属性
,page:{
layout: [ 'prev', 'page', 'next', 'count','limit', 'refresh', 'skip']//自定义布局顺序
,limit:5 //初始 每页几条数据
,limits:[5,10,15] //可以选择的 每页几条数据
,groups:10 //最多几个跳页按钮
,first: false //不显示首页
,last: false //不显示尾页
}
//设置回调数据和数据表格参数对应
,parseData : function(resp) { //当名字不一致时，使用
return {
"code" : resp.mycode, //使分页参数和回调数据对应
"msg" : resp.mymsg,
"count" : resp.mytotal,
"data" : resp.data.list, //json格式
}
}
//设置表头
,cols: [[
{type:'numbers', width:80, title: '序号', sort: true}
,{field:'rep_id', width:80, title: 'ID', sort: true}
,{field:'rep_name', width:80, title: '公司名'}
,{field:'address', width:80, title: '地址', sort: true}
,{field:'phonenum', width:80, title: '电话'}
]]
//,…… //更多参数参考官方文档
});4、crud表格
样式
分页的同时，每行有crud操作按钮
html代码
表格部分基本和上面一样，table需要添加一个lay-filter属性，可以看做是一个layui的识别id。
<table id="test" class="layui-hide" lay-filter="demo"></table>js代码
为了精简代码，我这里就用自动分页了。
表头需要添加,{fixed: 'right', width:178, align:'left', toolbar: '#barDemo'}
其中toolbar:#barDemo指定一个按钮组的id。
按钮组
<!-- 操作按钮 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script> <script>
//基本部分和上面差不多
layui.use('table', function(){
//加载table模块
var table = layui.table;
table.render({
elem: '#test' //指定原始表格元素选择器（推荐id选择器）
,title:"售后维修点表格" //表格标题
,height: 315 //容器高度
,url:'${contextPath }/repair/list' //数据接口
,page:true
//设置表头
,cols: [[
{type:'numbers', width:80, title: '序号', sort: true}
,{field:'rep_id', width:80, title: 'ID', sort: true}
,{field:'rep_name', width:80, title: '公司名'}
,{field:'address', width:80, title: '地址', sort: true}
,{field:'phonenum', width:80, title: '电话'}
,{fixed: 'right', width:178, align:'left', toolbar: '#barDemo'} //添加工具条
]]
});
//为工具条添加监听
//这里括号里对应table设置的lay-filter属性！！
table.on('tool(demo)', function(obj){
//获取当前行数据
var data = obj.data;
//获取event对应的值
var event =obj.event;
//获取当前行的dom对象
var tr=obj.tr;
if(event === 'detail'){ //如果点击了查看按钮
//执行查看详情的方法
} else if(event === 'del'){ //如果点击了删除按钮
//执行异步删除方法
});
} else if(event === 'edit'){ //如果点击了修改按钮
//执行修改方法
}
});
</script>*上面用到的方法
<script>
//查看详情方法
function detail(data){
layer.open({
//弹出层类型
type:2,
//取值
content:'${contextPath }/static/test_B11/tanchu.jsp?id='+data.rep_id+'&name='+data.rep_name+'&address='+data.address+'&phonenum='+data.phonenum,
//设置宽和高
area:['500px','300px'],
//设置按钮名称
btn:['我知道了'],
//设置按钮位置
btnAlign:'c',
//透明度 和 被遮盖层颜色
shade: [0.8,'#393D49'],
//渐显动画
anim: 5
})
}
//修改方法
function edit(data){
layer.open({
//弹出层类型
type:2,
//取值
content:'${contextPath }/static/test_B11/xiugai.jsp?id='+data.rep_id+'&name='+data.rep_name+'&address='+data.address+'&phonenum='+data.phonenum,
//设置宽和高
area:['600px','400px'],
//设置按钮名称
btn:['暂不进行修改'],
//设置按钮位置
btnAlign:'c',
//透明度 和 被遮盖层颜色
shade: [0.8,'#393D49'],
//渐显动画
anim: 5,
//当检测到弹出层被关闭时，自动刷新一下界面
//用于后面修改学生信息请求提交后自动刷新查看修改结果
end: function(){
console.log("222");
},
})
}
</script> //删除方法
layer.confirm('真的删除行么', function(index){
//index表示第几次弹出层不是索引值，也不是主键等信息
//刷新页面重置
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//执行一个异步删除方法
}全部评论 (0)
还没有任何评论哟~