Question

我正在开发一个使用codeigniter框架的项目。我能够将数据库中的所有数据显示到表中。我所做的是循环结果，每行都有其编辑链接。现在，问题是我每次加载页面时，所有编辑链接都是同时加载的表单。例如，当我有来自数据库的一百多个数据时，一百个编辑表单也会循环，我觉得这对系统来说不好，因为它很重。我的计划是使用单个表单并使用ajax传递数据。任何人都知道该怎么做吗？我只需要一些指导。提前谢谢。

示例代码：

<?php foreach ($users as $key => $value): ?>
<tr>
 <td><?php echo $value['first_name'] ?></td>
 <td><?php echo $value['last_name'] ?></td>
 <td>
  <a href="#" data-toggle="modal" data-target="#update_user_modal<?php echo    $value['id'] ?>" id="view-profile" title="Click to view">
   <i class="icon-doc"></i>
  </a>
 </td>
</tr>
<?php endforeach ?>

Answer 1

以下是我解决这个问题的方法：
你将一个表单保存在一个模态中，并在你的编辑链接中附加一个onqulick事件，在jquery中将数据推送到你的模态表单。然后触发模态打开里面的点击事件功能。我只是展示了一个不完整的解决方案。

in your edit section do below

    <td>
     <a href="#" data-toggle="modal" 
class = "some-action-class"
                data-target="#update_user_modal"
                data-userID="<?php echo $value['id'] ?>"
                data-userFname="<?php echo $value['first_name'] ?>"
                data-userLname="<?php echo $value['last_name'] ?>" 
                id="view-profile" 
                title="Click to view">
            <i class="icon-doc"></i>
           </a>
   </td>

这里是JS代码：

$(".some-action-class").on('click', function () {
    //here push data to modal form input element like below
    var inputOne = document.getElementById('someInputId') ; //in you modal form      
    var userID = $( this ).data( "userID" );
   //set clicked row value to modal 
   inputOne.val(userID);
   //do like above for other fields 

    $('#update_user_modal').modal('show');//modal opens with updated value 
});

完成编辑后隐藏模态：

Answer 2

你可以有一个带有表单的模态，然后用Ajax调用它。

首先在td添加一个类，以便我们可以提取其值。另外，我添加了一个图标来点击进行编辑

<tr>
 <td class="first_name"><?php echo $value['first_name'] ?></td>
 <td class="last_name"><?php echo $value['last_name'] ?></td>
 <td>
  <a href="#" data-id="<?php echo $value['id'] ?>" data-toggle="modal" data-target="#update_user_modal" id="view-profile" title="Click to view">
   <i class="icon-doc"></i>
   <i class="icon-edit"></i>
  </a>
 </td>
</tr>

现在，使用Ajax（可能是BS模式）调用您的表单，但首先我们需要获取您要更改的行的值：

$(document).on('click', '.icon-edit', function(){
    // get values required for editing
    var id = $(this).attr("data-id");
    var first_name = $(this).closest('tr').find('.first_name').text();
    var last_name = $(this).closest('tr').find('.last_name').text();

   // Do Ajax call
    $.ajax({
      url:"path/to/form.php?id=" + id + "&first_name=" + first_name + "&last_name=" + last_name,
      success:function(data){
        //append form to your DOM
        $('element').html(data);
      },    
    })
});

现在，在您的PHP脚本和HTML表单中，您可以设置input值并使用isset()，您可以识别它是编辑还是添加。看看这个：

<form method="POST">
    <input name="first_name" value="<?php isset($_GET['first_name']) ? $_GET['first_name'] : "" ; ?>">
    <input name="last_name" value="<?php isset($_GET['last_name']) ? $_GET['last_name'] : "" ; ?>">
    <input type="submit" name="submit">
</form>

<?php 

if(isset($_POST['submit'])){

    if(isset($_GET['id'])){
        // Do query to update
    }else{
        // Do query to create   
    }

}

?>

或者您可以通过Ajax调用来更新/创建用户。

Answer 3

您正在使用模型弹出窗口进行更新，因为您已在数据目标中编写并且已为每条记录创建模型。

但你可以这样做。您只能创建一个模型弹出窗口，如#update_data，单击该Edit链接创建ajax调用并使用record_id获取数据并在模型中填充该数据。然后打开该模型并进行更新，您还可以创建ajax来更新所选record_id的记录。

成功后，您可以更新列表数据的行。

如何使用单一形式编辑ajax中的数据？

3 个答案: