Question

我正在寻找具有一些丰富的数据透视表功能的UI组件。

我看了一眼ag-grid。似乎是合适的，但它不是免费的，目前这不是一个选择。也许在将来它是可能的，但现在它必须是免费的。

如果没有针对角度2的选项，那么使用vanilla javascript组件进行解决是个好主意吗？

Answer 1

从Ignite UI推荐 igPivotGrid -

样本组件 -

import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
import {IgPivotDataSelectorComponent, IgPivotGridComponent} from "./src/igniteui.angular2.ts";
import {bootstrap }    from '@angular/platform-browser-dynamic'

declare var jQuery: any;
@Component({
    selector: 'my-app',
    templateUrl: "./igPivotGrid-XmlaDataSourceTemplate.html",
    directives: [IgPivotDataSelectorComponent, IgPivotGridComponent]
})
export class AppComponent {
    private optsGrid: IgPivotGrid;
    private optsSelector: IgPivotDataSelector;
    private selectorId: string;
    private gridId: string;
    private data: any;

    constructor() {
        this.data =  new jQuery.ig.OlapXmlaDataSource({
            serverUrl: 'http://sampledata.infragistics.com/olap/msmdpump.dll',
            catalog: 'Adventure Works DW Standard Edition',
            cube: 'Adventure Works',
            rows: "[Ship Date].[Calendar]",
            columns: "[Delivery Date].[Calendar]",
            measures: "[Measures].[Product Gross Profit Margin Status],[Measures].[Product Gross Profit Margin Goal]",
        });

        this.selectorId = "dataSelector";
        this.gridId = "pivotGrid";

        this.optsGrid = {
            dataSource: this.data,
            height: "650px"
        };

        this.optsSelector = {
            dataSource: this.data,
            height: "650px",
            width: "30%"
        };
    }
}

bootstrap(AppComponent);

html模板：

<h1 class="push-down-md">igPivotGrid  using XmlDataSource</h1>

<div class="row">
    <div class="col-md-12">
        <ig-pivot-grid [(widgetId)]="gridId" [(options)]="optsGrid">
        </ig-pivot-grid>
        <ig-pivot-data-selector [(widgetId)]="selectorId" [(options)]="optsSelector">
        </ig-pivot-data-selector>
    </div>
</div>

这可能符合您的要求。看看这是否有帮助。

角度2的数据透视表组件？

1 个答案: