使用 AngularJS 在 DevExpress Pivot 中添加字段

Question

我正在查看此模板来构建 Web 应用程序：https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/

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

$scope.testData = [];
$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 server to retrieve data
  $scope.getTestData = () => {
     $scope.testData.length = 0;
     result.forEach(e => {
         $scope.testData.push(e);
     );
     $scope.pivotGridDataSource.reload();
  }

  $scope.getTestData();

问题是加载数据时，在下面的字段中只显示开头的字段（名称、计数和国家/地区）。但是我在演示中看到它应该显示对象的所有参数。例如，如果对象是这样构造的：

{ "name": "Test1", "country": "Germany", "creationDate": "xxx", "surname": "yyy" }

所以，我希望字段中应该有所有参数，例如姓名、国家/地区、创建日期、姓氏。所以，我一开始是这样做的：我把 $scope.testData = [] 改成了：

$scope.testData = [{ "name": "", "country": "", "creationDate": "", "surname": "" }]

因此该组件将准备所有字段。这行得通。但是，如果服务器给我返回一个具有其他参数的对象怎么办？我怎样才能显示它们？我在调用之后和 reload() 之前尝试过：

    let fields = $scope.pivotGridDataSource.fields();
    let newField = {
        llowExpandAll: false,
        allowFiltering: true,
        allowSorting: true,
        allowSortingBySummary: true,
        caption: "This is a new field",
        dataField: "newField",
        dataType: "string",
        displayFolder: "",
        index: fields.length
    }

    $scope.pivotGridDataSource.fields().push(newField);
    $scope.pivotGridDataSource.reload();

但是还不行。更糟糕的是，它甚至没有初始化 Pivot。

Answer 1

fieldChooser 使用 store 字段，在本例中为 $scope.testData 字段，在您的代码中，我看到您的商店首先被声明（为 null 或使用您描述的某种格式），然后您有一个函数来填充它。

我不知道你的代码是什么样子的，也不知道你为什么要那样创建你的商店，但这基本上是你的问题（流程）。

在sample code中的流程是：

存储数据（在本例中为静态）
PivotGridDataSource
字段选择器

在您的代码中，流程是：

商店（空）
PivotGridDataSource
字段选择器
Store (fill) --> 此时你的 FieldChooser 已经用空版本的 store 的字段初始化，所以没什么可做的（在 Jquery 你可以重新- 创建您的对象，您可以使用 Jquery within AngularJs see a simple code sample here 及以下）

$('#chartContainer').dxChart('instance').dispose(); $('#chartContainer').dxPieChart({ ... });

要避免所有这些，您可以使用 DevExpress.data.CustomStore，您的流程将与演示基本相同。

使用 AngularJS 在 DevExpress Pivot 中添加字段

Add fields in DevExpress Pivot using AngularJS

javascript

pivot

devexpress

angularjs

devextreme