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>