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

index视图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
{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方法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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视图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
{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方法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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视图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
{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> -->

　　

 

posted @   79524795  阅读(335)  评论(0)  编辑  收藏  举报
相关博文：
·  Layuiadmin 超多选 单选案例
·  TP5+layui多文件上传，前端后台代码案例
·  layui带输入的选择框 获取用户输入的值or选择的值
·  layui带输入的选择框 获取用户输入的值or选择的值
·  layui实现后台表格数据显示--学生管理系统（layui搜索，删除，批量删除，增加，修改，php接口后台）
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
历史上的今天：
2021-05-10 php获取文件后缀
点击右上角即可分享
微信分享提示
SQL AI 助手