使用 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 中的流程是：

1. 与数据一起存储（在本例中为静态）
2. PivotGridDataSource
3. 字段选择器

在您的代码中，流程是：

1. 存储（空）
2. PivotGridDataSource
3. 字段选择器

4. Store (fill) --> 此时您的 FieldChooser 已使用商店的空版本的字段进行初始化，因此无需做太多事情（在 Jquery 中，您可以重新创建对象，您可以使用 @ 987654322@见简单code sample here及以下）

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

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