繁体   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