layui页面操作，点击一个添加页面，跳转有确定，然后点击确定后将选择的几个数据返回前一个页面获取值，然后ajax请求后台...

于 2019-05-24 10:05:00 发布
阅读量2.1k 收藏 1
点赞数 1
文章标签： javascript 前端 json ViewUI
原文链接：http://www.cnblogs.com/q1359720840/p/10916372.html
版权

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>

　　

 

转载于:https://www.cnblogs.com/q1359720840/p/10916372.html

aeteoi5717
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值