Question

我想问一下如何用异步请求填充Angular Kendo数据网格。

模板：

        <kendo-grid options="mainGridOptions">
        </kendo-grid>

初始化：

$scope.test = [];

$scope.mainGridOptions = {
        //data: data.results,
        dataSource : {
            data : $scope.test,
            schema : {
                model : {
                    fields : {
                        name : {
                            type : "string"
                        }
                    }
                }
            },
            pageSize : 20,
        },
        sortable : true,
        height : 550,
        pageable : true,
        columns : [{
            field : "name",
            title : $translate.instant('NAME'),
            width : "120px"
        }]
    };



$scope.test = new kendo.data.DataSource({
            transport : {
                read : function(options) {
                    return $http.post('/api/getReportData/', {
                        sDate : '',
                        eDate : ''
                    }).success(function(data) {
                        options.success(data);
                    }).error(function() {
                        return;
                    })
                    console.log("mmm");
                }
             }
        });

$scope.test应该是一个远程请求，它将结果返回给网格。

我该怎么办？以Angular方式做到这一点的最佳方法是什么？

Answer 1

我认为只是一个小小的变化，你可能会拥有它。在网格定义中，您将dataSource创建为普通对象，但将数据设置为$ scope.test，这是一个kendo数据源。

我会将架构定义内容移动到dataSource（$ scope.test），使其看起来像

$scope.test = new kendo.data.DataSource({
        transport : {
            read : function(options) {
                return $http.post('/api/getReportData/', {
                    sDate : '',
                    eDate : ''
                }).success(function(data) {
                    options.success(data);
                }).error(function() {
                    return;
                })
                console.log("mmm");
            }
         },
         schema : {
            model : {
                fields : {
                    name : {
                        type : "string"
                    }
                }
            }
        },
        pageSize : 20,
    });

然后进行网格定义

$scope.mainGridOptions = {
    dataSource : $scope.test,
    sortable : true,
    height : 550,
    pageable : true,
    columns : [{
        field : "name",
        title : $translate.instant('NAME'),
        width : "120px"
    }]
};

我相信它会奏效。

Kendo Grid＆amp; AngularJS - 如何在数据网格的Angular版本中使用异步请求填充数据网格？

1 个答案: