簡體   English   中英

使用刀片的laravel中的X可編輯表格

[英]X-Editable table in laravel using blade

我是網絡編程領域的新手。 我正在做一個使用laravel和Blade作為視圖的項目,並且我想為我的一個數據庫創建一個X可編輯的表,因此用戶無需輸入其他視圖即可編輯數據。

無論如何,我有很多麻煩。

我在mysql中有此數據庫:

MySQL數據庫

路由我正在文件路由中的web.php文件中執行此操作

Route::resource('/test','PruebaController');
Route::get('/test', 'PruebaController@index')->name('test');
Route::post('test/updatetest','PruebaController@updatetest')->name('updatetest');

控制者

public function index(Request $request)
{
    if ($request){
        $test=DB::table('pruebas')
        ->orderBy('nombre','asc')
        ->get();

        $test_model = new Prueba();
        $fillable_columns = $test_model->getFillable();
        foreach ($fillable_columns as $key => $value) 
        {
            $test_columns[$value] = $value;
        }

        return view('test.index')
        ->with('test', $test)
        ->with('test_columns', $test_columns);
    }
}

public function updatetest(Request $request, $id)
{
    try 
    {
        $id =$request->input('pk');
        $field = $request->input('name');
        $value =$request->input('value');


        $test = Prueba::findOrFail($id);
        $test->{$field} = $value;
        $test->save();
    }
    catch (Exception $e)
    {
        return response($e->intl_get_error_message(), 400);
    }
    return response('',200);

}

視圖

@extends ('layouts.admin')
@section ('contenido')


<div class="panel-heading">
    <h4>
        Listado de nombres
    </h4>
    @if (count($errors)>0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif
</div>

<div class="panel-body">
    <form action="{{route('updatetest')}}" method="post">
    {{csrf_field()}}
        <table class="table table-hover nowrap" id="example" width="100%">
            <thead class="thead-default">
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Cédula</th>
                    <th>Edad</th>
                </tr>
            </thead>
            @foreach ($test as $t)
            <tbody>
                <tr>
                    <td>{{$t->id}}</td>
                    <td>
                        <a 
                        href="#" 
                        class="nombre" 
                        data-type="text"
                        data-pk="{{$t->id}}"
                        data-value="{{$t->nombre}}" 
                        data-title="Cambie el nombre"
                        data-url="{{route('updatetest') }}">
                            {{$t->nombre}}
                        </a>
                    </td>
                    <td>
                        <a 
                        href="#" 
                        class="cedula" 
                        data-type="number"
                        data-pk="{{$t->id}}"
                        data-value="{{$t->cedula}}" 
                        data-title="Cambie la cedula"
                        data-url="{{route('updatetest') }}">
                            {{$t->cedula}}
                        </a>
                    </td>
                    <td>
                        <a 
                        href="#" 
                        class="edad" 
                        data-type="number"
                        data-pk="{{$t->id}}"
                        data-value="{{$t->edad}}" 
                        data-title="Cambie la edad"
                        data-url="{{route('updatetest') }}">
                            {{$t->edad}}
                        </a>
                    </td>                   
                </tr>    
            </tbody>
            @endforeach
        </table>
    </form>
</div>
@endsection

AJAX腳本

<script type="text/javascript">
$(document).ready(function() {
  //toggle `popup` / `inline` mode
  $.fn.editable.defaults.mode = 'inline';
  $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    id = $(this).data('pk');
    url = $(this).data('url');

    //make username editable
    $('.nombre').editable({
      url: url,
      pk: id,
      type:"text",
      validate:function(value){
        if($.trim(value) === '')
        {
          return 'This field is required';
        }
      }
    });


    $('.cedula').editable({
      url: url,
      pk: id,
      type:"number",
      validate:function(value){
        if($.trim(value) === '')
        {
          return 'This field is required';
        }
      }
    });

    $('.edad').editable({
      url: url,
      pk: id,
      type:"number",
      validate:function(value){
        if($.trim(value) === '')
        {
          return 'This field is required';
        }
      }
    });

});
</script>

問題是x-editable無法正常工作,當我單擊該字段時,什么也沒有發生。 知道為什么嗎?

我將衷心感謝您的幫助。

更改

<form action="{{route('test/updatetest')}}" method="post">

<form action="{{route('updatetest')}}" method="post">

route函數為給定的命名路由生成一個URL:

$ url = route('routeName');

您可以在這里了解更多信息

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM