Laravel 5.5下如何将数据库数据加载到ag-grid的JavaScript文件？

我来给你两种实用的方法，帮你把Laravel数据库里的任务数据加载到ag-Grid里：

这种方法简单直接，适合数据量不大的情况，直接把数据库数据转成JSON注入到页面中，供JS文件使用。

步骤1：在控制器中查询数据并传给视图 #

首先创建（或修改）你的HomeController，从数据库获取任务数据：

// app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;

use App\Task;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        // 获取所有任务数据
        $tasks = Task::all();
        // 把数据传给home视图
        return view('home', compact('tasks'));
    }
}

步骤2：修改Blade模板，注入数据 #

修改home.blade.php，在引入example.js之前，先定义一个全局变量存储任务数据：

<html>
<head>
    <script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js"></script>
</head>
<body>
<h1>Ag-Grid Example</h1>
<div id="myGrid" style="height: 115px;width:500px" class="ag-fresh"></div>

<!-- 先将数据库数据转为JSON注入为全局变量 -->
<script>
    const taskData = {!! $tasks->toJson() !!};
</script>
<!-- 再引入你的JS文件 -->
<script src="{{ asset('js/example.js') }}"></script>
</body>
</html>

注意：这里用{!! !!}而不是{{ }}，是为了避免Laravel自动转义HTML字符，保证JSON格式正确。

步骤3：修改example.js使用注入的数据 #

把原来的模拟rowData替换成我们注入的全局变量：

// specify the columns
var columnDefs = [
    {headerName: "Name", field: "name"},
    {headerName: "Created_At", field: "created_at"},
    {headerName: "Updated_At", field: "updated_at"}
];

// 使用注入的全局任务数据作为rowData
var rowData = taskData;

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    }
};

// used in our jasmine test
function selectAllRows() {
    gridOptions.api.selectAll();
}

// wait for the document to be loaded, otherwise ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

如果数据量较大，或者需要动态刷新数据，异步请求API的方式更优雅，也不会把数据暴露在页面源码里。

步骤1：创建API路由 #

在routes/api.php中添加一个获取任务数据的路由：

Route::get('/tasks', function () {
    return App\Task::all();
});

步骤2：修改example.js，异步请求数据 #

修改JS文件，在网格初始化完成后，通过fetch请求API获取数据，再更新ag-Grid的行数据：

// specify the columns
var columnDefs = [
    {headerName: "Name", field: "name"},
    {headerName: "Created_At", field: "created_at"},
    {headerName: "Updated_At", field: "updated_at"}
];

// 先初始化空的rowData
var rowData = [];

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
        // 网格准备好后，请求数据
        fetchTasks();
    }
};

// 定义请求数据的函数
function fetchTasks() {
    fetch('/api/tasks')
        .then(response => response.json())
        .then(data => {
            // 更新ag-Grid的行数据
            gridOptions.api.setRowData(data);
        })
        .catch(error => console.error('加载任务数据失败:', error));
}

// used in our jasmine test
function selectAllRows() {
    gridOptions.api.selectAll();
}

// wait for the document to be loaded, otherwise ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

1. 确保Task模型存在：如果还没创建模型，执行php artisan make:model Task生成，然后添加可填充字段：

// app/Task.php
namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $fillable = ['name']; // 允许批量赋值的字段
}

2. 日期格式调整：如果需要把默认的YYYY-MM-DD HH:MM:SS格式改成你示例中的d.m.Y，可以在Task模型中添加访问器：

public function getCreatedAtAttribute($value)
{
    return \Carbon\Carbon::parse($value)->format('d.m.Y');
}

public function getUpdatedAtAttribute($value)
{
    return \Carbon\Carbon::parse($value)->format('d.m.Y');
}

内容的提问来源于stack exchange，提问作者Carol.Kar