layui页面操作,点击一个添加页面,跳转有确定,然后点击确定后将选择的几个数据返回前一个页面获取值,然后ajax请求后台
custUserIndex.html [添加页面代码]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>受试者</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"> </head> <body> <div class="layui-fluid"> <div class="layui-card"> <div class="layui-form layui-card-header layuiadmin-card-header-auto"> <div class="layui-form-item"> <!-- <div class="layui-inline"> <label class="layui-form-label">编号</label> <div class="layui-input-block"> <input type="text" name="id" placeholder="请输入编号" autocomplete="off" class="layui-input"> </div> </div>--> <!-- <div class="layui-inline"> <label class="layui-form-label">问卷编号</label> <div class="layui-input-block"> <input type="text" name="qnId" placeholder="请输入问卷编号" autocomplete="off" class="layui-input"> </div> </div>--> <!-- <div class="layui-inline"> <label class="layui-form-label">用户编号</label> <div class="layui-input-block"> <input type="text" name="userId" placeholder="请输入用户编号" autocomplete="off" class="layui-input"> </div> </div>--> <div class="layui-inline"> <label class="layui-form-label">用户邮箱</label> <div class="layui-input-block"> <input type="text" name="emain" placeholder="请输入用户邮箱" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">完成时间</label> <div class="layui-input-block"> <input type="text" id="completeDate" name="completeDate" placeholder="请输入完成时间" autocomplete="off" class="layui-input"> </div> </div> <!-- <div class="layui-form-item"> <label class="layui-form-label">有效期始</label> <div class="layui-input-inline"> <input type="text" name="validateStart" id="validateStart" lay-verify="required" placeholder="请输入有效期始" autocomplete="off" class="layui-input layer-date start"> </div>--> <!-- <div class="layui-inline"> <label class="layui-form-label">排序</label> <div class="layui-input-block"> <input type="number" name="sort" placeholder="请输入排序" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">备注</label> <div class="layui-input-block"> <input type="text" name="remark" placeholder="请输入备注" autocomplete="off" class="layui-input"> </div> </div> --> <div class="layui-inline"> <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="manager_search"> <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> </button> </div> </div> </div> <div class="layui-card-body"> <div style="padding-bottom: 10px;"> <!--更改为批量上传,先选择问卷,然后添加然后上传--> <button class="layui-btn layuiadmin-btn-admin" data-type="add">批量上传</button> </div> <table id="table_manage" lay-filter="table_manage"></table> <script type="text/html" id="table_operate_html"> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="openKS"><i class="layui-icon layui-icon-edit"></i>开始考试</a> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="openKS"><i class="layui-icon layui-icon-edit"></i>生成报告</a> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="openKS"><i class="layui-icon layui-icon-edit"></i>查看报告</a> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a> </script> </div> </div> </div> <script src="/layuiadmin/layui/layui.js"></script> <script> layui.config({ base: '/layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index','laydate', 'table'], function(){ var $ = layui.$ ,form = layui.form ,table = layui.table; var laydate = layui.laydate;//实例化引用 laydate.render({//构造 elem: '#completeDate' //指定元素 ,type: 'datetime',//时间类型 min: '1900-1-1 00:00:00',//开始 max: '2099-6-16 23:59:59',//结束 trigger: 'click' //采用click弹出 ,theme: '#393D49'//自定义颜色 ,calendar: true,//公历 }); table.render({ elem: "#table_manage", url: "/custUser/list", page: true, autoSort:false, response:{statusCode:200}, initSort:{ field: 'id' ,type: 'desc' },done:function(res,curr,count){ // 隐藏列 $(".layui-table-box").find("[data-field='id']").css("display","none"); }, cols: [ [ {field: "id",title: "编号",sort: !0}, {field: "qnId",title: "问卷名称",width: "20%",sort: !0}, {field: "userId",title: "用户名",width: "20%",sort: !0}, {field: "emain",title: "用户邮箱",width: "10%",sort: !0}, {field: "completeDate",title: "完成时间",width: "10%",sort: !0}, {title: "操作",width: "40%",align: "center",fixed: "right",toolbar: "#table_operate_html"} ]], text: "对不起,加载出现异常!" }), table.on("sort(table_manage)", function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" //尽管我们的 table 自带排序功能,但并没有请求服务端。 //有些时候,你可能需要根据当前排序的字段,重新向服务端发送请求,从而实现服务端排序,如: console.log(obj); table.reload("table_manage", { initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数 ,where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式) field: obj.field //排序字段 ,order: obj.type //排序方式 } }); }); table.on("tool(table_manage)", function(e) { e.data; if ("del" === e.event){ layer.confirm("确定删除此受试者?", function(t) { $.ajax({ type: "post", url: "/custUser/delete?id="+e.data.id, success: function (result) { console.log(result); table.reload('table_manage'); //数据刷新 layer.close(t); //关闭弹层 } }); }); } //考试,生成报告,。 if ("openKS" === e.event){ layer.msg('正在完善中,请稍等..'); } else if ("edit" === e.event) { console.log($(e.tr)); layer.open({ type: 2, title: "编辑受试者", content: "/custUser/prepareUpdate?id="+e.data.id, area: ["710px", "450px"], btn: ["确定", "取消"], yes: function(e, t) { var l = window["layui-layer-iframe" + e], r = "manager_submit", n = t.find("iframe").contents().find("#" + r); l.layui.form.on("submit(" + r + ")", function(t) { t.field; console.log(t.field); $.ajax({ type: "post", url: "/custUser/update", data:t.field, success: function (result) { console.log(result); table.reload('table_manage'); //数据刷新 layer.close(e); //关闭弹层 } }); }), n.trigger("click") }, success: function(e, t) {} }) } }) //监听搜索 form.on('submit(manager_search)', function(data){ var field = data.field; //执行重载 table.reload('table_manage', { where: field }); }); //事件 var active = { batchdel: function(){ var checkStatus = table.checkStatus('table_manage') ,checkData = checkStatus.data; //得到选中的数据 if(checkData.length === 0){ return layer.msg('请选择数据'); } layer.prompt({ formType: 1 ,title: '敏感操作,请验证口令' }, function(value, index){ layer.close(index); layer.confirm('确定删除吗?', function(index) { //执行 Ajax 后重载 /* admin.req({ url: 'xxx' //,…… }); */ table.reload('table_manage'); layer.msg('已删除'); }); }); }, //添加受试者 /* */ /* layer.open({ type: 2 ,title: '添加试卷' ,content: '/custQuestionnaire/choose', area: ["1510px", "610px"] ,btn: ['确定', '取消'] ,yes: function(index, layero){ var iframeWindow = window['layui-layer-iframe'+ index] ,submitID = 'manager_submit' ,submit = layero.find('iframe').contents().find('#'+ submitID); //监听提交 iframeWindow.layui.form.on('submit('+ submitID +')', function(data){ var field = data.field; //获取提交的字段 console.log(field); //提交 Ajax 成功后,静态更新表格中的数据 $.ajax({ type: "post", url: "/custUser/insert", data:field, success: function (result) { console.log(result); table.reload('table_manage'); //数据刷新 layer.close(index); //关闭弹层 } }); }); submit.trigger('click'); } }); */ add: function(){ var ide= layer.open({ type: 2, title: "添加试卷", content: "/custQuestionnaire/choose", area: ["1300px", "450px"], btn: ["确定", "取消"], shadeClose:true,//点击阴影处关闭窗口。 yes: function(index, layero) { var iframeWindow = window['layui-layer-iframe'+ index] ,submitID = 'btn2_choose' ,submit = layero.find('iframe').contents().find('#'+ submitID); var selected = layero.find("iframe")[0].contentWindow.getSelected(); console.log(selected); //将用户id和授权文档进行绑定 /* $.ajax({ cache:false, type:"post", data:{"CompanyData":JSON.stringify(selected),"id":e.data.id} , url:"/custUser/inserts", async:true, traditional:true, success:function (res) { if(res.code=='200'){ if(res.msg=="-1"){ layer.msg("授权成功"); //关闭当前窗口 layer.close(ide); //刷新当前页面.. //location.reload(); }else{ layer.msg(res.msg); //关闭当前窗口 layer.close(ide); } } }, error:function(res){ alert(res.msg) } })*/ }, success: function(e, t) {} }) } } $('.layui-btn.layuiadmin-btn-admin').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script> </body> </html>
被请求页面代码:custQuestionnaireChoose.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>授权问卷</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"> </head> <body> <div class="layui-fluid"> <div class="layui-card"> <div class="layui-form layui-card-header layuiadmin-card-header-auto"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">名称</label> <div class="layui-input-block"> <input type="text" name="title" placeholder="请输入名称" autocomplete="off" class="layui-input"> </div> </div> <!--修改--> <div class="layui-inline"> <label class="layui-form-label">问卷类型</label> <div class="layui-input-block"> <select name="type" lay-verify=""> <option value="">请输入</option> <option value="dist">dist</option> <option value="360">360</option> </select> </div> </div> <div class="layui-inline"> <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="manager_search"> <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> </button> </div> </div> </div> <div class="layui-card-body"> <div style="padding-bottom: 10px;"> <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button> </div> <table id="table_manage" lay-filter="table_manage"></table> <div style="display:none;"> <button id="btn2_choose" class="layui-btn layuiadmin-btn-admin" data-type="choose">选择</button> </div> </div> </div> </div> <script src="/layuiadmin/layui/layui.js"></script> <script> var checkData=[]; layui.config({ base: '/layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index', 'table'], function(){ var $ = layui.$ ,form = layui.form ,table = layui.table; table.render({ elem: "#table_manage", url: "/custQuestionnaire/list", page: true, autoSort:false, response:{statusCode:200}, initSort:{ field: 'id' ,type: 'desc' },done:function(res,curr,count){ // 隐藏列 $(".layui-table-box").find("[data-field='id']").css("display","none"); }, cols: [ [ {type:'checkbox'}, {field: "id",title: "编号",sort: !0}, {field: "title",title: "名称",width:"15%",sort: !0}, {field: "type",title: "问卷类型",width:"10%",sort: !0, templet: function(d){ if (d.type=="dist") { // 自定义内容 return "dist"; } else if (d.type=="360") { return "360"; } else { return "其他"; } } }, {field: "start",title: "导语",width:"15%",sort: !0}, {field: "end",title: "结束语",width:"15%",sort: !0}, {field: "report",title: "报告语",width:"15%",sort: !0}, {title: "操作",width:"30%",align: "center",fixed: "right",toolbar: "#table_operate_html"} ]], text: "对不起,加载出现异常!" }), table.on("sort(table_manage)", function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" //尽管我们的 table 自带排序功能,但并没有请求服务端。 //有些时候,你可能需要根据当前排序的字段,重新向服务端发送请求,从而实现服务端排序,如: console.log(obj); table.reload("table_manage", { initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数 ,where: { //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式) field: obj.field //排序字段 ,order: obj.type //排序方式 } }); }); table.on("tool(table_manage)", function(e) { e.data; if ("del" === e.event){ layer.confirm("确定删除此授权问卷?", function(t) { $.ajax({ type: "post", url: "/custQuestionnaire/delete?id="+e.data.id, success: function (result) { console.log(result); table.reload('table_manage'); //数据刷新 layer.close(t); //关闭弹层 } }); }); } }) //监听搜索 form.on('submit(manager_search)', function(data){ var field = data.field; //执行重载 table.reload('table_manage', { where: field }); }); //事件 var active = { choose: function(){ var checkStatus = table.checkStatus('table_manage'); checkData = checkStatus.data; //得到选中的数据 if(checkData.length === 0){ return layer.msg('请选择数据'); } return checkData; } } $('.layui-btn.layuiadmin-btn-admin').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script> </body> </html> <script src="/jquery/jquery-3.3.1.js"></script> <script> var getSelected = function () { $("#btn2_choose").click(); var selected = checkData; return selected; } </script>
---------------------------------------------------------------------------
国之殇,未敢忘!
南京大屠杀!
731部队!
以及核污染水排海等一系列全无人性的操作,购买他们的食品和为它们提供帮助只会更加变本加厉的害你,呼吁大家不要购买日本相关产品
昭昭前事,惕惕后人
吾辈当自强,方使国不受他人之侮!
---------------------------------------------------------------------------
作者:三号小玩家
出处:https://www.cnblogs.com/q1359720840/
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。 版权信息