Layui使用中遇到的问题
1、使用数据表格遇到的问题：
我这边是后台需要三个参数：
这里的 Bill是个对象，原本这里我加有 @RequestBody 注解的，如下：
但是这会需要前端传回的是JSON字符串格式，即在layui的数据表格中需要声明contentType为 application/json
如果没添加contentType为 application/json会报错：
org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing:
而当你加上这个contentType:'application/json'，
由于我这里开启了layui的page：
所以这会导致一个问题：在请求时，它会把分页的两个参数，page和limit也塞到JSON中，那么Spring就无法成功地把请求参数映射到我的Bill对象，所以就会导致报错：
Access to XMLHttpRequest at 'http://localhost:8086/api/bill/list' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决方法就是，不用@RequestBody，像我最上面那样，这样传递的就是JSON对象了，Spring就能从中找到自己需要的对象参数进行对象封装，就能正确的进行请求了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>账单列表</title>
<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>
<br/>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">账单列表</a></li>
<li class="layui-nav-item"><a href="">账户</a></li>
<li class="layui-nav-item"><a href="">退出</a></li>
</ul>
<br/><br/>
<form id="form" class="layui-form layui-card-body" >
<input type="hidden" name="page" id="page" value="1"/>
<input type="hidden" name="limit" id="limit" value="10"/>
<div class="layui-inline">
<label class="layui-form-label">类型：</label>
<div class="layui-input-block">
<select id="typeId" lay-verify="required">
<option value="" selected>全部</option>
<option value="1">收入</option>
<option value="2">支出</option>
<option value="3">借入</option>
<option value="4">借出</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" for="date1">开始时间：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="date1" name="data1" placeholder="请输入起始时间">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" for="date2">结束时间：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="date2" name="data2" placeholder="请输入结束时间">
</div>
</div>
<div class="layui-inline">
<div class="layui-upload-button">
<button type="button" class="layui-btn layui-btn-normal" id="findByCondition">查询</button>
<button type="reset" class="layui-btn layui-btn-normal">重置</button>
<button type="button" class="layui-btn layui-btn-normal" id="add">添加</button>
</div>
</div>
</form>
<div class="with:80%">
<div class="layui-inline" style="left:50px">
<table id="demo" lay-filter="billList" class="layui-table"></table>
</div>
</div>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-1.10.2.min.js"></script>
<script type="text/html" id="userBar">
<div class="layui-btn-container">
<!-- <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>-->
<!-- <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="changeStu">删除</button>-->
<button type="button" class="layui-btn layui-btn-sm" lay-event="update">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">
<i class="layui-icon"></i>
</button>
</div>
</script>
<script>
$(function () {
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#date1' //指定元素
});
laydate.render({
elem: '#date2' //指定元素
});
});
//Demo
layui.use('form', function () {
});
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
});
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
id:'table',
// width: 1200,
url: 'http://localhost:8086/api/bill/list', //数据接口
page: true, //开启分页
// where:{"typeId":typeId,"date1":date1,"date2":date2},
// method:'post',
// contentType: 'application/json',
cols: [[ //表头
{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
, {field: 'title', title: '标题', width: 200}
, {field: 'billTime', title: '时间', width: 200, sort: true, templet:'<div>{{ layui.util.toDateString(d.billTime, "yyyy-MM-dd") }}</div>'}
, {field: 'price', title: '金额', width: 100,sort: true}
, {field: 'typeId', title: '类别', width: 200}
, {field: 'explain', title: '说明', width: 280}
, {field: 'action', title: '操作', width: 140, align:'center',toolbar:'#userBar'}
]]
});
table.on('tool(billList)',function (obj) {
let data = obj.data;
switch(obj.event){
case 'update':
layer.msg('修改');
window.location.href="update.html?id="+data.id;//跳修改页面，并且传递当前行的id，供后台查询
break;
case 'delete':
layer.confirm('确认删除? 此操作不可逆',{btn: ['确定', '取消'],title:"提示",icon: 2}, function(){
layer.closeAll("dialog");
var windowId = layer.load();
$.get('http://localhost:8086/api/bill/delete/'+data.id,function (result) {
layer.close(windowId);
if (result == 1){
layer.msg("删除成功！")
var table = layui.table;
table.reload('table');
};
});
})
break;
}
});
});
$("#findByCondition").click(function () {
var table = layui.table;
var typeId = $("#typeId").val()
var date1 = $("#date1").val()
var date2 = $("#date2").val()
table.reload('table',{ // 这里之所以是 table，而不是上边的 demo 是因为，在上边table.render时给了一个id为table
where: {'typeId':typeId,'date1':date1,'date2':date2},
method:'post'
});
return false;
})
$("#add").click(function () {
layer.msg('添加');
window.location.href="add.html";//跳添加页面
return false;
})
})
</script>
</body>
</html>
2、时间格式转换
使用自定义模板和工具集中的时间工具：
**
**
**
**
注意的是，需要用d来访问对应的数据：
**
**
比如：我这里就是：
{field: 'billTime', title: '时间', width: 200, sort: true, templet:'<div>{{ layui.util.toDateString(d.billTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
在其他地方使用的话，可以如下：
layui.use('util', function () {
var util = layui.util;
$.get(originUrl + '/toUpdate/' + id, function (result) {
$("#id").val(result.id);
var typeId = result.typeId;
for (let i = 0; i < options.length; i++) {
option = options[i];
if ($(option).val() == typeId) {
$(option).prop("selected",true);
$(".layui-select-title input").val($(option).html())
}
}
$("#title").val(result.title);
// 重点是这一行
var billTime = util.toDateString(result.billTime, "yyyy-MM-dd");
$("#billTime").val(billTime);
$("#price").val(result.price);
$("#explain").val(result.explain);
})
})
3、跳转页面时带参数
window.location.href="update.html?id="+data.id;//跳修改页面，并且传递当前行的id，供后台查询
这样在update.html页面，通过：
window.location.href // http://localhost:8080/templates/update.html?id=1
就能获取到带有id值的url
然后进行正则提取：
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg); // Location{ancestorOrigins: DOMStringList, href: "http://localhost:8080/templates/update.html?id=1", origin: "http://localhost:8080", protocol: "http:", host: "localhost:8080", …}
if (r != null) {
return decodeURIComponent(r[2]);
};
return null;
};
var id = getQueryString("id");
就能拿到传递过来的id值了，这样就可以进行后续的填充数据了（因为我这里是修改，所以要能看到原数据最好）
4、form表单的一个问题
我的form表单中的有个保存的button，我给他绑定了点击监听事件，用$.get提交，想用弹出层给页面提示效果，然后跳转页面，但是弹出层并不生效，而且会刷新一次这个页面，经过观察，是提交了两次，一次是我给定的地址，而另一次却是另外的一个地址，很奇怪，然后看网上，有人说把button改为input即可，我改了之后果然正常的执行，然后跳转页面了
代码如下：
我已经把button注释了，留做对照
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改账单</title>
<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">修改账单</li>
<li class="layui-nav-item"><a href="">返回</a></li>
</ul>
<br/><br/>
<form class="layui-form layui-card-body" action="">
<input type="hidden" name="id" id="id"/>
<div class="layui-form-item">
<label class="layui-form-label">类型：</label>
<div class="layui-input-block">
<select id="typeId" name="typeId" lay-verify="required">
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" id="title" required lay-verify="required" placeholder="标题"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="billTime">日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="billTime" name="billTime" placeholder="日期">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">金额</label>
<div class="layui-input-block">
<input type="text" name="price" id="price" required lay-verify="required" placeholder="金额"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" name="explain" id="explain" required placeholder="说明" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<!-- <button class="layui-btn" id="update">修改</button>-->
<input class="layui-btn" type="button" id="update" value="修改">
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-1.10.2.min.js"></script>
<script>
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg); // Location{ancestorOrigins: DOMStringList, href: "http://localhost:8080/templates/update.html?id=1", origin: "http://localhost:8080", protocol: "http:", host: "localhost:8080", …}
if (r != null) {
return decodeURIComponent(r[2]);
}
;
return null;
};
// console.log(window.location.href)
// var url = window.location.href // http://localhost:8080/templates/update.html?id=1
// console.log("id = " + getQueryString("id"))
var id = getQueryString("id");
var originUrl = 'http://localhost:8086/api/bill/'
// var url = 'http://localhost:8086/api/bill/toUpdate/'+id;
var types = null;
$.post(originUrl + 'types', function (result) {
console.log('types:' + result[0].name);
types = result;
})
// 回显数据
layui.use('util', function () {
var util = layui.util;
$.get(originUrl + '/toUpdate/' + id, function (result) {
// console.log('bill:' + result.title);
$("#id").val(result.id);
var typeId = result.typeId
// 填充下拉列表
for (let i = 0; i < types.length; i++) {
type = types[i];
if (type.id == typeId) {
$("#typeId").append("<option value=" + type.id + " selected>" + type.name + "</option>");
} else {
$("#typeId").append("<option value=" + type.id + ">" + type.name + "</option>");
}
}
$("#title").val(result.title);
var billTime = util.toDateString(result.billTime, "yyyy-MM-dd");
$("#billTime").val(billTime);
$("#price").val(result.price);
$("#explain").val(result.explain);
})
})
layui.use(['form', 'laydate'], function () {
// var form = layui.form;
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#billTime' //指定元素
});
});
$("#update").click(function () {
var id = $("#id").val();
var typeId = $("#typeId").val();
var title = $("#title").val();
var billTime = $("#billTime").val();
var price = $("#price").val();
var explain = $("#explain").val();
console.log(originUrl)
$.post(originUrl + 'update',
{
id: id,
typeId: typeId,
title: title,
billTime: billTime,
price: price,
explain: explain
},
function (result) {
if(result == 1){
layer.msg("修改成功！");
window.location.href = "list.html";// 跳转页面
}
})
})
</script>
</html>
然后，还有的是说使用layui的表单提交，在里面进行$.ajax请求，然后给它return false，好像也可以，但是我并不可以，提交的地址不是我传递的地址，所以后台是没有任何操作的。
还有的说是，因为jQuery的
与
l
a
y
u
i
的
与 layui的
与layui的有冲突;所以更改layui的$$即可，但是我还是一样的问题，所以我还是采用了把button变为input的解决方案
更新：
上边使用表单提交的方法不正确的原因是我没有给button lay-submit属性，然后还需要就是return false。
button的lay-submit不要忘记!
<button class="layui-btn" lay-submit lay-filter="update" id="update">修改</button>
我最开始没有写lay-submit这个属性，导致我使用layui的表单监听submit提交时，总是访问不正确的地址，然后并不执行我绑定的ajax请求。这里加上lay-submit的话，需要在表单监听submit提交中，加上return false，否则也是不能正确执行ajax的。
下面是修改后的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改账单</title>
<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">修改账单</li>
<li class="layui-nav-item"><a href="">返回</a></li>
</ul>
<br/><br/>
<form class="layui-form layui-card-body" action="">
<input type="hidden" name="id" id="id"/>
<div class="layui-form-item">
<label class="layui-form-label">类型：</label>
<div class="layui-input-block">
<select id="typeId" name="typeId" lay-verify="required">
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" id="title" required lay-verify="required" placeholder="标题"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="billTime">日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="billTime" name="billTime" placeholder="日期">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">金额</label>
<div class="layui-input-block">
<input type="text" name="price" id="price" required lay-verify="required" placeholder="金额"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" name="explain" id="explain" required placeholder="说明" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="update" id="update">修改</button>
<!-- <input class="layui-btn" type="button" id="update" value="修改">-->
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-1.10.2.min.js"></script>
<script>
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg); // Location{ancestorOrigins: DOMStringList, href: "http://localhost:8080/templates/update.html?id=1", origin: "http://localhost:8080", protocol: "http:", host: "localhost:8080", …}
if (r != null) {
return decodeURIComponent(r[2]);
}
;
return null;
};
// console.log(window.location.href)
// var url = window.location.href // http://localhost:8080/templates/update.html?id=1
// console.log("id = " + getQueryString("id"))
var id = getQueryString("id");
var originUrl = 'http://localhost:8086/api/bill/'
// var url = 'http://localhost:8086/api/bill/toUpdate/'+id;
var types = null;
$.post(originUrl + 'types', function (result) {
console.log('types:' + result[0].name);
types = result;
})
// 回显数据
layui.use('util', function () {
var util = layui.util;
$.get(originUrl + '/toUpdate/' + id, function (result) {
// console.log('bill:' + result.title);
$("#id").val(result.id);
var typeId = result.typeId
// 填充下拉列表
for (let i = 0; i < types.length; i++) {
type = types[i];
if (type.id == typeId) {
$("#typeId").append("<option value=" + type.id + " selected>" + type.name + "</option>");
} else {
$("#typeId").append("<option value=" + type.id + ">" + type.name + "</option>");
}
}
$("#title").val(result.title);
var billTime = util.toDateString(result.billTime, "yyyy-MM-dd");
$("#billTime").val(billTime);
$("#price").val(result.price);
$("#explain").val(result.explain);
})
})
layui.use(['form', 'laydate'], function () {
var form = layui.form;
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#billTime' //指定元素
});
form.on('submit(update)', function (data) {
$.post(originUrl + 'update', data.field, function (result) {
if (result == 1) {
layer.msg("修改成功！");
window.location.href = "list.html";// 跳转页面
}
})
return false;
})
});
</script>
</html>
5、一个select下拉框问题
我是动态填充select下拉列表内容，然后根据查询的账单id来确定要选中的下拉列表元素，但是，总是不能正确的展示所选中的下拉列表元素，即使使用了 prop("selected",true)也并不可以，如下：
这里总是不对应，查了很久也没有找到好的解决方法，于是自力更生吧，，
观察到，实际上是下边这个.layui-select-title内的input 控制的上边的文本内容，所以：
解决！
如果有什么好的办法，请留言告诉我，真的不想找了，，，
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改账单</title>
<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">修改账单</li>
<li class="layui-nav-item"><a href="list.html">返回</a></li>
</ul>
<br/><br/>
<form class="layui-form layui-card-body" action="">
<input type="hidden" name="id" id="id"/>
<div class="layui-form-item">
<label class="layui-form-label">类型：</label>
<div class="layui-input-block">
<select id="typeId" name="typeId" lay-verify="required" lay-filter="type" autocomplete="off">
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" id="title" required lay-verify="required" placeholder="标题"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" for="billTime">日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="billTime" name="billTime" placeholder="日期">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">金额</label>
<div class="layui-input-block">
<input type="text" name="price" id="price" required lay-verify="required" placeholder="金额"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">说明</label>
<div class="layui-input-block">
<input type="text" name="explain" id="explain" required placeholder="说明" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="update" id="update">修改</button>
<!-- <input class="layui-btn" type="button" id="update" value="修改">-->
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-1.10.2.min.js"></script>
<script>
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg); // Location{ancestorOrigins: DOMStringList, href: "http://localhost:8080/templates/update.html?id=1", origin: "http://localhost:8080", protocol: "http:", host: "localhost:8080", …}
if (r != null) {
return decodeURIComponent(r[2]);
}
;
return null;
};
// console.log(window.location.href)
// var url = window.location.href // http://localhost:8080/templates/update.html?id=1
// console.log("id = " + getQueryString("id"))
var id = getQueryString("id");
var originUrl = 'http://localhost:8086/api/bill/'
// var url = 'http://localhost:8086/api/bill/toUpdate/'+id;
// var types = null;
$.post(originUrl + 'types', function (types) {
if (types.length > 0){
// 填充下拉列表
for (let i = 0; i < types.length; i++) {
type = types[i];
$("#typeId").append("<option value=" + type.id + ">" + type.name + "</option>");
}
var options = $("#typeId option");
// 保证先获取完下拉列表再回显数据
// 回显数据
layui.use('util', function () {
var util = layui.util;
$.get(originUrl + '/toUpdate/' + id, function (result) {
// console.log('bill:' + result.title);
$("#id").val(result.id);
var typeId = result.typeId;
for (let i = 0; i < options.length; i++) {
option = options[i];
if ($(option).val() == typeId) {
$(option).prop("selected",true);
$(".layui-select-title input").val($(option).html())
}
}
$("#title").val(result.title);
var billTime = util.toDateString(result.billTime, "yyyy-MM-dd");
$("#billTime").val(billTime);
$("#price").val(result.price);
$("#explain").val(result.explain);
})
})
}
})
layui.use(['form', 'laydate'], function () {
var form = layui.form;
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#billTime' //指定元素
});
form.on('submit(update)', function (data) {
$.post(originUrl + 'update', data.field, function (result) {
if (result == 1) {
layer.msg("修改成功！");
window.location.href = "list.html";// 跳转页面
}
})
return false;
})
});
</script>
</html>
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
