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请求,查询出子节点 ...
随机推荐
- 某个buuctf的题(easy_tornado)
题目:http://88099f53-12b6-470a-9993-b73e4155940e.node3.buuoj.cn/ 1首先看三个文件的内容 2简单分析 如果出题人没整一些花里胡哨的,那么fl ...
- 2020.4.6--UCF Local Programming Contest 2017的正式赛
Problem A : Electric Bill 题目大意:进行电量分级制收费,1000kwh及以下一档收费,1000kwh以上按另一档收费,给出每个人的电量总额,问每人应支付多少钱. 思路:基础i ...
- Go语言核心36讲(Go语言基础知识六)--学习笔记
06 | 程序实体的那些事儿 (下) 在上一篇文章,我们一直都在围绕着可重名变量,也就是不同代码块中的重名变量,进行了讨论.还记得吗? 最后我强调,如果可重名变量的类型不同,那么就需要引起我们的特别关 ...
- k8s 关于Job与Cronjob
在Kubernetes 中通过创建工作负载资源 Job 可完成大型计算以及一些批处理任务.比如 Job 转码文件.获取部分文件和目录,机器学习中的训练任务等.这篇小作文我们一起来了解 k8s 中关于 ...
- Less-(38~41) 堆叠注入
首先申明,Less-(38~41)可以采取和Less-(1~4)相同的解法:(一一对应) 然而,他们的漏洞其实更大,我们可以做更多具有破坏性的事情. 代码审计: Less-(38~41): 41的$s ...
- Java继承中父类和子类构造函数的问题
父类有无参构造函数时(显示或隐式),子类的有参和无参构造函数都是默认调用父类的无参构造函数:当父类只有有参构造函数时,子类可以有有参和无参构造函数,子类有参构造函数必须显式调用父类的有参构造函数,子类 ...
- leetcode 6/300 Z字型变换 py
目录 题目说明 方法一:利用flag 题目说明 方法一:利用flag 简单来说就是利用flag来表示方向,真的神来之笔. class Solution: def convert(self, s: st ...
- Noip模拟50 2021.9.10
已经好长时间没有考试不挂分的良好体验了... T1 第零题 开场数据结构,真爽 对于这道题首先要理解对于一条链从上向下和从下向上走复活次数相等 (这可能需要晚上躺在被窝里面脑摸几种情况的样例) 然后就 ...
- Noip模拟32(再度翻车) 2021.8.7
T1 Smooth 很水的一道题...可是最傻 的是考场上居然没有想到用优先队列优化... 上来开题看到这个,最一开始想,这题能用模拟短除法,再一想太慢了,就想着优化 偏偏想到线性筛然后试别的素 ...
- VS2019、Qt5.12及QGis3.16开发常见问题汇总
在C++.Qt软件开发过程中,常常遇到一些编译错误或警告:本文将VS2019.Qt5.12.10和QGis3.16.10的二次开发过程常见的问题做了整理,供大家参考,也便于日后查阅.该内容分为四部分: ...