I am using Laravel Framework 5.7.19 and the latest version of ag-grid.
I am loading the needed libraries from the example in my app.blade.php:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="">
<title></title>
<!-- Scripts -->
<script src="" 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="" 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>
My grid.blade.php looks like the following:
@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
It is basically the simple example from the Ag-grid JS example.
The data does not load within the example. Any suggestions what I am doing wrong?
I appreciate your replies!
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire