我正在使用 DevExtreme PivotGrid 的 Angular 版本。这是我的代码
import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
import { Service, Sale } from './pivotgrid.service';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import { DxPivotGridComponent } from 'devextreme-angular';
@Component({
selector: 'app-pivotgridsample',
templateUrl: './pivotgridsample.component.html',
styleUrls: ['./pivotgridsample.component.scss'],
providers: [Service]
})
export class PivotgridsampleComponent implements OnInit {
pivotGridDataSource: any;
drillDownDataSource: any;
originalData: Sale[];
@ViewChild("sales", { static: true }) salesPivotGrid: DxPivotGridComponent;
constructor(private service: Service) {
this.originalData = this.service.getSales();
this.pivotGridDataSource = new PivotGridDataSource({
fields: [{
caption: "Region",
width: 120,
dataField: "region",
area: "row"
}, {
caption: "City",
dataField: "city",
width: 150,
area: "row"
}, {
dataField: "date",
dataType: "date",
area: "column"
}, {
groupName: "date",
groupInterval: "year",
expanded: true
}, {
groupName: "date",
groupInterval: "month",
visible: false
}, {
caption: "Total",
dataField: "amount",
dataType: "number",
summaryType: "sum",
format: "currency",
area: "data"
}, {
caption: "Running Total",
dataField: "amount",
dataType: "number",
summaryType: "sum",
format: "currency",
area: "data",
runningTotal: "row",
allowCrossGroupCalculation: true
}],
store: service.getSales()
});
}
onPivotCellClick(e) {
if (e.area == "data") {
let cellValue = e.cell.value == null ? "" : e.cell.value;
let cell = e.cellElement;
this.drillDownDataSource = this.pivotGridDataSource.createDrillDownDataSource(e.cell);
// Check if there is already input attched to cell
if (cell.childNodes.length > 0) {
// Clear Cell content
cell.innerHTML = '';
// Append Textbox
cell.innerHTML = '<input type="text" class="editable" value="' + cellValue + '" style="width:100%;">'
var textBox = cell.querySelector("input.editable");
textBox.focus();
this.drillDownDataSource.load();
let groupData = this.drillDownDataSource._items;
let oData = this.originalData;
let pivotTable = this.salesPivotGrid.instance;
textBox.onkeypress = function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var newValue = textBox.value;
cell.innerHTML = "<span>" + parseInt(newValue) + "</span>";
textBox.remove();
console.log(oData);
for (var i = 0; i < oData.length; i++) {
for (var j = 0; j < groupData.length; j++) {
if (oData[i].id == groupData[j].id) {
oData[i].amount = newValue / groupData.length;
//console.log(drillDownDataSource._items[i].amount);
}
}
}
this.setDataSource(oData)
//pivotTable.option("store", oData);
//pivotTable.dataSource.store = oData;
}
return true;
}
}
}
}
setDataSource(data:any){
alert('can be called');
}
ngOnInit() {
}
}
在这里,我使用PivotGrid的 onPivotCellClick 来处理我的自定义要求。基本上,我将输入附加到网格单元以进行内联编辑,并且我还将按键事件附加到它。
因为,它是纯 JavaScript,我无法从用 JavaScript 编写的输入按键回调函数调用 Angular 方法(即setDataSource )。
有什么办法可以做到这一点吗?