5

プロジェクトで ag-grid プラグインを使用しています。$http サービスを使用して json データを取得します。しかし、グリッドは Web ページで空白で表示されます。しかし、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"},
                                "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;"> &nbsp; {{selectedFile}}</div>
        <div style="width: 100%; height: 400px;"
             ag-grid="gridOptions"
             class="ag-file-browser">
        </div>

    </div>

</body>
</html>
4

2 に答える 2

8

行データの設定には ag-Grid API を使用します。

この例「さらなる例の開始点」を見てください。

コードは

$scope.gridOptions.api.setRows(res.data);
于 2015-10-02T13:49:58.623 に答える