0

我使用 yajra 数据表制作了一个表格，一切正常（按钮、表格标题、表格数据、编辑等）（清单 1）。现在我正在尝试使用 Laravel 8 组件来实现它，但我不明白如何正确地做到这一点。我在下面给出了我的尝试之一的示例（清单 2），但我只显示列标题（没有按钮，表中没有数据）。同样在这个项目中，我使用的是 laravel-breeze。

清单 1，一切正常。

    <!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>Format Documents</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'], true) !!}
    </div>
</section>
<script>
    $(function () {

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

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

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

</script>

</body>

我尝试使用 Laravel 8 组件仅显示 Laravel Breeze 项目和表格列标题。

    <x-app-layout>
<x-slot name="header">

    <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">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap.min.css">

    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Dashboard') }}
    </h2>
</x-slot>

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

    <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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <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>
    <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>
    <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>

    <script>
        $(function () {

            var editor = new $.fn.dataTable.Editor({
                ajax: "/service/formats",
                table: "#format-table",
                display: "bootstrap",
                fields: [
                    {label: "Наименование формата:", name: "name"},
                ]
            });

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

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

    </script>

</x-content-body>
</x-app-layout>

我的数据表控制器

<?php

 namespace App\DataTables;

 use App\Models\Format;
 use Yajra\DataTables\Html\Button;
 use Yajra\DataTables\Html\Column;
 use Yajra\DataTables\Html\Editor\Editor;
 use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

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

/**
 * Get query source of dataTable.
 *
 * @param \App\Models\Format $model
 * @return \Illuminate\Database\Eloquent\Builder
 */
public function query(Format $model)
{
    return $model->newQuery();
}
/*
 * HERERERE
 */
/**
 * Optional method if you want to use html builder.
 *
 * @return \Yajra\DataTables\Html\Builder
 */
public function html()
{
    return $this->builder()
        ->setTableId('format-table')
        ->columns($this->getColumns())
        ->minifiedAjax()
        ->select()
        ->initComplete("function () {
                                this.api().columns().every(function () {
                                    var column = this;
                                    var input = document.createElement(\"input\");
                                    $(input).appendTo($(column.footer()).empty())
                                    .on('change', function () {
                                            column.search($(this).val(), false, false, true).draw();
                                        });
                                });
                       }")
        ->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([
                    Fields\Text::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');
}
}

我还附上两张图片，第一张是工作状态。第二个是当我尝试使用组件来实现它时的样子。1 在此处输入图像描述 2 在此处输入图像描述

嗯，我决定查看控制台，并看到警告和错误，这在没有 laravel-breeze 的版本中不存在。 在此处输入图像描述

4

0 回答 0