使用AngularJS在DevExpress Pivot中添加字段

我正在寻找这个模板来构建一个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" }

所以，我期望在这个领域里应该有所有的参数，所以名字，国家，creationDate，姓氏。 所以，我在开始时这样做了：我将$ 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();

但它还没有工作。 更糟的是，它甚至不初始化枢轴。

---

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

我不知道你的代码的外观以及你为什么以这种方式创建你的商店，但这基本上是你的问题（流程）。

在示例代码中，流程是：

存储数据（在这种情况下是静态的）

PivotGridDataSource

FieldChooser

在你的代码中，流程是：

商店（空）

PivotGridDataSource

FieldChooser

存储（填充） - >在这一点上你的FieldChooser已经初始化为商店的空白版本的字段，所以不需要做太多的事情（在Jquery中你可以重新创建你的对象，你可以在AngularJs中使用Jquery一个简单的代码示例在这里和下面）

$（ '＃chartContainer'）dxChart（ '实例'）处置（）。 $（'＃chartContainer'）。dxPieChart（{...}）;

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

链接地址: http://www.djcxy.com/p/31117.html

上一篇: Add fields in DevExpress Pivot using AngularJS

下一篇: Cannot scroll page