Question

我正在使用Laravel 5.5，我正在尝试使用ag-grid，并希望将来自我的数据库的数据直接加载到Javascript文件中。

My Migration如下所示：

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->timestamps();
    });
}

我的前端如下所示：

example.js

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

// specify the data
var rowData = [
    {name: "TODO 1", created_at: "01.01.2018", updated_at: "05.11.2016"},
    {name: "TODO 1", created_at: "01.01.2018", updated_at: "05.11.2016"} // here I would like to replace this dummy data with my db data
];

// 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 () {
    // 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);
});

home.blade.php

<html>

<head>
    <script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js"></script>
    <script src="example.js"></script>
</head>

<body>
    <h1>Ag-Grid Example</h1>
    <div id="myGrid" style="height: 115px;width:500px" class="ag-fresh"></div>

    <!-- Own Scripts -->
    <script src="{{ asset('js/example.js') }}"></script>
</body>

</html>

有关如何将我从数据库加载的数据插入我的rowData文件中的变量example.js的任何建议吗？

感谢您的回复！

Answer 1

如果您将数据作为集合获取，则可以像这样传递数据：

<script>
    var app = {{ $collection }};
</script>

如果它是一个数组，您可以使用@json指令：

<script>
    var app = @json($array);
</script>

您还可以使用其中一个可用的包或将数据放入hidden input HTML元素，以便能够在JS中使用此数据。

将db数据加载到javascript文件中

1 个答案: