增加多個input表單後端保存邏輯

前端增加add頁面

 <table border="1px  dashed  red " id="_table2">
                        <tr>
                            <td style="text-align: center">序號</td>
                            <td style="text-align: center">姓名</td>
                            <td style="text-align: center">年齡</td>
                            <td style="text-align: center">圖片</td>
                            <td style="text-align: center">介紹</td>
                            <td style="text-align: center">操作</td>

                        </tr>



                        <tr class="noborder">
                            <td>1</td>
                            <td> <input type="text" name="name1"   id="name1" ></td>
                            <td> <input type="text" name="age1" >  </td>
                            <td>
                                <img id="img1" width="100px" height="100px"
                                     src="__HOME__/Content/images/xin.png" alt="">
                                <input id="p_img1" type="hidden" name="img1" value="__HOME__/Content/images/xin.png">
                                <input type="file" name="img1" onchange="upload_imgs(1)" id="upload_imgs1">  </td>
                            <td><textarea name="explain1" id="" cols="30" rows="10"></textarea>  </td>

                            <td><a onclick="del(1)">刪除</a></td>
                        </tr>




                        <script>
                            var ii = 2;
                            function add_form(){

                                $("#add_form").remove();
                                var html = '<tr class="noborder">\n' +
                                    '                            <td>'+( ii++)+'</td>\n' +
                                    '                            <td> <input type="text" name="name'+ii+'" id="name'+ii+'"></td>\n' +
                                    '                            <td> <input type="text" name="age'+ii+'" >  </td>\n' +
                                    '                            <td> <img id="img'+ii+'" width="100px" height="100px"\n' +
                                    '                                     src="http://yyeess10.e8wtp.cn/Content/images/xin.png" alt="">\n' +
                                    '                                <input id="p_img'+ii+'" type="hidden" name="img'+ii+'" value=""><input  οnchange="upload_imgs('+ii+')" type="file" name="img'+ii+'" id="upload_imgs'+ii+'">  </td>\n' +
                                    '                            <td><textarea name="explain'+ii+'" id="" cols="30" rows="10"></textarea>  </td>\n' +
                                    '\n' +
                                    '                            <td><a οnclick="del('+ii+')">刪除</a></td>\n' +
                                    '                        </tr> '+
                                    '<tr id="add_form" style="background: rgb(255, 255, 255);">\n' +
                                    '                            <td colspan="15"><a class="btn-add marginleft" id="add_type" href="JavaScript:void(0);" οnclick="add_form()"> <span>添加</span> </a></td>\n' +
                                    '                        </tr>'
                                ;

                                $('#_table2').append(html);
                            }

                            function upload_imgs(param){
                                var formData = new FormData();
                                formData.append('file', $('#upload_imgs'+param)[0].files[0]);
                                $.ajax({
                                    type:"post",
                                    url:"uploadImg",
                                    data: formData,
                                    contentType: false,
                                    processData: false,
                                    cache: false,
                                    success:function(result){
                                        console.log(result);
                                        if(result.code == 200){
                                            $('#img'+param).attr('src',result.img_src)
                                            $('#p_img'+param).val(result.img_src)
                                        }
                                    }
                                });

                            }

                        </script>
                        <tr id="add_form" style="background: rgb(255, 255, 255);">
                            <td colspan="15"><a class="btn-add marginleft" id="add_type" href="JavaScript:void(0);" onclick="add_form()"> <span>添加</span> </a></td>
                        </tr>

                    </table>

後端保存:

 $i = 0;
 $item_arr = [];
   foreach ($params as $k =>$v){
       $i++;
       if($params['name'.$i]  || $params['age'.$i] || $params['img'.$i] || $params['explain'.$i]){
           $item_arr[$i]['vote_id'] =  $vote_id;
           $item_arr[$i]['name'] =  $params['name'.$i];
           $item_arr[$i]['age'] =  $params['age'.$i];
           $item_arr[$i]['img'] =  $params['img'.$i];
           $item_arr[$i]['explain'] =  $params['explain'.$i];
           $item_arr[$i]['create_time'] =  time();
       }
   }

   $item_arrs = array_values($item_arr);

   if(D('VoteItem')->addAll($item_arrs)){
       $this->success('操作成功', U('voting_activity'));
   }else{
       $this->error('保存失敗02');
   }

