Question

我正在使用Laravel Framework 5.7.19和最新版本的ag-grid。

我正在从app.blade.php中的示例中加载所需的库：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- ag-grid -->
    <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">

</head>
<body>
<div id="app">
    @include('layouts.nav.mainNav')

    <main class="py-4">
        @yield('content')
    </main>
</div>
</body>
</html>

我的grid.blade.php如下所示：

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="">

                <h1>Hello from ag-grid!</h1>
                <button onclick="getSelectedRows()">Get Selected Rows</button>
                <div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"></div>

                <script type="text/javascript" charset="utf-8">
                    // specify the columns
                    var columnDefs = [
                        {headerName: "Make", field: "make", rowGroupIndex: 0 },
                        {headerName: "Price", field: "price"}
                    ];

                    var autoGroupColumnDef = {
                        headerName: "Model",
                        field: "model",
                        cellRenderer:'agGroupCellRenderer',
                        cellRendererParams: {
                            checkbox: true
                        }
                    }

                    // let the grid know which columns and what data to use
                    var gridOptions = {
                        columnDefs: columnDefs,
                        enableSorting: true,
                        enableFilter: true,
                        autoGroupColumnDef: autoGroupColumnDef,
                        groupSelectsChildren: true,
                        rowSelection: 'multiple'
                    };

                    // lookup the container we want the Grid to use
                    var eGridDiv = document.querySelector('#myGrid');

                    // create the grid passing in the div to use together with the columns & data we want to use
                    new agGrid.Grid(eGridDiv, gridOptions);

                    fetch('https://api.myjson.com/bins/ly7d1').then(function(response) {
                        return response.json();
                    }).then(function(data) {
                        gridOptions.api.setRowData(data);
                    })

                    function getSelectedRows() {
                        const selectedNodes = gridOptions.api.getSelectedNodes()
                        const selectedData = selectedNodes.map( function(node) { return node.data })
                        const selectedDataStringPresentation = selectedData.map( function(node) { return node.make + ' ' + node.model }).join(', ')
                        alert('Selected nodes: ' + selectedDataStringPresentation);
                    }
                </script>

            </div>
        </div>
    </div>
@endsection

这基本上是Ag-grid JS example中的简单示例。

该示例中未加载数据。有什么建议我做错了吗？

感谢您的答复！

Answer 1

在查看您所引用的示例时，我尝试复制其中的一部分，以加载数据，这些库必须与用于加载数据的刀片服务器位于同一刀片文件中，因此添加在您的grid.blade.php中：

  <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
  <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">

这是我看到的唯一例子。希望这会有所帮助。

P.S：尽管我不明白为什么在这里使用2个刀片文件，但有相同的任何具体原因，我却能完全以这种方式实现该示例？

Ag-grid-数据未在laravel视图中加载

1 个答案: