使用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>