前端修改edit頁面

<?php if(!empty($vote_item_data)){
    $i = 0;
    foreach($vote_item_data as $node){
    $i++;  ?>

    <tr class="noborder">
        <td><?php echo $i;?><input type="hidden"   id="vote_item_id<?php echo $i;?>" name="vote_item_id<?php echo $i;?>" value="<?php echo $node['id'];?>"></td>
        <td> <input type="text" value="<?php echo $node['name'];?>" name="name<?php echo $i;?>"   id="name<?php echo $i;?>" ></td>
        <td> <input type="text" value="<?php echo $node['age'];?>" name="age<?php echo $i;?>" >  </td>
        <td>
            <img id="img<?php echo $i;?>" width="100px" height="100px"
                 src="<?php echo $node['img'];?>" alt="">
            <input id="p_img<?php echo $i;?>" type="hidden" name="img<?php echo $i;?>" value="<?php echo $node['img'];?>">
            <input type="file" name="img<?php echo $i;?>" onchange="upload_imgs('<?php echo $i;?>')" id="upload_imgs<?php echo $i;?>">  </td>
        <td><textarea name="explain<?php echo $i;?>"  cols="30" rows="10"><?php echo $node['explain'];?></textarea>  </td>

        <td><a onclick="del('<?php echo $i;?>')">刪除</a></td>
    </tr>

 <?php }}?>


<script>


     <?php if(!empty($vote_item_data)){?>
         var ii = <?php echo count($vote_item_data)+1 ;?>
     <?php }else{?>
         var ii = 1;
     <?php }?>

     function add_form(){

         $("#add_form").remove();
         var html = '<tr class="noborder">\n' +
             '                            <td>'+( ii++)+'</td>\n' +
             '                            <td> <input type="text" name="name'+ii+'" id="name'+ii+'"></td>\n' +
             '                            <td> <input type="text" name="age'+ii+'" >  </td>\n' +
             '                            <td> <img id="img'+ii+'" width="100px" height="100px"\n' +
             '                                     src="" alt="">\n' +
             '                                <input id="p_img'+ii+'" type="hidden" name="img'+ii+'" value=""><input  οnchange="upload_imgs('+ii+')" type="file" name="img'+ii+'" id="upload_imgs'+ii+'">  </td>\n' +
             '                            <td><textarea name="explain'+ii+'"  cols="30" rows="10"></textarea>  </td>\n' +
             '\n' +
             '                            <td><a οnclick="del('+ii+')">刪除</a></td>\n' +
             '                        </tr> '+
             '<tr id="add_form" style="background: rgb(255, 255, 255);">\n' +
             '                            <td colspan="15"><a class="btn-add marginleft" id="add_type" href="JavaScript:void(0);" οnclick="add_form()"> <span>添加</span> </a></td>\n' +
             '                        </tr>'
         ;

         $('#_table2').append(html);
     }
</script>

後端保存

   $i = 0;
   $item_arr_add = [];
   foreach ($params as $ki =>$node){
       $i++;
       if($params['name'.$i]  || $params['age'.$i] || $params['img'.$i] || $params['explain'.$i]){
           if($params['vote_item_id'.$i]){//修改,修改沒有saveAll()方法
               $this->vote_item_save($params,$i);
           }else{//新增 使用addAll()方法保存,避免在foreach中使用數據庫保存,會很卡
               $item_arr_add[$i]['vote_id'] =  $params['vote_id'];
               $item_arr_add[$i]['name'] =  $params['name'.$i];
               $item_arr_add[$i]['age'] =  $params['age'.$i];
               $item_arr_add[$i]['img'] =  $params['img'.$i];
               $item_arr_add[$i]['explain'] =  $params['explain'.$i];
               $item_arr_add[$i]['create_time'] =  time();
           }
       }
   }

   //有新增的input
   if(!empty($item_arr_add)){
       //按照0,1,2...排序數字鍵
       $item_arr_add = array_values($item_arr_add);
       if(D('VoteItem')->addAll($item_arr_add)){
           $this->success('操作成功', U('voting_activity'));
       }else{
           $this->error('保存失敗02');
       }
   }else{
       $this->success('操作成功', U('voting_activity'));
   }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章