我在项目中使用 ag-grid 插件。我使用 $http 服务获取 json 数据。但是网格在网页中显示为空白。但是当直接应用 json 数据时,grid 可以工作。我认为这可能是由于从 $http 获取数据的延迟。但是根据角度概念,网格应该在数据到来时更新。是否有任何解决方案仅在数据来自服务器时才显示 html 页面。
下面是我的javascript文件'fileBrowser.js':
var fileBrowserModule = angular.module('fileBrowser', ['agGrid']);
fileBrowserModule.controller('fileBrowserController', function($scope, $http) {
$scope.rowData=[
];
$http.get("http://localhost:8080/KKR/flow/sin/allSins.json")
.success(function(data) {
$scope.rowData=JSON.parse("["+JSON.stringify(data)+"]");
console.log($scope.rowData);
});
/*
$scope.rowData=[
{"group":true,"data":{"name":"joe"},
"children":[
{"group":true,"data":{"name":"pat"},
"children":[{"group":true,
"data":{"name":"maya"},
"children":[{"group":false,
"data":{"name":"brook"},
"children":[]},{"group":true,
"data":{"name":"kery"},
"children":[{"group":false,
"data":{"name":"santosh"},
"children":[]}]}]}]},
{"group":false,
"data":{"name":"aravind"},"children":[]}]}
]
*/
var columnDefs = [
{headerName: "Name", field: "name", width: 250,
cellRenderer: {
renderer: 'group',
innerRenderer: innerCellRenderer
}},
{headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle},
{headerName: "Type", field: "type", width: 150},
{headerName: "Date Modified", field: "dateModified", width: 150}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: $scope.rowData,
rowSelection: 'multiple',
rowsAlreadyGrouped: true,
enableColResize: true,
enableSorting: true,
rowHeight: 20,
icons: {
groupExpanded: '<i class="fa fa-minus-square-o"/>',
groupContracted: '<i class="fa fa-plus-square-o"/>'
},
onRowClicked: rowClicked
};
$scope.selectedFile = 'Select a file below...';
function rowClicked(params) {
var node = params.node;
var path = node.data.name;
while (node.parent) {
node = node.parent;
path = node.data.name + '\\' + path;
}
$scope.selectedFile = path;
}
function sizeCellStyle() {
return {'text-align': 'right'};
}
function innerCellRenderer(params) {
var image;
if (params.node.group) {
image = params.node.level === 0 ? 'disk' : 'folder';
} else {
image = 'file';
}
var imageFullUrl = '/example-file-browser/' + image + '.png';
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name;
}
});
下面是我的html文件:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/angular/fileBrowser.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-->
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="scripts/angular/ag-grid.js?ignore=notused10"></script>
<link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10">
<link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10">
<script src="scripts/angular/fileBrowser.js"></script>
</head>
<body ng-app="fileBrowser">
<div ng-controller="fileBrowserController"
style="border: 1px solid darkgrey;
width: 600px;
background-color: lightgrey;
border-radius: 5px;
padding: 3px;">
<div style="border: 1px solid darkgrey; margin-bottom: 2px; background-color: white;"> {{selectedFile}}</div>
<div style="width: 100%; height: 400px;"
ag-grid="gridOptions"
class="ag-file-browser">
</div>
</div>
</body>
</html>