Ag-grid

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

查看您所指的示例，我尝试复制其中的一部分，为了加载数据，库需要位于您用于加载的同一个 blade 文件中数据，所以将其添加到您的 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 个 blade 文件，但我能够以这种方式准确地实现示例，有什么具体原因吗？

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

Ag-grid - Data does not load in laravel view

laravel

laravel-5