0
J'utilise ag-Grid pour remplir les données.DOMContentLoaded dans ag-Grid ne fonctionne pas- AngularJS
Je suis en mesure d'obtenir la table, mais les lignes ne sont pas mises à jour, à la place, je peux voir Loading....
Voici mon code angulaire:
agGrid.initialiseAgGridWithAngular1(angular);
var app = angular.module('project', ['agGrid']);
app.controller('manageInspCtrl', function($scope) {
var columnDefs = [{
headerName: "<input type=checkbox>Select All",
field: "Select",
width: 120,
cellRenderer: function(params) {
var htmlElement = document.createElement("input");
htmlElement.type = 'checkbox';
return htmlElement;
}
},
{ headerName: "Postal Code", field: "pc", width: 120 },
{ headerName: "Zone Name", field: "zn", width: 120 },
{ headerName: "Sector Name", field: "sn", width: 120 },
{ headerName: "Branch Code", field: "bc", width: 120 },
{ headerName: "Branch Name", field: "bn", width: 120 },
{ headerName: "Branch Address", field: "ba", width: 120 },
{ headerName: "Towncouncil name", field: "tcn", width: 120 },
{ headerName: "Towncouncil Address", field: "tca", width: 120 },
{ headerName: "Phase Name", field: "pn", width: 120 }
];
var myDummyData = [
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" },
{ pc: "400001", zn: "Zone - 1", sn: "Sector - 1", bc: "AMK-1", bn: "Ang Mo Kio BO", ba: "Block-109, Ang Mo Kio, Singapore", tcn: "Ang Mo Kio Towncouncil", tca: "Block-110, Ang Mo Kio Street, Singapore", pn: "Phase - 1" }
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: null,
enableFilter: true,
enableColResize: true,
enableSorting: true
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, $scope.gridOptions);
console.log("OUT");
console.log("HI");
$scope.gridOptions.api.setRowData(myDummyData);
});
});
HTML:
<div ng-controller="manageInspCtrl">
<div id="myGrid" class="ag-dark" ag-grid="gridOptions" style="height: 400px;"></div>
</div>
Je vois que la fonction DOMContentLoaded ne reçoit pas exécuté en essayant d'imprimer un certain message sur la console.
Voici mon fiddle.
Je suis désolé, je ne suis pas en mesure d'obtenir la table d'abord dans le violon, mais dans mon projet, je peux quelque chose comme ci-dessous:
