使用 $http 加载 json 数据时的 Angular-grid
Posted
技术标签:
【中文标题】使用 $http 加载 json 数据时的 Angular-grid【英文标题】：Angular-grid when using $http to load json data 【发布时间】：2015-12-30 13:27:04 【问题描述】：我在一个项目中使用 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":"***",
"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>
【问题讨论】：
一些代码示例可以提供帮助吗？ 【参考方案1】：使用 ag-Grid API 设置行数据。
看这个例子“Further Example Starting Point”看看。
代码是
$scope.gridOptions.api.setRows(res.data);
【讨论】：
对于那些没有收到任何错误，但仍然没有显示加载数据的人，然后尝试设置包含ag-grid的element的高度（即。 )，或者如果您在元素的高度中提供 % ，请确保其父元素也具有 height 属性。
请注意，链接中的示例现在不起作用。【参考方案2】：
我已经修改了之前的答案。代替setRows，我们可以使用setRowData。这对我有用：
$scope.gridOptions.api.setRowData(res.data);
【讨论】：
以上是关于使用 $http 加载 json 数据时的 Angular-grid的主要内容，如果未能解决你的问题，请参考以下文章
JMeter 插件 Json Path 解析HTTP响应JSON数据
我正在尝试使用 Jquery-Ajax 使用 JSON 响应，但它不起作用。正在加载空选择下拉列表