Devexpress AngularJS 获取 Pivot 的动态数据

Question

在我的 AngularJS 网络应用程序中，我正在使用 devexpress 进行数据透视。特别是，我正在使用字段选择器：https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/

示例中有静态数据。我必须从服务器检索它们。所以，我写了这个：

$scope.testData = null;
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
   fields: [{
     caption: "Nome",
     dataField: "fullName",
     area: "row"
    }, {
     caption: "Country",
     dataField: "country",
    area: "column"
  }, {
    caption: "Count",
    dataField: "countOne",
    dataType: "number",
    summaryType: "sum",
    area: "data"
  }],
     store: $scope.testData
  });

  $scope.pivotGridOptions = {
     allowSortingBySummary: true,
     allowSorting: true,
     allowFiltering: true,
     showBorders: true,
     dataSource: $scope.pivotGridDataSource,
     fieldChooser: {
        enabled: false
     }
   },

   $scope.fieldChooserOptions = {
      dataSource: $scope.pivotGridDataSource,
         texts: {
            allFields: "All",
            columnFields: "Columns",
            dataFields: "Data",
            rowFields: "Rows",
            filterFields: "Filter"
           },
          width: 400,
          height: 400,
          bindingOptions: {
             layout: "layout"
          }
      };

  // Now I call the function to retrieve data
  $scope.getTestData = () => {
     // I call the server and save the data
     ........
      $scope.testData = result;
  }

问题是table调用后还是空的。有写"No data"。为什么？我也试着写

$scope.pivotGridDataSource.load();
$scope.pivotGridDataSource.reload();

调用服务器后，但还没有生效。

Answer 1

问题出在你的店里，所以做这样的事情

var dataStore = new DevExpress.data.CustomStore({
                load: function (loadOptions) {
                    var d = $.Deferred();
                    $.ajax({
                        url: UrlApi,
                        method: "GET",
                    }).done(function (result) {
                        d.resolve(result, {
                        });
                    });
                    return d.promise();
                },
                key: "Id",
            });


$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
   .......
     store: dataStore
  });

看下面这段代码，是jquery，但是AngularJS基本一样

var dataStore = new DevExpress.data.CustomStore({
                load: function (loadOptions) {
                    var d = $.Deferred();
                    $.ajax({
                        url: UrlApi,
                        method: "GET",
                    }).done(function (result) {
                        d.resolve(result, {
                        });
                    });
                    return d.promise();
                },
                key: "Id",
            });
        $("#pvtSales").dxPivotGrid({
            showBorders: true,
            "export": {
                enabled: true,
                fileName: "Sales"
            },
            dataSource: {
                fields: [{
                    caption: "Fecha",
                    dataField: "maeFecha",
                    width: 350,
                    area: "row"
                }, {
                    caption: "Nombre",
                    dataField: "maeNombre",
                    dataType: "number",
                    summaryType: "count",
                    area: "data"
                }, {
                    dataField: "maeGestion",
                    width: 350,
                    area: "column"
                }],
                store: dataStore
            }
        });

并查看结果

Devexpress AngularJS 获取 Pivot 的动态数据

Devexpress AngularJS get dynamic data for Pivot

javascript

devexpress

angularjs

devextreme