计算字段未使用 Kendo-UI 网格和 AngularJS 更新答案

【问题标题】：Calculated field not updating with Kendo-UI grid and AngularJS计算字段未使用 Kendo-UI 网格和 AngularJS 更新
【发布时间】：2014-08-30 22:09:39
【问题描述】：

我有一个带有订单行的 kendo-ui 网格。有一个Qty、Price 和Total 列。 Total 列计算为( Qty x Price )。

为了进行编辑，我使用了一个自定义弹出窗口，它显示一些附加信息并让用户更改Qty 和Price。当他们这样做时，我希望 Total 在自定义编辑表单中自动更新。

这里是总列的网格列定义：

{
   field: "total",
   title: "Total",
   width: 60,
   template: "#=qty*price#"
}

这是编辑表单中的输入字段：

<input name="total" style="width: 60px" />

问题出在：当我在编辑表单中更改数量或价格时，总数仅在网格中更新（位于弹出编辑表单下方），但总数编辑表单中的字段没有（它是空的）。

作为测试，我将#=total# 和#=qty*price# 都放在了编辑表单中；

前者为空
后者是静态数字，它是表单渲染时的计算

它没有得到更新。

这是一个显示问题的 Plunker： http://plnkr.co/edit/cZw18btauqb9RPEpd5Kc?p=preview

如何计算编辑表单中的总字段？ （最好使用 Kendo-ui 模板机制或 AngularJS，但 jQuery hack 会作为最后的手段）？

【问题讨论】：

标签： angularjs kendo-ui

【解决方案1】：

模板不提供双向数据绑定，因此它们在首次生成后不会自动更新。

您可能希望在数据源架构中为您的模型使用计算字段：

schema: {
    model: {
        id: "itemNo",
        fields: {
            id: {
                type: "string",
                editable: false
            },
            price: {
                type: "number"
            },
            qty: {
                type: "number"
            }
        },
        total: function () {
            return this.get("qty") * this.get("price");
        }
    }
},

(demo)

【讨论】：

【解决方案2】：

此外，如果您使用“incell”编辑，您可以使用网格数据源的“更改”事件来跟踪连接字段的更改并强制更新计算字段。这样的例子可能是：

Grid: Incell editing with calculated column auto refresh

【讨论】：