我使用Kendo.Grid和TypeScript作为数据源,我拥有本地数据。网格单元之一可以编辑,但是数据没有变化。 1)如何进行更改自动影响数据源? 2)或在事件“ onValueChange”中如何知道单元格数据并将其手动写入数据源 并更新网格?
<div class="wrapper">
<div id="my-grid"></div>
</div>
export class MyGrid {
myGrid: kendo.ui.Grid;
myData: any[];
data: any = {};
// [{ Year: "2019", Value: 10 }, {Year: "2020", Value: 20 }]
constructor(myData: any[]) {
let that: MyGrid = this;
this.myData = myData;
$(#my-grid).kendoGrid({
dataBound: function (e) {
this.tbody.find(".myTextBoxValue").each(function () {
$(this).kendoNumericTextBox({
format: "n3",
decimals: 3,
change: that.onValueChange.bind(that)
});
});
}
});
this.myGrid = $(#my-grid).data("kendoGrid");
}
setColumns(): void {
var columns = [];
columns.push({ field: "First", title: "First column" });
this.data.First = "First column data";
for (let i in this.myData) {
let fieldName: string = "Y" + this.myData[i].Year;
columns.push(
{
field: fieldName, // or null
title: "" + this.myData[i].Year + "",
template: "<input class='myTextBoxValue' value='#: " + fieldName + " #' />"
});
this.data[fieldName] = this.myData[i].Value;
}
columns.push({ field: "Total", title: "Total" });
this.data["Total"] = this.getTotalValue();
let dataSrc = [];
dataSrc.push(this.data);
this.myGrid.setOptions({
columns: columns,
dataSource: dataSrc
});
}
getTotalValue() {
// there are always values before any changes
// ???
}
onValueChange(e: any): void {
let t = this.getTotalValue();
// ???
}
}