Layui + TP 实现点击添加input表格，添加与赋值

index视图

{extend name="layout/common" /}

{block name="title"}人员管理{/block}
<!--<link href="https://kodo.79524795.vip/jquery/normalize.css" rel="stylesheet">-->
<!--<link href="https://kodo.79524795.vip/jquery/default.css" rel="stylesheet">-->
<!--<link href="https://kodo.79524795.vip/jquery/swipebox.css" rel="stylesheet">-->
<!--<script src="https://kodo.79524795.vip/jquery/ios-orientationchange-fix.js" charset="utf-8"></script>-->
<!--<script src="https://kodo.79524795.vip/jquery/jquery.min.js" charset="utf-8"></script>-->
<!--<script src="https://kodo.79524795.vip/jquery/jquery.swipebox.js" charset="utf-8"></script>-->

{block name="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>
		</div>

		<div class="layui-card-body">
			<div style="padding-bottom: 10px;">
				<!-- <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button> -->
				<button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
				<br/>  
			
				搜索课程：
				<div class="layui-inline">
					<input class="layui-input" name="name" id="demoReload" autocomplete="off">
				</div>

				<button class="layui-btn layuiadmin-btn-useradmin" data-type="reload">搜索</button>
			</div>

      <table id="demo" lay-filter="test"></table>
    
 

      <script type="text/html" id="status-tpl">
                	<img src="{{ d.feng }}" style="height:30px;" />
	  </script>
			
			
			<script type="text/html" id="table-useradmin-webuser">
			<!--	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="info">详细</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>

{/block}

{block name="js"}



<script src="__layuiadmin__/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'layer','laydate'], function(){
		var $ = layui.$
		,laydate = layui.laydate;

		  //日期
	  laydate.render({
	    elem: '#demoReload4'
	  });

	var table = layui.table;   
        table.render({
            elem: '#demo'
            ,url: "{:url('Testpro/table')}"//数据接口
            ,page: true //开启分页
            ,cols: [[ 
            {field: 'id', title: 'id', width:80, sort: true, fixed: 'left'}
            ,{field: 'name', title: '试卷名称',align: 'center', minWidth:100}
       
            // ,{field: 'name', title: '名称',align: 'center', minWidth:100}
            
            // ,{field: 'introduce', title: '介绍',align: 'center', minWidth:120}
            
            //  ,{field: 'feng', title: '封面',align: 'center', minWidth:150,templet: '#status-tpl'}

			
            ,{field: 'c_time', title: '修改时间', minWidth:170, align: 'center'}
            ,{ title: '操作', minWidth: 300, align: 'center', fixed: 'right', toolbar: '#table-useradmin-webuser' }
        ]]
	});
	

				// 事件
	var active = {
			add: function () {
				// console.log('111');
				// return;
			parent.layer.open({
				type: 2
				, title: '添加'
				, content: '{:url("add")}'
				, maxmin: true
				// width: 504px; height: 424px; 
				, area: ['1000px', '650px']
				, btn: ['确定', '取消']
				, yes: function (index, layero) {


					var iframeWindow = parent.window['layui-layer-iframe' + index]
						, submitID = 'LAY-user-front-submit'
						, submit = layero.find('iframe').contents().find('#' + submitID);
					//监听提交
					iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
						// field 表单数据
						var field = data.field;
						console.log(field)
						// return

						
						$.ajax({
							url: '{:url("add")}',
							type: 'post',
							data: field,
							success: res => {
								console.log(res)
								layer.msg(res.msg, {
									time: 1500
									})
							   	if (res.code == 0) {
									table.reload('demo'); //数据刷新
								}
							}
						});
						parent.layer.close(index); //关闭弹层
					});

					submit.trigger('click');
				}
			});
		}



			,reload: function(){
				var demoReload = $('#demoReload').val();
				// var demoReload2 = $('#demoReload2').val();
				// var demoReload3 = $('#demoReload3').val();
				// var demoReload4 = $('#demoReload4').val();
				// var demoReload5 = $('#demoReload5').val();
				var demoReload6 = $('#demoReload6').val();
				// var demoReload7 = $('#demoReload7').val();


				console.log(demoReload);
				//执行重载demo
				table.reload('demo', {
				method: 'post'	
				,url: '{:url("table")}'
				,where: {
					'h1': demoReload,
				// 	'rank': demoReload2,
				// 	'type': demoReload3,
				// 	'birthday': demoReload4,
				// 	'linkman': demoReload5,
					'tel': demoReload6,
				// 	'map': demoReload7,
				}
				});
					
				
			}

	};


//------------------

	// 监听工具条
	table.on('tool(test)', function (obj) {
			var data = obj.data;
			if (obj.event === 'del') {
				layer.confirm('确认删除该数据吗？', function (index) {
					console.log(data)
					$.ajax({
						url: '{:url("Testpro/del")}',
						type: 'post',
						data: { id: data.id },
						success: res => {
							layer.msg(res.msg, {
								time: 1500,
							});
							if (res.code == 200) {
									table.reload('demo'); //数据刷新
							}
						}
					});
					// parent.layer.close(index); //关闭弹层
					layer.close(index);
				});
			}
			 else if (obj.event === 'edit') {
				var tr = $(obj.tr);
				parent.layer.open({
					type: 2
					, title: '编辑内容'
					, content: '{:url("Testpro/edit")}' + '?id=' + data.id
					, maxmin: true
					, area:  ['1000px', '650px']
					, btn: ['确定', '取消']
					, yes: function (index, layero) {
					var iframeWindow = parent.window['layui-layer-iframe' + index]
						, submitID = 'LAY-user-front-submit'
						, submit = layero.find('iframe').contents().find('#' + submitID);
					//监听提交
					iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
						// field 表单数据
						var field = data.field;
						console.log(field)
	
						$.ajax({
							url: '{:url("Testpro/edit")}',
							type: 'post',
							data: field,
							success: res => {
								console.log(res)
								layer.msg(res.msg, {
									time: 1500
									})
							   	if (res.code == 0) {
									table.reload('demo'); //数据刷新
								}
							}
						});


							parent.layer.close(index);
						});
						submit.trigger('click');
					}
					, success: function (layero, index) {

					}
				});
			} 

			




		});

		$('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

});

</script>
{/block}

　　add方法：

       public function add()
        {
            if (request()->isPost()) {
                $data = input('post.');
                $data =  json_encode($data);//成为json
                $data = json_decode($data,true);
     
                if(!empty($data['ways']) && !empty($data['wayskey'] && !empty($data['waysfen']))){ 
                    
                    for ($i = 0; $i < count($data['ways']); $i++) {
                        $ways[$i]['timu'] = $data['ways'][$i];
                        $ways[$i]['daan'] = $data['wayskey'][$i];
                        $ways[$i]['fen'] = $data['waysfen'][$i];
                        
                    }

                    $ways = json_encode($ways,320);
                    
                }else{
                    $ways = '';
                    
                }

                if(!empty($data['tiankong']) && !empty($data['tiankongskey']  && !empty($data['tiankongsfen']))){
                    for ($a = 0; $a < count($data['tiankong']); $a++) {
                            
                        $tiankong[$a]['timu'] = $data['tiankong'][$a];
                        $tiankong[$a]['daan'] = $data['tiankongskey'][$a];
                        $tiankong[$a]['fen'] = $data['tiankongsfen'][$a];
                    }
                    

                     $tiankong = json_encode($tiankong,320);
                }else{ 
                    $tiankong = '';
                }
             
                
                
                if(!empty($data['panduan']) && !empty($data['panduanskey']) && !empty($data['panduansfen'])){
                   for ($b = 0; $b < count($data['panduan']); $b++) {
                        $panduan[$b]['timu'] = $data['panduan'][$b];
                        $panduan[$b]['daan'] = $data['panduanskey'][$b];
                        $panduan[$b]['fen'] = $data['panduansfen'][$b];
                    }

                    $panduan = json_encode($panduan,320);
                }else{
                    $panduan = '';
                    
                }
               
                
                if(!empty($data['jisuan']) && !empty($data['jisuanskey']) && !empty($data['jisuansfen'])){
                    for ($c = 0; $c < count($data['jisuan']); $c++) {
                        $jisuan[$c]['timu'] = $data['jisuan'][$c];
                        $jisuan[$c]['daan'] = $data['jisuanskey'][$c];
                        $jisuan[$c]['fen'] = $data['jisuansfen'][$c];
                        
                    }

                    $jisuan =  json_encode($jisuan,320);
                }else{
                    $jisuan = '';
                    
                }
                
                $testp                 = new testp;
                $testp->name           = $data['name'];    
                $testp->ways           = $ways;            //选择题题目
                $testp->tiankong       = $tiankong;            //选择题题目
                $testp->panduan        = $panduan;            //选择题题目
                $testp->jisuan         = $jisuan;            //选择题题目
                $testp->c_time         = time();                      //时间

                $testp= $testp->save();
                
                if ($testp == 1) {
                return json(['code' => 0, 'msg' => '添加成功']); 
                }else{
                    return json(['code' => 1, 'msg' => '添加失败']);
                }
            } else {
                  return view();
            }
        }   
        

