angularjs – 使用$http加载json数据时的Angular-grid

发布时间：2020-12-17 06:51:09 所属栏目：安全来源：网络整理

导读：我在项目中使用ag-grid插件.我使用$http服务获取json数据.但网格在网页中显示为空白.但是当直接应用json数据时,网格工作.我想这可能是由于从$http获取数据的延迟.但是根据角度概念,数据到来时应该更新网格.是否有任何解决方案仅在数据来自服务器时显示html页

我在项目中使用ag-grid插件.我使用$http服务获取json数据.但网格在网页中显示为空白.但是当直接应用json数据时,网格工作.我想这可能是由于从$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"},"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;"> &nbsp; {{selectedFile}}</div>
        <div style="width: 100%; height: 400px;"
             ag-grid="gridOptions"
             class="ag-file-browser">
        </div>

    </div>

</body>
</html>

解决方法

使用ag-Grid API设置行数据.

看看这个例子“Further Example Starting Point”来看看.

代码是

$scope.gridOptions.api.setRows(res.data);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!