一、layui的导入
下载layui包
https://www.layui.com/在页面中导入layui.js和layui.css,顺便导入jQuery包
<script type="text/javascript" src="js/jquery-2.1.4.js" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
二、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<T> {
private Integer code=0;
private Integer count;
private List<T> 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<T> getData() {
return data;
}
public void setData(List<T> 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案例
难点在这：
批次查询
过滤后列表
列表页面主要代码：
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" id="queryForm">
<div class="layui-form-item">
<div class="layui-col-md11">
<label class="layui-form-label" style="width: auto">模糊查询</label>
<div class="layui-input-inline">
<input style="width: 250px" type="text" name="key" id="key" class="layui-input" placeholder="请输入菌房从、菌房到或菌桶">
</div>
<div class="layui-inline" style="margin-left: 50px">
<label class="layui-form-label" style="width: auto">业务日期：从</label>
<div class="layui-input-inline" style="width: 130px;">
<input type="text" name="createTime1" id="createTime1" class="layui-input" autocomplete="off">
</div>
<div class="layui-form-mid">至</div>
<div class="layui-input-inline" style="width: 130px;">
<input id="dataa" name="dibbleid" type="text" class="layui-input" lay-filter="dataa" style="display: none"></input>
<input type="text" name="createTime2" id="createTime2" class="layui-input" autocomplete="off">
</div>
<div class="layui-input-inline" style="width:150px" >
<select lay-filter="biztype" name="biztype" id="biztype" lay-verify="type" lay-search="" class="layui-input" >
<option value="">业务类型</option>
#foreach($item in $bizlist)
<option value="$!item.operstandtype">$!item.operstandname</option>
#end
</select>
</div>
</div>
<div class="layui-btn-group">
<button type="button" lay-submit class="layui-btn" lay-filter="sub" lay-submit="" id="queryPage" >查询</button>
<button type="button" class="layui-btn" id="dibbDetail"><i class="layui-icon"></i>查询批次</button>
</div>
</div>
</div>
</form>
<div class="contain-img-table"><table id="dataTable" lay-filter="dataTable"></table></div>
<script type="text/html" id="barDemo">
<a id="detai" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
</div>
</div>
<script>
layui.use(['laydate', 'table', 'layer', 'form','jquery'], function () {
var laydate = layui.laydate, table = layui.table, layer = layui.layer, form = layui.form,$= layui.jquery;
form.render();
//日期
laydate.render({
elem: '#createTime1',
type: 'date'
});
laydate.render({
elem: '#createTime2',
type: 'date'
});
laydate.render({
elem: '#createTimeRange',
type: 'datetime',
range: true
});
/* form.on('select(biztype)', function (data) {
var biztype=$("#biztype").val();
alert(biztype);
});*/
var dataa=$("dataa").val();
/*//监听提交
form.on('submit(sub)', function(data){
alert(111)
});*/
var dataTable = table.render({
elem: '#dataTable',
height: calcTablePos('#dataTable'),
url: '/traceMushrootDibgrow/pageData', //数据接口
page: true, //开启分页
cols: [[ //表头
{field: 'bizdate', align: 'center',width : 120, title: '业务日期',templet: function (d) {
//window.alert(d.bizdate);
return d.bizdate.toString().substr(0,10);
}},
{field: 'bartonnamefrom', align: 'center',width : 120, title: '菌房从'},
{field: 'bartonnameto', align: 'center',width : 120, title: '菌房到'},
{field: 'dibblename', align: 'center', width : 80,title: '菌桶'},
{field: 'dayage', align: 'center',width : 80, title: '日龄'},
{field: 'bizname', align: 'center', width : 100,title: '操作类型'},
{field: 'nownumfrom', align: 'center',width : 120, title: '变动前库存'},
{field: 'nownumto', align: 'center',width : 120, title: '变动后库存'},
{field: 'cznr', align: 'center', title: '操作内容',templet: function (d) {
if(d.bizname==='初始'){
return d.bizname+'至'+d.bartonnameto;
}else if(d.bizname==='销售'){
return d.bizname+d.num+'个至'+d.marketsupercode+',金额为'+d.amount+'元';
}else if(d.bizname==='采收'){
return d.bizname+d.dibblename+d.quantity+'个';
}else if(d.bizname==='回收'){
return d.bizname+d.dibblename+d.quantity+'个';
}else{
return d.bizname+d.dibblename+d.num+'个';
}
}},
{title: '操作', align: 'center',width : 100, toolbar:'#barDemo'}
]]
});
window.reloadTable = function() {
var fields = {};
$.each($('#queryForm').serializeArray(), function(i, field){
fields[field.name] = field.value;
});
dataTable.reload({
where: fields
});
$("#detai").click(tableOn())
}
window.tableOn = function(){
table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'edit'){ //编辑
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
$.ajax({
url: '/traceMushrootDibgrow/delete',
data: {id: data.id},
async: false,
success: function (data, status, xhr) {
if (data.success) {
layer.close(index);
}
reloadTable();
}
});
});
} else if(layEvent === 'detail'){ //查看
$.ajax({
url: '/traceMushrootDibgrow/detailPage',
data: {id: data.id},
async: false,
success: function (data, status, xhr) {
//window.alert(data);
layer.open({
type: 1,
title: '查看-菌桶生长轨迹展示',
area:['800px', '600px'],
content: data //注意，如果str是object，那么需要字符拼接。
});
}
});
//同步更新缓存对应的值
// obj.update({username: '123',title: 'xxx'});
}
});
}
$('#queryPage').click(reloadTable);
tableOn(); //条件查询、表格重载数据后，需要再次渲染table中的tool控件元素，不然里面的toolbar无法使用
//查询批次
$('#dibbDetail').click(function () {
$.ajax({
url: '/traceMushrootDibgrow/dibbDetail',
async: false,
success: function (data, status, xhr) {
layer.open({
type: 1,
title: '查询-请选择菌桶批次',
area:['800px', '400px'],
content: data //注意，如果str是object，那么需要字符拼接。
});
}
});
});
});
</script>
弹出层页面主要代码：
<table class="layui-table" >
<thead>
<tr >
#foreach($d in $dibbAllList)
#set($foo = $velocityCount%4)
#if($foo == 1)
<tr>
#end
<td ><a href="javascript:void(0)" id="dibb" onclick="return dibb('${d.id}')">${d.bartonname}[ $!date.format('yyyy-MM-dd ',$!d.dibinputdate),"$!d.storagequantity"个]</a></td>
#end
</tr>
</thead>
</table>
<script>
function dibb(dibbleid){
//改变父页面dataa元素的值
parent.$("#dataa").val(dibbleid)
//父页面查询
parent.$("#queryPage").click();
layer.closeAll();
//清空父页面dataa元素的值，不然上面赋予的过滤条件会一直存在，无法正常的全查询
parent.$("#dataa").val("");
}
</script>
这里需要注意的是表格重载后需要重新加载table.on(),否则表格中的toolbar控件无法使用。
