我正在使用Laravel 5.5，我正在尝试使用ag-grid，并希望将我的数据库中的数据直接加载到Javascript文件中。
我的迁移如下所示：
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的任何建议吗？
感谢您的回复！
如果您将数据作为集合获取，则可以像这样传递数据：
<script>
var app = {{ $collection }};
</script>
如果它是一个数组，你可以使用@json指令：
<script>
var app = @json($array);
</script>
您还可以使用其中一个可用的包或将数据放入hidden input HTML元素，以便能够在JS中使用此数据。