如何使用 jQuery-Tabledit 和 Laravel 更新表格行

Posted 2023-05-08

【中文标题】如何使用 jQuery-Tabledit 和 Laravel 更新表格行

【英文标题】：How to update table row with jQuery-Tabledit and Laravel

【发布时间】：2018-05-30 18:55:33

【问题描述】：

在 Laravel 中，我需要将行 ID 指定为请求 URL 的一部分以便更新它，例如：http://localhost/contacts/16

问题在于使用 jQuery-Tabledit 时，因为它在初始化时需要一个 URL（在页面加载时）。

那么问题来了，如何在jQuery-Tabledit中将当前行ID设置为URL？

html：

<table class="table table-striped table-bordered" id="contactsTable">
<thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th class="tabledit-toolbar-column"></th>
    </tr>
</thead>
<tbody>
    @if($contacts)
        @foreach ($contacts as $contact)
            <tr id="$contact->id">
                <td><span class="tabledit-span tabledit-identifier">$contact->id</span><input class="tabledit-input tabledit-identifier" type="hidden" name="id" value="$contact->id" disabled=""></td>
                <td class="tabledit-view-mode"><span class="tabledit-span">$contact->first_name</span><input class="tabledit-input form-control input-sm" type="text" name="first_name" value="$contact->first_name" style="display: none;" disabled=""></td>
                <td class="tabledit-view-mode"><span class="tabledit-span">$contact->last_name</span><input class="tabledit-input form-control input-sm" type="text" name="last_name" value="$contact->last_name" style="display: none;" disabled=""></td>
           </tr>
       @endforeach
   @endif
</tbody>

javascript：

<script>
$( document ).ready(function() 
    $('#contactsTable').Tabledit(
        url: 'http://localhost/contacts/22',
        saveButton: false,
        columns: 
            identifier: [0, 'id'],
            editable: [[1, 'first_name'], [2, 'last_name']]
        
    );
);

如您所见，url: 'http://localhost/contacts/22' 是问题所在。上面的代码按预期工作，但只更新第 22 行，因为 jQuery-Tabledit URL 被修复编码到第 22 行。

【参考方案1】：

我假设您的 jquery 位于当前刀片中。因此这些括号： , !! !! 只有在您使用扩展名.blade.php. 时才会被视为模板

所以你可以做的是简单地使用刀片来回显contact id 使用括号。

<script>
$( document ).ready(function() 
    $('#contactsTable').Tabledit(
        url: 'http://localhost/contacts/'+!! $contact->id !!,
        saveButton: false,
        columns: 
            identifier: [0, 'id'],
            editable: [[1, 'first_name'], [2, 'last_name']]
        
    );
);

或者只是将联系人集合序列化为 json：

$('#contactsTable').on('click', function()
   let contacts = !! $contacts->toJson() !!;

   // now you can access all attributes that are defined in Contacts model 
   // example contact id 

   let contact_id = contacts.id; 

【讨论】：

我不能只在 Tabledit 初始化时添加联系人 ID（当文档准备好时），因为我们不知道用户要编辑哪一行。第二种方法的类似答案，即使我捕捉到“点击”事件，我也需要重新初始化整个表 $('#contactsTable').Tabledit() 这是不行的。

很公平，但无论更新哪个行用户！您只需获取当前的联系人 ID，因此当您在后端收到帖子数据时，您可以验证并检查哪些用户已更新，哪些未更新！在您发布的 jquery 中，您显然没有发布请求，因为您首先没有 csrf！而且我看不到您是如何将“id”传递给控制器​​的！

为了强调实际问题，我简化了上面的代码。原始代码确实有一个 csrf 令牌和一个隐藏的输入字段“_method=PUT”，以欺骗 Laravel。

【参考方案2】：

设法在服务器端解决它，创建了一个单独的路由，仅用于通过 Tabledit 更新数据，它不需要行 ID 作为 URL 的一部分（我将其包含在 POST 请求中）：

Route::post('/contacts/updatetable','ContactsController@updateTable');

控制器：

use Illuminate\Http\Request;

class ContactsController extends Controller

    ...

    public function updateTable(Request $request)
    
        // Save the data.
        $contact = Contact::find($request->input('id'));
    

    ...

但仍然很高兴知道客户端（jQuery-Tabledit）是否有任何方法。