如何使用jQuery-Tabledit和Laravel

时间:2017-12-17 01:11:52

标签: javascript jquery ajax laravel tabledit

在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']]
        }
    });
});

如您所见,网址:“http://localhost/contacts/22”是问题所在。上面的代码按预期工作,但只更新了第22行,因为jQuery-Tabledit URL被固定编码到第22行。

2 个答案:

答案 0 :(得分: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; 


}

答案 1 :(得分:1)

管理在服务器端解决它,创建一个单独的Route只是为了通过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)是否有任何方法仍然会很高兴。