在使用刀片的laravel的X可编辑的桌

时间:2018-02-13 20:33:43

标签: php laravel blade x-editable inline-editing

我是网络编程主题的新手。我正在使用laravel和Blade为视图做一个项目,我想为我的一个数据库创建一个可编辑X的表,这样用户就不需要进入另一个视图来编辑数据。

无论如何,我有很多琐事。

我在mysql中有这个数据库:

MySql database

路线 我在文件路径

中的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无法正常工作,当我点击该字段时没有任何反应。知道为什么会这样吗?

我真的很感谢你的帮助。

1 个答案:

答案 0 :(得分:0)

更改

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

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

route函数为给定的命名路由生成一个URL:

     

$ url = route(&#39; routeName&#39;);

您可以阅读更多相关信息here