　　add视图

{block name="head"}
<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">
{/block}

<!-- <body>  44554-->
	{block name="body1"}
  <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
   
  
    
   <div class="layui-form-item"  style="padding: 20px 0 0 0;">
      <label class="layui-form-label layui-font-20">试卷名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name"  lay-verify="required" lay-reqtext="试卷名称是必填项！" placeholder="请输入试卷名称" autocomplete="off" class="layui-input">
      </div>
     </div>



  <!--  +++++++++++++++选择题++++++++++++++  --> 

 <div class="layui-form-item" >
    <label class="layui-form-label layui-font-20">选择题</label>
     
    <div class="" id="last">
        
        <div class="layui-input-block">
            <div class="">
                       <input type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">
                       
                      <input type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
                      
                        <div class="layui-input-inline">
                          <input type="number" name="waysfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
                        </div>

                        <div class="layui-input-block" style="margin-left: 370px">
                            <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                        </div>
            </div>
        </div>
         <br/>
         
    </div>
</div>
   <!--       +++++++++++++++选择题END++++++++++++++            --> 
 
   <!--       +++++++++++++++填空题++++++++++++++            --> 
  <br/>
    <br/>
  <div class="layui-form-item layui-form-text" id="tiankong">
    <label class="layui-form-label layui-font-20">填空题</label>
       
        <div>
            <div class="layui-input-block">
              <textarea name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！"  class="layui-textarea"></textarea>
              <input type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
               <div class="layui-input-inline">
                  <input type="number" name="tiankongsfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
                </div>
              
            </div>
            <div class="layui-input-block" style="margin-left: 480px">
                <button id="addtiankong" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                    <i class="layui-icon"></i>
                </button>
            </div>
       </div>
       <br/>
  </div>
<!--+++++++++++++++填空题END++++++++++++++   --> 


  

     
<br/>






<br/>


    {/block}


    {block name="body2"}
    <!-- <div class="layui-form-item">
      <label class="layui-form-label">内容</label> -->

      <div class="container "> 
        <!-- //此div重写父模板 -->
        <div id="wrap" class="nav" value="">
        </div>
        <!-- <div class="time-spend"><button id="save" class="btn btn-default btn-lg">提交</button></div> -->
      </div>


    <!-- </div> -->
    <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>

    {/block}
  
  </div>

  {block name="js"}

  <script type="text/plain" style="display: none" id="md_source"></script>
  {/block}

  {block name="jss"}
  <script src="__layuiadmin__/layui/layui.js"></script>  
  <script>

  layui.config({
    base: '__layuiadmin__/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'upload','laydate','element', 'layer'], function(){
    var $ = layui.$
    ,form  = layui.form
      ,upload  = layui.upload
      ,element = layui.element
      ,layer   = layui.layer
      ,laydate =  layui.laydate;
  
  
      //动态添加input输入框  选择题
    $("#add").click(function () {
        var str = '<div class="layui-input-block">'+
            '<div class="">'+
                       '<input type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
                       '<input type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
                       
                        '<div class="layui-input-inline">'+
                          '<input type="number" name="waysfen[]" lay-verify="required"  lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
                       ' </div>'+
                       
                       
            '<div class="layui-input-block" style="margin-left: 370px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+
        '</div>'+'<br/>';

        $("#last").append(str);
        // x++;
    });

    //删除动态添加的input输入框
    $("body").on('click', ".removeclass", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent().parent();
        parentEle.remove();
    });
  
  
  

//动态添加 填空题
    $("#addtiankong").click(function () {
        var str = 
           '<div>'+
            '<div class="layui-input-block">'+
              '<textarea name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！"  class="layui-textarea"></textarea>'+
              '<input type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
                '<div class="layui-input-inline">'+
                  '<input type="number" name="tiankongsfen[]" lay-verify="required"  lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
                '</div>'+
              
            '</div>'+
               '<div class="layui-input-block" style="margin-left: 480px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removetiankong"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+'<br/>';   
        $("#tiankong").append(str);
        // x++;
    });
  
      //删除动态添加的input输入框
    $("body").on('click', ".removetiankong", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent();
        parentEle.remove();
    });
  
  
 
  //动态添加判断题END
    $("#addpanduan").click(function () {
        var str = '<div class="layui-input-block">'+
            '<div class="">'+
                       '<input type="text" name="panduan[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
                       '<input type="text" name="panduanskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
                         '<div class="layui-input-inline">'+
                          '<input type="number" name="panduansfen[]" lay-verify="required"  lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
                        '</div>'+
                       
                       
            '<div class="layui-input-block" style="margin-left: 370px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removepanduan"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+
        '</div>'+'<br/>';

        $("#panduan").append(str);
        // x++;
    });

    //删除动态添加的input输入框
    $("body").on('click', ".removepanduan", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent().parent();
        parentEle.remove();
    });
  
  
  //添加计算题
  
    $("#addtjisuan").click(function () {
        var str = 
           '<div>'+
            '<div class="layui-input-block">'+
              '<textarea name="jisuan[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！"  class="layui-textarea"></textarea>'+
               '<textarea name="jisuanskey[]" placeholder="请输入答案" lay-verify="required" lay-reqtext="答案是必填项！" autocomplete="off"  class="layui-textarea"></textarea>'+
                  '<div class="layui-input-inline">'+
                  '<input type="number" name="jisuansfen[]" lay-verify="required"  lay-reqtext="分数是必填项！" placeholder="请输入分数" autocomplete="off" class="layui-input">'+
                '</div>'+
               
            '</div>'+
               '<div class="layui-input-block" style="margin-left: 480px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removejisuan"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+'<br/>';   
        $("#jisuan").append(str);
        // x++;
    });
  
      //删除动态添加的input输入框
    $("body").on('click', ".removejisuan", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent();
        parentEle.remove();
    });
  
  
  
  
  
  
  
  //-------------------------------------------------------------------------
  
 
  })
  </script>
{/block}
<!-- </body> -->
<!-- </html> -->

　　

edit方法：

     
     public function edit()
     {
            if (request()->isPost() ) {

                $data = input('post.');
                $data =  json_encode($data);//成为json
                $data = json_decode($data,true);
     
             
                if(!empty($data['ways']) && !empty($data['wayskey'] && !empty($data['waysfen']))){ 
                    
                    for ($i = 0; $i < count($data['ways']); $i++) {
                        $ways[$i]['timu'] = $data['ways'][$i];
                        $ways[$i]['daan'] = $data['wayskey'][$i];
                        $ways[$i]['fen'] = $data['waysfen'][$i];
                        
                    }

                    $ways = json_encode($ways,320);
                    
                }else{
                    $ways = '';
                    
                }

         
            

                $data = [
                    'id'             => input('post.id') ? input('post.id'):'',
                    'name'           => input('post.name')?input('post.name'):'',
                    'ways'           =>  $ways,
                    'tiankong'       =>  $tiankong,
                    'panduan'        =>  $panduan,
                    'jisuan'         =>  $jisuan,

                    'c_time'         => time(),
                ];

                $da= testp::update($data);
          
                return json(['code' => 0, 'msg' => '修改成功']);
            } else {

               $id = input('id', '', 'intval');
               $data = testp::get($id);
               
               
               $data = json_encode($data,320);
               $data = json_decode($data,true);
               
                if(!empty($data['ways'])){$ways = json_decode($data['ways'],true);}else{$ways ='';}
                
                if(!empty($data['tiankong'])){$tiankong = json_decode($data['tiankong'],true);}else{$tiankong ='';}
                
                if(!empty($data['panduan'])){$panduan = json_decode($data['panduan'],true);}else{$panduan ='';}
                
                if(!empty($data['jisuan'])){$jisuan = json_decode($data['jisuan'],true);}else{$jisuan ='';}

               $this->assign('id',$id);
               $this->assign('name',$data['name']);         //名称
              
              
               $this->assign('ways',$ways);           //选择题题目 答案
               
               $this->assign('tiankong',$tiankong);   //填空题题目 答案
              
               $this->assign('panduan', $panduan);    //判断题题目 答案
              
               $this->assign('jisuan',$jisuan);       //计算题题目 答案
   
               return view();
            }

        }

　　

edit视图

{block name="head"}
<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">
{/block}

<!-- <body>  44554-->
	{block name="body1"}
  <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
   
   <input name="id" value="{$id}" class="layui-input" value="" type="hidden">
   
    
   <div class="layui-form-item"  style="padding: 20px 0 0 0;">
      <label class="layui-form-label layui-font-20">试卷名称</label>
      <div class="layui-input-inline">
        <input value="{$name}" type="text" name="name"  lay-verify="required" lay-reqtext="试卷名称是必填项！" placeholder="请输入试卷名称"  class="layui-input">
      </div>
     </div>



  <!--       +++++++++++++++选择题++++++++++++++            --> 

 <div class="layui-form-item" >
    <label class="layui-form-label layui-font-20">选择题</label>
    <div class="" id="last">
        
                     
            <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                <i class="layui-icon"></i>
            </button>

            {volist name="ways" id="vo"}     
                     <div class="layui-input-block">
                    <div class="">
                               <input value="{$vo.timu}" type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">
                               
                              <input value="{$vo.daan}" type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
                              
                                 
                        <div class="layui-input-inline">
                          <input value="{$vo.fen}"   type="number" name="waysfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
                        </div>
                              
                                
                               <div class="layui-input-block" style="margin-left: 480px">
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>
                                </div>
        
                              
                    </div>
                </div><br/>
           {/volist}   

    </div>
</div>
   <!--       +++++++++++++++选择题END++++++++++++++            --> 
 
   <!--       +++++++++++++++填空题++++++++++++++            --> 
  <br/>
    <br/>
  <div class="layui-form-item layui-form-text" id="tiankong">
    <label class="layui-form-label layui-font-20">填空题</label>
        
                    <button id="addtiankong" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                        <i class="layui-icon"></i>
                    </button>
             
       
        {volist name="tiankong" id="aa"}    
            <div>
                <div class="layui-input-block">
                  <textarea value="" name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！"  class="layui-textarea">{$aa.timu}</textarea>
                  <input value="{$aa.daan}"  type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
                      <div class="layui-input-inline">
                      <input value="{$aa.fen}"  type="number" name="tiankongsfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
                    </div>
                
                </div>

               <div class="layui-input-block" style="margin-left: 480px">
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm removetiankong"><i class="layui-icon"></i></button>
                   </div>
           </div>
           <br/>
          {/volist}   
           
           
  </div>
<!--+++++++++++++++填空题END++++++++++++++   --> 

<!--+++++++++++++++判断题++++++++++++++   --> 
    <br/>
    <br/>
     <div class="layui-form-item" >
    <label class="layui-form-label layui-font-20">判断题</label>
    <div class="" id="panduan">
          <button id="addpanduan" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                                <i class="layui-icon"></i>
                            </button>
                            
              {volist name="panduan" id="bb"}                   
        
        <div class="layui-input-block">
            <div class="">
               <input value="{$bb.timu}" type="text" name="panduan[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">
               
              <input value="{$bb.daan}" type="text" name="panduanskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">
            <div class="layui-input-inline">
                  <input value="{$bb.fen}" type="number" name="panduansfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
                </div>
                             
        <div class="layui-input-block" style="margin-left: 480px">
        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm removepanduan"><i class="layui-icon"></i></button>
        </div>
        
                   
            </div>
           </div>
         <br/>
          {/volist} 
         
         
         
    </div>
</div>
    

  
  
<!--+++++++++++++++判断题END++++++++++++++   --> 
  
  
<!--+++++++++++++++计算题++++++++++++++   --> 
  
    <br/>
    <br/>
  <div class="layui-form-item layui-form-text" id="jisuan">
    <label class="layui-form-label layui-font-20">计算题</label>
       
           <button id="addtjisuan" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                    <i class="layui-icon"></i>
                </button>
       {volist name="jisuan" id="cc"}      
        <div>
            <div class="layui-input-block">
              <textarea name="jisuan[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！"  class="layui-textarea">{$cc.timu}</textarea>
              <textarea name="jisuanskey[]" placeholder="请输入答案" lay-verify="required" lay-reqtext="答案是必填项！" autocomplete="off"  class="layui-textarea">{$cc.daan}</textarea>
              
                <div class="layui-input-inline">
                  <input value="{$cc.fen}" type="number" name="jisuansfen[]" lay-verify="required" placeholder="请输入分数" autocomplete="off" class="layui-input">
                </div>
                
            </div>
           <div class="layui-input-block" style="margin-left: 480px">
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm removejisuan"><i class="layui-icon"></i></button>
            </div>
       </div>
       <br/>
    {/volist} 
       
  </div>
<!--+++++++++++++++计算题END++++++++++++++   --> 
  
     
<br/>
<br/>


    {/block}


    {block name="body2"}
    <!-- <div class="layui-form-item">
      <label class="layui-form-label">内容</label> -->

      <div class="container "> 
        <!-- //此div重写父模板 -->
        <div id="wrap" class="nav" value="">
        </div>
        <!-- <div class="time-spend"><button id="save" class="btn btn-default btn-lg">提交</button></div> -->
      </div>


    <!-- </div> -->
    <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>

    {/block}
  
  </div>

  {block name="js"}

  <script type="text/plain" style="display: none" id="md_source"></script>
  {/block}

  {block name="jss"}
  <script src="__layuiadmin__/layui/layui.js"></script>  
  <script>

  layui.config({
    base: '__layuiadmin__/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'upload','laydate','element', 'layer'], function(){
    var $ = layui.$
    ,form  = layui.form
      ,upload  = layui.upload
      ,element = layui.element
      ,layer   = layui.layer
      ,laydate =  layui.laydate;
  
  
      //动态添加input输入框  选择题
    $("#add").click(function () {
        var str = '<div class="layui-input-block">'+
            '<div class="">'+
                       '<input type="text" name="ways[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
                       '<input type="text" name="wayskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
            '<div class="layui-input-block" style="margin-left: 480px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+
        '</div>'+'<br/>';

        $("#last").append(str);
        // x++;
    });

    //删除动态添加的input输入框
    $("body").on('click', ".removeclass", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent().parent();
        parentEle.remove();
    });
  
  
  

//动态添加 填空题
    $("#addtiankong").click(function () {
        var str = 
           '<div>'+
            '<div class="layui-input-block">'+
              '<textarea name="tiankong[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！"  class="layui-textarea"></textarea>'+
              '<input type="text" name="tiankongskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
            '</div>'+
               '<div class="layui-input-block" style="margin-left: 480px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removetiankong"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+'<br/>';   
        $("#tiankong").append(str);
        // x++;
    });
  
      //删除动态添加的input输入框
    $("body").on('click', ".removetiankong", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent();
        parentEle.remove();
    });
  
  
 
  //动态添加判断题END
    $("#addpanduan").click(function () {
        var str = '<div class="layui-input-block">'+
            '<div class="">'+
                       '<input type="text" name="panduan[]" lay-verify="required" lay-reqtext="题目是必填项！" placeholder="请输入题目" autocomplete="off" class="layui-input">'+
                       '<input type="text" name="panduanskey[]" lay-verify="required" lay-reqtext="答案是必填项！" placeholder="请输入答案" autocomplete="off" class="layui-input">'+
            '<div class="layui-input-block" style="margin-left: 480px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removepanduan"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+
        '</div>'+'<br/>';

        $("#panduan").append(str);
        // x++;
    });

    //删除动态添加的input输入框
    $("body").on('click', ".removepanduan", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent().parent();
        parentEle.remove();
    });
  
  
  //添加计算题
  
    $("#addtjisuan").click(function () {
        var str = 
           '<div>'+
            '<div class="layui-input-block">'+
              '<textarea name="jisuan[]" placeholder="请输入题目" lay-verify="required" lay-reqtext="必填项！"  class="layui-textarea"></textarea>'+
               '<textarea name="jisuanskey[]" placeholder="请输入答案" lay-verify="required" lay-reqtext="答案是必填项！" autocomplete="off"  class="layui-textarea"></textarea>'+
            '</div>'+
               '<div class="layui-input-block" style="margin-left: 480px">' +
            '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removejisuan"><i class="layui-icon"></i></button>' +
            '</div>' +
            '</div>'+'<br/>';   
        $("#jisuan").append(str);
        // x++;
    });
  
      //删除动态添加的input输入框
    $("body").on('click', ".removejisuan", function () {
        //元素移除前校验是否被引用
        var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
        var parentEle = $(this).parent().parent();
        parentEle.remove();
    });
  
  
  
  
  
  
  
  //-------------------------------------------------------------------------
  //日期
  laydate.render({
    elem: '#date'
  });
  
  upload.render({
    elem: '#test5'
    ,url: '{:url("upload")}' //此处配置你自己的上传接口即可
    ,accept: 'video' //视频
    ,done: function(res){
      layer.msg('上传成功');
      console.log('上传成功');
      console.log(res)
    }
  });
      
  var navArr  = [];//定义一个数组 用于存储 传过来的 上传文件的路径
 //演示多文件列表
  var uploadListIns = upload.render({
    elem: '#testList'
    ,elemList: $('#demoList')  //列表元素对象
    ,url: '{:url("upload")}'   //后台上传文件接口
    ,accept: 'file'
    ,multiple: true
    ,number: 1
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var that = this;
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        
        that.elemList.append(tr);
        element.render('progress'); //渲染新加的进度条组件
      });
    }
    ,done: function(res, index, upload){ //成功的回调
      var that = this;
      //if(res.code == 0){ //上传成功
        var tr = that.elemList.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(3).html(''); //清空操作
        delete this.files[index]; //删除文件队列已经上传成功的文件

   
     var navArr  = [];//定义一个数组 用于存储 传过来的 上传文件的路径
     
      navArr.push(res.message); //返回的文件地址 存进数组  
      
      $(".filess").val(JSON.stringify(navArr));

console.log(res.message);
        return;
      //}
      this.error(index, upload);
    }
    ,allDone: function(obj){ //多文件上传完毕后的状态回调
      console.log(obj)

    }
    ,error: function(index, upload){ //错误回调
      var that = this;
      var tr = that.elemList.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
    ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
      element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
    }
  });


    upload.render({
      elem: '#layuiadmin-upload-useradmin'
      ,url: layui.setter.base + 'json/upload/demo.js'
      ,accept: 'images'
      ,method: 'get'
      ,acceptMime: 'image/*'
      ,done: function(res){
        $(this.item).prev("div").children("input").val(res.data.src)
      }
    });
 
  })
  </script>
{/block}
<!-- </body> -->
<!-- </html> -->