0

ユーザーが任意のテーブル名をクリックするような要件があり、それぞれのデータを ag-grid にレンダリングする必要があります。

私はAngular js 1.xを使用しています。

私はすべての方法を試しました

$scope.gridOptions = {};
$scope.loadTableInGrid = function (tablename) {
    $http.post($scope.url + "/getPagingRecordImportedTable", { 'dbname': $stateParams.dbname, 'tableName': tablename, 'pageNumber': 1 }).success(

        function (response) {

            $scope.names = response.records;
            $scope.mdata = response.metadata;

            console.log(response.records);
            console.log(response.metadata);

            var  columnsize = 0;
            for (var obj in $scope.mdata) {
                if ($scope.mdata[obj]['columnsize'] > 20) {
                    columnsize = 20;
                } else {
                    columnsize = $scope.mdata[obj]['columnsize'];
                }

                $scope.columnDefs.push({
                    "headerName": $scope.mdata[obj]['columnname'],
                    "field": $scope.mdata[obj]['columnname']
                });
            }


            var gridDiv = document.querySelector('#myGrid');
            alert(gridDiv);
            new agGrid.Grid(gridDiv, $scope.gridOptions);
            $scope.gridOptions.api.setColumnDefs( $scope.columnDefs);
            $scope.gridOptions.api.setRowData(response.records);
            $scope.gridOptions.api.refreshView();



            console.log("-----------Data received");
        }).error(function (data) {
            alert(data);
        });
    } else {
        $scope.reset();
        $scope.resetGridTableName();

    }
    console.log(tablename);
};

テーブル名に従って、グリッドに列とレコードの両方を動的にロードする必要があります。しかし、常に「読み込み中」と表示され、レンダリングするものは何もありません。

例がある場合は、私のコードを参照またはリファクタリングしてください。

4

1 に答える 1

0

あなたのコードに 1 つの if ステートメントと 2 つの else ステートメントが表示されています...何か不足していますか..?

とにかく。Angular ajax メソッドは Promise を返すため、.success/.error の代わりに .then/.catch を使用する必要があります。

私はそれを次のようにもっと書いたでしょう：（未テスト）（ES6矢印fnとconstに注意してください）

$scope.gridOptions = {};
$scope.loadTableInGrid = tablename => {
    const url = $scope.url + "/getPagingRecordImportedTable"
    const formData = {
        dbname: $stateParams.dbname,
        tableName: tablename,
        pageNumber: 1
    }

    console.log(tablename);

    $http.post(url, formData)
    .then( response => {
        $scope.names = response.records;
        $scope.mdata = response.metadata;

        console.log(response.records);
        console.log(response.metadata);

        var  columnsize = 0;
        for (var obj in $scope.mdata) {
            if ($scope.mdata[obj]['columnsize'] > 20) {
                columnsize = 20;
            } else {
                columnsize = $scope.mdata[obj]['columnsize'];
            }

            $scope.columnDefs.push({
                headerName: $scope.mdata[obj]['columnname'],
                field: $scope.mdata[obj]['columnname']
            });
        }

        var gridDiv = document.querySelector('#myGrid');
        alert(gridDiv);
        new agGrid.Grid(gridDiv, $scope.gridOptions);
        $scope.gridOptions.api.setColumnDefs( $scope.columnDefs]);
        $scope.gridOptions.api.setRowData(response.records);
        $scope.gridOptions.api.refreshView();

        console.log("-----------Data received");

    }).catch( err => {
        console.log( "Error: ", err )
    })
};
于 2016-02-22T13:51:52.880 に答える