使用layui弹出层，弹出tpl模板
当模板加载完毕的时候，使用ajax去请求数据，这里有两个点
2. $.ajax({ //ajax加载数据请求格式 type: 'get', // url: '/admin/articlenew/articleinfojson'+data.articleid, url: '/admin/articlenew/articleinfojson/articleid/1', dataType: 'json', success: function (res) { const data = res[0]; console.log(data); } })//这里是使用form.val进行赋值,其中articleinfo是form框的ID值 form.val("articleinfo", { "articleid": data.articleid , "articlename": data.articlename , "articlecode": data.articlecode , "keywords": data.keywords , "author": data.author , "roles": data.roles , "backupname": data.backupname , "sortid": data.sortid , "a1": data.intro , "intro": data.intro //imgflag 判断封面图片是否有无 , "imgflag": $("input[name=imgflag][value='0']").attr("checked", imgflag === 0) , "imgflag": $("input[name=imgflag][value='1']").attr("checked", imgflag !== 0) // //fullflag 判断小说更新状态，0连载，1是完结 , "fullflag": $("input[name=fullflag][value='0']").attr("checked", fullflag === 0) , "fullflag": $("input[name=fullflag][value='1']").attr("checked", fullflag === 1) , "fullflag": $("input[name=fullflag][value='2']").attr("checked", fullflag === 2) }) // sortid，判断小说分类，是个下拉选择框 $("#sortid").find("option[value=" + sortid + "]").prop("selected", true) form.render()
1. $(document).ready(function () {} //这一行的意思是，模板加载完毕，要干啥事情下面是实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>小说基础信息</title>
<meta content="webkit" name="renderer">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<link href="/static/layui/css/layui.css" rel="stylesheet">
<script src="/static/layui/layui.js"></script>
</head>
<body>
<form class="layui-form" lay-filter="articleinfo" id="articleinfo">
<!--书号-->
<div class="layui-form-item">
<label class="layui-form-label">书号：</label>
<div class="layui-input-inline">
<label>
<input id="articleid" name="articleid" class="layui-input" type="text" value="">
</label>
</div>
<!-- 书名-->
<label class="layui-form-label">书名：</label>
<div class="layui-input-inline">
<input id="articlename" name="articlename" class="layui-input" type="text" value="">
</div>
</div>
<!-- 备用书名-->
<div class="layui-form-item">
<label class="layui-form-label">备用书名：</label>
<div class="layui-input-inline">
<label>
<input id="backupname" name="backupname" class="layui-input" type="text" value="">
</label>
</div>
<!-- 拼音-->
<label class="layui-form-label">拼音：</label>
<div class="layui-input-inline">
<input class="layui-input" type="text" id="articlecode" name="articlecode" value="">
</div>
</div>
<!-- 作者-->
<div class="layui-form-item">
<label class="layui-form-label">作者：</label>
<div class="layui-input-inline">
<input class="layui-input" type="text" id="author" name="author" value="">
</div>
<!-- 角色-->
<label class="layui-form-label">主角：</label>
<div class="layui-input-inline">
<input class="layui-input" type="text" id="roles" name="roles" value="">
</div>
</div>
<!-- 关键字-->
<div class="layui-form-item">
<label class="layui-form-label">关键字：</label>
<div class="layui-input-block">
<label>
<input class="layui-input" type="text" id="keywords" name="keywords" value="">
</label>
</div>
</div>
<!-- 更新状态-->
<div class="layui-form-item">
<label class="layui-form-label">更新：</label>
<div class="layui-input-inline">
<input type="radio" name="fullflag" value="0" title="连载">
<input type="radio" name="fullflag" value="1" title="完结">
<input type="radio" name="fullflag" value="2" title="太监">
</div>
<!-- 小说分类-->
<label class="layui-form-label">分类：</label>
<div class="layui-input-inline layui-form">
<select id="sortid" lay-filter="selFilter">
<option value="0">未分类</option>
<option value="1">1玄幻</option>
<option value="2">2修真</option>
<option value="3">3都市</option>
<option value="4">4历史</option>
<option value="5">5军事</option>
<option value="6">6网游</option>
<option value="7">7科幻</option>
<option value="8">8女频</option>
<option value="9">9其他</option>
</select>
</div>
</div>
<div class="layui-form-item">
<!--封面状态-->
<label class="layui-form-label">封面：</label>
<div class="layui-input-inline" id="radio_imgflag">
<input name="imgflag" title="无，0" type="radio" value="0">
<input name="imgflag" title="有，1，9,75" type="radio" value="1">
</div>
<label class="layui-form-label">上传图片</label>
<div class="layui-input-block" id="image1">
<img alt="" id="image2" src="https://z1files.starli.top/article/img/" style="height: 120px;width: 100px">
<input id="image" name="image" type="hidden">
</div>
</div>
<!-- 小说简介-->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">简介</label>
<div class="layui-input-block">
<textarea placeholder="暂无简介" class="layui-textarea" name="intro"></textarea>
</div>
</div>
<!-- 表单提交和取消-->
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="btn-save" lay-submit>保存</button>
<button class="layui-btn" lay-filter="btn-cancel" lay-submit>取消</button>
</div>
</div>
<!-- 表单完结-->
</form>
<script>
layui.use(['form', 'layer', 'jquery','upload'], function () {
const form = layui.form, $ = layui.jquery, layer = layui.layero,upload=layui.upload;
//等加载dom文件完毕之后，去请求表格需要的数据
$(document).ready(function () {
$.ajax({
type: 'get',
// url: '/admin/articlenew/articleinfojson'+data.articleid,
url: '/admin/articlenew/articleinfojson/articleid/1',
dataType: 'json',
success: function (res) {
const data = res[0];
//radio和下拉框进行单独赋值选择
const fullflag = data.fullflag //radio
const imgflag = data.imgflag //radio
const sortid = data.sortid //下拉框
//通过form.val进行赋值
form.val("articleinfo", {
"articleid": data.articleid
, "articlename": data.articlename
, "articlecode": data.articlecode
, "keywords": data.keywords
, "author": data.author
, "roles": data.roles
, "backupname": data.backupname
, "sortid": data.sortid
, "a1": data.intro
, "intro": data.intro
//imgflag 判断封面图片是否有无
, "imgflag": $("input[name=imgflag][value='0']").attr("checked", imgflag === 0)
, "imgflag": $("input[name=imgflag][value='1']").attr("checked", imgflag !== 0)
// //fullflag 判断小说更新状态，0连载，1是完结
, "fullflag": $("input[name=fullflag][value='0']").attr("checked", fullflag === 0)
, "fullflag": $("input[name=fullflag][value='1']").attr("checked", fullflag === 1)
, "fullflag": $("input[name=fullflag][value='2']").attr("checked", fullflag === 2)
})
// sortid，判断小说分类，是个下拉选择框
$("#sortid").find("option[value=" + sortid + "]").prop("selected", true)
form.render()
},
})
}
)//表格渲染完成
//上传图片 imgflag
upload.render({
elem: '#image1',
// url: '/admin/articlenew/image/' + data.articleid, //这里加ID只是方便调试看uRL
url: '/admin/articlenew/image/articleid/1', //这里加ID只是方便调试看uRL
type: 'post',
accept: 'image',
size: 4 * 1024,
data: { //这里传个articleid是为了动态生成目录和文件名
articleid: 1,
},
done: function (res) {
if (res.code === 200) {
//弹出上传成功的提示框
layer.msg('上传成功', {
icon: 1,
})
$('#image2').attr('src', res.path)
$('#image').val(res.path)
//修改imgflag的值，修改数据库
$("input[name='imgflag']:checked").val(1);
} else {
layer.msg(res.msg, {
icon: 2
})
}
}
}); //上传图片结束
})
// "{:url('/admin/articlenew/articleinfojson')}",
// {'articleid':articleid},
// {'fullflag':fullflag},
// function(d){
// //设置是否通知
// if(d.fullflag == 0){
// $("input[name=fullflag][value='0']").prop("checked","false");
// $("input[name=fullflag][value='1']").prop("checked","true");
// }
// form.render(); //更新全部
// // }
// );
// form.render();
// form.on('submit(btn-save)', function () {
// //获取弹出页 表单数据
// var data = form.val("articleinfo");
// console.table(data)
// console.log(data.articleid)
// });
// console.log('.document.forms:返回文档的form(表单)对象')
// console.log(document.forms)
// console.log('获取具体子对象')
// console.log(document.forms[0].articleid)
// console.log('获取具体子对象的值')
// console.log(document.forms[0].articleid.value)
// console.log('获取具体子对象列表')
// console.log(document.forms[0].elements)
// $.ajax({
// type: "POST",
// url: "/admin/articlenew/updateinfo/articleid"+ data.articleid,
// data: data,
// // dataType : "json",
// // success: function(respMsg){
// // #处理函数
// // }
// });
// })
</script>
</body>
</html>