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>
layui页面操作，点击一个添加页面，跳转有确定，然后点击确定后将选择的几个数据返回前一个页面获取值，然后ajax请求后台的更多相关文章
- Laravel 5.2+ 使用url()全局函数返回前一个页面的地址
注意:文章标题中5.2+表示该文章内容可向上兼容,适用于Laravel版本5.2及更高(目前最新为5.6),但不可向下兼容,即不适用于5.2版本以下.推荐大家花一点点时间,将自己的Laravel更新至 ...
- Spring MVC中Controller如何将数据返回给页面
要实现Controller返回数据给页面,Spring MVC 提供了以下几种途径: ModelAndView:将视图和数据封装成ModelAndView对象,作为方法的返回值,数据最终会存到Http ...
- C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- JS 操作 HTML 和 AJAX 请求后台数据
为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...
- 高德地图 JS API (jsp + miniui(子页面数据返回父页面并设值) + 单个点标记 + 点标记经纬度 + 回显 + 限制地图显示范围+搜索)
-*- 父页面js function mapFocus(){ //console.log("-*-"); var longitude = mini.get("jd&qu ...
- WebForm 页面ajax 请求后台页面 方法
function ReturnOperation(InventoryID) { //入库 接口 if (confirm('你确认?')) { $.ajax({ type: "post&quo ...
- Qt中实现点击一个label，跳转到打开一个浏览器链接
配置模块 首先需要在.pro配置文件中添加QT += network 重写自定义Label .h文件 class MyClickLabel : public QLabel { Q_OBJECT pub ...
- vux 表单提交数据 返回后页面跳转
ps:仅作参考
- jquery，从后台查数据，给页面上添加树形。
前台jquery+ajax请求往页面上添加树形的js代码 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点 ...
随机推荐
- 安装早期老版本 Visual Studio
安装早期老版本 Visual Studio https://visualstudio.microsoft.com/zh-hans/vs/older-downloads/
- Python读取Excel表格
前言:需要进行自动化办公或者自动化测试的朋友,可以了解下此文,掌握Python读取Excel表格的方法. 一.准备工作: 1.安装Python3.7.0(官网下载安装包) 2.安装Pycharm(官网 ...
- 【UE4 C++ 基础知识】<9> Interface 接口
概述 简单的说,接口提供一组公共的方法,不同的对象中继承这些方法后可以有不同的具体实现. 任何使用接口的类都必须实现这些接口. 实现解耦 解决多继承的问题 蓝图使用 使用方法 三种调用方法的区别 调用 ...
- 手把手教你学Dapr - 1. .Net开发者的大时代
Dapr全称 Distributed Application Runtime,分布式应用运行时 Dapr的口号 简化云原生应用开发,聚焦在应用的核心逻辑,让代码简单.可移植 Dapr的目标 最佳实践的 ...
- 记一次 .NET 某资讯论坛 CPU爆高分析
大概有11天没发文了,真的不是因为懒,本想前几天抽空写,不知道为啥最近求助的朋友比较多,一天都能拿到2-3个求助dump,晚上回来就是一顿分析,有点意思的是大多朋友自己都分析了几遍或者公司多年的牛皮藓 ...
- 2021.8.15考试总结[NOIP模拟40]
T1 送花 线段树.枚举右端点,线段树记录左端点对应的值. 每次对当前颜色上上次出现的位置到上次出现的位置区间减,上次出现的位置到当前位置区间加. $code:$ 1 #include<bits ...
- MOSFET管驱动电路的设计
https://wenku.baidu.com/view/ae727da5caaedd3382c4d3b9.html?mark_pay_doc=2&mark_rec_page=1&ma ...
- FreeRTOS学习笔记——FreeRTOS 任务基础知识
RTOS 系统的核心就是任务管理,FreeRTOS 也不例外,而且大多数学习RTOS 系统的工程师或者学生主要就是为了使用RTOS 的多任务处理功能,初步上手RTOS 系统首先必须掌握的也是任务的创建 ...
- DMA实现采样数据的直接搬运存储
尝试了下STM32的ADC采样,并利用DMA实现采样数据的直接搬运存储,这样就不用CPU去参与操作了. 找了不少例子参考,ADC和DMA的设置了解了个大概,并直接利用开发板来做一些实验来验证相关的操作 ...
- 攻防世界 杂项 12.Training-Stegano-1
题目描述: 这是我能想到的最基础的图片隐写术.啊这 题目分析: 最初还以为直接右击属性查看呢 然后用notepad++看看,一团乱码,结果在最后发现了passwd, 然后这就是flag:stegano ...