数据表格的样子
基础代码示例
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
</script>
</body>
</html>
接触表格第一步了解其js代码
- 在页面放置一个元素
<table id="demo"></table>，然后通过table.render()方法指定该容器。 table.render()中元素作用。
表id：elem ，需与页面table中id值元素相同。
elem: '#demo',
路径：url ， 表格获取数据的路径，路径返回的格式要求在下面
url: '${base}/userList.json',
自定义返回分页参数：requset + pageName+ limitName
默认为 page，limit。
request:{
pageName:'pageNo',
limitName:'lows'
},
最小宽度：cellMinWidth
cellMinWidth:120,
附加搜索条件：where 通过函数可以给where中参数赋值，下面有介绍
where:{filters::null}, //附件搜索条件
默认多少条/页：limit
limit:30,
可选条数：limits
limits:[50,100,500,1000,2000],
行高度设置：height
height: 'full-160',
是否分页：page
page:true,
工具栏：toolbar 其中自带简单的筛选、导出、打印功能
toolbar: true,
defaultToolbar:['filter','exports'],
可以自定义
toolbar: '<div><button class="layui-btn layui-btn-success layui-btn-sm" lay-event="allaudit">批量办理</button></div>',
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'allaudit':
var data= table.checkStatus('handList').data;
if(data.length>0){
$.each(data,function(index,item){
categoryType=item.PROCESS_DEFINITION_KEY;
if(index==data.length-1){
ids+=item.BUSINESS_ID;
}else{
ids+=item.BUSINESS_ID+",";
}
});
break;
表格返回函数：done 这里res可以得到表格所有数据，可以渲染页面其他位置内容，如总数等。
done: function(res, curr, count){
element.render('nav');
$("#count").html(res.count);
},
表头：cols
,cols: [[ //表头
{type:'checkbox',width:40},
{type:'numbers',title:'序号',width:60},
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
]]
表头涉及参数
多选框及序号
{type:'checkbox',width:40},
{type:'numbers',title:'序号',width:60},
字段名：field 与json数据一致
表头名称：title
表字段宽度：width
是否排序sort
表头名称位置设置：align
模板函数：templet
{field:'CREATE_TIME',title:'创建时间',width:120,sort: true,align:'center',templet : "<div>{{layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}</div>"},
实例
var option = {
elem: '#table',
url: '${base}/projectRepository/projectList.json',
request:{
pageName:'page',
limitName:'lows'
},
cellMinWidth:120,
where:{filters:('${keywords}'!=null &&'${keywords}'!='')? '{"groupOp":"AND","rules":[{"field":"title","op":"cn","data":"${keywords}"}]}':null}, //附件搜索条件
limit:30,
height: 'full-160',
page:true,
done: function(res, curr, count){
element.render('nav');
$("#count").html(res.count);
},
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field:'CREATE_TIME',title:'创建时间',width:120,align:'center',templet : "<div>{{layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}</div>"}
,{field:'ID',title:'操作',width:160,align:'center', templet: function(res){
var str = '<a class="layui-btn layui-btn-normal layui-btn-xs" href="${base}/toView.html?id='+res.ID+'">办理</a>';
return str;
}}
]]
}
请求路径返回json格式要求
- code返回的标识符，0为显示数据，1为不显示数据。
- msg提示信息，在没有数据时显示提示信息。
- count数据总数，非获取到当前页数据的总数，是数据库中符合条件的总数，数据表格分页的关键，分页介绍在下面。
- data获取的当前页数据，字段与 {field: ‘sign’, title: ‘签名’, width: 177}中field对应。
{
"code": 0,
"msg": "",
"count": 30,
"data": [{
"id": 10000,
"rank":1,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
}, {
"id": 10001,
"rank":2,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
}]
}
分页操作的实现
数据表格根据json返回的数据来处理分页。
根据json中的count值自动分配页数
如count值为4668,30条一页，分156页。
如count值为4668,90条一页，分52页。
点击其中的一页会数据表格会自动在url请求中加上page=n，再次请求获取数据。
选择多少条/页数据表格会自动在url请求中加上limit=y，再次请求获取数据。
当然也可以重新定义参数，代码修改位置上面元素说明有介绍。
request:{
pageName:'page',
limitName:'lows'
},
后台代码
最基础版，没有封装，可以自行封装。
其中ResultJsonVO对象，根据什么json格式要求写就行了。
@RequestMapping("/userList")
@ResponseBody
public ResultJsonVO projectList(String limit,String page){
List<User> userList =userService.findUserList(limit,page);
int count =userService.usercount();
return new ResultJsonVO(userlist,count);
}
搜索功能实现
通过按钮点击事件调用函数还实现搜索，更新渲染表格
//搜索按钮监听提交
var mytable = table.render(option);
form.on('submit(btn)', function(data){
//option.where.title = data.field.title;
/*更新渲染表格*/
mytable.reload(option);
});
格式化数据
格式化时间
{field:'CREATE_TIME',title:'创建时间',width:120,align:'center',templet : "<div>{{layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}</div>"},
function formatterDate(res) {
if (res.SEND_BELOW_TIME) {
var date = new Date(res.SEND_BELOW_TIME);
return date.format("yyyy-MM-dd HH:mm:ss");
} else {
return "--";
}
}
格式化数据
通过后台传过来的Map集合数据字典格式化数据
{field:'INDUSTRY',title:'所属行业',width:100,align:'center',templet : industryFu},
//格式化所属行业字段
function industryFu(res) {
var revalue = "-";
<c:forEach items="${industryMap}" var="entry">
if ("${entry.key}" == res.INDUSTRY) {
revalue = "${entry.value}";
}
</c:forEach>
return revalue;
}
添加操作功能
函数中res可以获取表格中所有字段信息
{field:'ID',title:'操作',width:160,align:'center', templet: function(res){
var str = '<a class="layui-btn layui-btn-normal layui-btn-xs" href="${base}/toView.html?id='+res.ID+'">办理</a>';
return str;
}}
效果
点击事件异步请求数据
mytable.reload({
where: { //设定异步数据接口的额外参数，任意设
activityName:data.value
},
page: {
curr: 1 //重新从第 1 页开始
}
});
方法型加按钮
{field:'operation', title:'操作', width:100,align:'center', templet:operation1}
function operation1(val,row){
var html="";
html = '<a class="f-bg-66cc66" lay-event="task">办理</a>';
return html;
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
