0
Ich benutze Ag-Grid, um Datentabelle zu füllen.DOMContentLoaded in ag-Grid zündet nicht - AngularJS
Ich kann die Tabelle abrufen, aber Zeilen werden nicht aktualisiert, stattdessen kann ich Loading... sehen.
Hier ist mein Eckige Code:
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>
Ich sehe, dass DOMContentLoaded Funktion wird nicht durch den Versuch ausgeführt daran gedacht eine Meldung auf der Konsole zu drucken.
Hier ist meine fiddle.
Es tut mir leid, ich bin auf den Tisch bekommen vor allem in der Geige nicht in der Lage, aber in meinem Projekt so etwas wie unten ich kann:
