一、layui的导入
下载layui包
https://www.layui.com/在页面中导入layui.js和layui.css,顺便导入jQuery包
二、layui的使用
1. layui的json数据格式：
{
"code":0, //数据状态的字段名称，默认：code
"msg":"", //状态信息的字段名称，默认：msg
"count":1000, //数据总数的字段名称，默认：count
"data":[ //数据列表的字段名称，默认：data
{
"id":1,
"username":"user-0",
"sex":"女",
"city":"城市-0",
"sign":"签名-0",
"experience":255,
"logins":24,
"wealth":82830700,
"classify":"作家",
"score":57
},
{
"id":2,
"username":"user-0",
"sex":"女",
"city":"城市-0",
"sign":"签名-0",
"experience":255,
"logins":24,
"wealth":82830700,
"classify":"作家",
"score":57
}
]
}
根据格式创建实体类：
public class DataGirdModel {
private Integer code=0;
private Integer count;
private List data;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public List getData() {
return data;
}
public void setData(List data) {
this.data = data;
}
}
2. 自定义返回的数据格式
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'new2.json'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,page:true //显示分页默认不显示
,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: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
,{field:'experience', title: '积分', sort: true}
,{field:'score', title: '评分', sort: true}
,{field:'classify', title: '职业'}
,{field:'wealth', width:137, title: '财富', sort: true}
]]
//用于对分页请求的参数：page、limit重新设定名称，如：
,request:{
pageName: 'curr' //页码的参数名称，默认：page
,limitName: 'nums' //每页数据量的参数名，默认：limit
}
//用于对返回的数据格式的自定义，如：
,response: {
statusName: 'status' //数据状态的字段名称，默认：code
,statusCode: 0 //成功的状态码，默认：0
,msgName: 'hint' //状态信息的字段名称，默认：msg
,countName: 'total' //数据总数的字段名称，默认：count
,dataName: 'rows' //数据列表的字段名称，默认：data
}
});
});
自定义后返回的数据格式：
{
"status":0,
"hint":"",
"total":1000,
"rows":[
{
"id":1,
"username":"user-0",
"sex":"女",
"city":"城市-0",
"sign":"签名-0",
"experience":255,
"logins":24,
"wealth":82830700,
"classify":"作家",
"score":57
},
{
"id":2,
"username":"user-0",
"sex":"女",
"city":"城市-0",
"sign":"签名-0",
"experience":255,
"logins":24,
"wealth":82830700,
"classify":"作家",
"score":57
}
]
}
3. 稍微难点的案例
提醒：记住导入layui.js
layui案例
难点在这：
批次查询
过滤后列表
列表页面主要代码：
弹出层页面主要代码：
#foreach($d in $dibbAllList)
#set($foo = $velocityCount%4)
#if($foo == 1)
#end
${d.bartonname}[ $!date.format('yyyy-MM-dd ',$!d.dibinputdate),"$!d.storagequantity"个]
#end
这里需要注意的是表格重载后需要重新加载table.on(),否则表格中的toolbar控件无法使用。