Блог

Главная - Вопросы по программированию - Встроенное редактирование таблиц данных Яджры

Встроенное редактирование таблиц данных Яджры

#php #laravel #datatables #yajra-datatable

Вопрос:

Скажите мне, как добавить встроенное редактирование в таблицу данных яджры? Все остальное, кажется, работает на меня. Правильно создает, редактирует и удаляет записи. Я попытался сделать, как показано ниже, но это не сработало (код «попробуйте»). То есть, даже невозможно выбрать ячейку, в которую нужно внести изменения. Как я понимаю, что-то не работает со стороны js. Поэтому даже ниже я привел чистый контроллер и чистый шаблон, где, кажется, все работает.

код «попробуй»

 $(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
        }
    });

    var editor = new $.fn.dataTable.Editor({
        ajax: "/service/formats",
        table: "#format-table",
        display: "bootstrap",
        fields: [
            {label: "id:", name: "id"},
            {label: "name:", name: "name"},
        ]
    });

    $('#format-table').on('click', 'tbody td:not(:first-child)', function (e) {
        editor.inline(this);
    });

    {{$dataTable->generateScripts()}}
})

Контроллер

     <?php

namespace AppDataTables;

use AppModelsFormat;
use YajraDataTablesHtmlButton;
use YajraDataTablesHtmlColumn;
use YajraDataTablesHtmlEditorEditor;
use YajraDataTablesHtmlEditorFields;
use YajraDataTablesServicesDataTable;

class FormatDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return YajraDataTablesDataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->setRowId('id');
    }

    /**
     * Get query source of dataTable.
     *
     * @param AppModelsFormat $model
     * @return IlluminateDatabaseEloquentBuilder
     */
    public function query(Format $model)
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return YajraDataTablesHtmlBuilder
     */
    public function html()
    {
        return $this->builder()
                    ->setTableId('format-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->select()
                    ->serverSide()
                    ->dom('B<"top"i>rt<"bottom"flp><"clear">')
                    ->orderBy(1, 'asc')
                    ->buttons(
                        Button::make('create')->editor('editor'),
                        Button::make('edit')->editor('editor'),
                        Button::make('remove')->editor('editor'),
                        Button::make('export'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload')
                    )
                    ->editor(
                        Editor::make()
                            ->fields([
                                FieldsText::make('name')
                            ])
                    );
    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            Column::checkbox(),
            Column::make('id'),
            Column::make('name'),
        ];
    }

    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'Format_' . date('YmdHis');
    }
}

шаблон

     <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Форматы документов</title>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Форматы документов</title>
    {{--    bootstrap   --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
            crossorigin="anonymous"></script>
    {{-- jquery --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    {{--    datatables --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
    <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>

    {{--    buttons--}}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.bootstrap5.min.js"></script>
    <script src="/vendor/datatables/buttons.server-side.js"></script>


    {{--    select--}}
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap.min.css">
    <script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>

    <script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
    <script src="{{asset('plugins/editor/js/editor.bootstrap5.min.js')}}"></script>


</head>
<body>
<section style="padding-top: 60px;">
    <div class="container">
        {!! $dataTable->table(['id' => 'format-table']) !!}
    </div>
</section>
<script>
    {!! $dataTable->generateScripts() !!}
</script>

</body>

Комментарии:

1. Извините, код работает. Все это время я просто отправлял данные в другой шаблон …. Я надеюсь, что кто-нибудь сможет помочь моему коду =)

Метки: