Kendo UI：更新一列数据以更改另一列中的值

Posted 2023-05-07

【中文标题】Kendo UI：更新一列数据以更改另一列中的值

【英文标题】：Kendo UI: Update one columns data on changing value in another column

【发布时间】：2013-04-07 20:21:42

【问题描述】：

场景 我有一个产品详细信息网格，在编辑时会打开一个包含该记录详细信息的弹出窗口。除数量字段外，所有字段都是只读的。因此，当我增加或减少数量时，价格列应根据值反映。 因此，如果 1 的数量为 10，那么当我将数量增加到 2 时，它应该反映为 20。

问题 1) 编辑器的方法我学了一点，数量栏也得用同样的方法吧？？

2) 如何获取价格列的值并更新其值？有没有像编辑器这样的内置方法？我该怎么走？？

以下是我准备的JS fiddle。 http://jsbin.com/ugeref/3/edit

谢谢！！

- 哈迪克

【问题讨论】：

尝试谷歌搜索计算值你会找到相关的例子。

您好 Ona，很高兴看到您的评论..已经访问了您的网站和您的答案..他们提供了最好的解决方案..非常感谢您的回复...是汇总你说的功能？好吧..我会用谷歌搜索出来...你能建议我学习剑道 ui 的任何链接或材料吗？

嗨 Ona，谷歌搜索后..我找不到我的解决方案的相关链接......但是，我得到了 RadControls 的 Telerik 链接，例如。 telerik.com/community/forums/aspnet-ajax/grid/… 但这不是我需要的...谢谢..

你找到this或this了吗

不，我没有找到它们...所以根据第一个，我需要编写另一个名为CalculatePrice的函数并从数量列的编辑器函数中调用它对吗？..然后如何我应该设置值吗？实际上我是新手..如果你检查我的 JSBin 示例，它实际上是一个打开的弹出窗口......所以如果你能解释一下我需要遵循的步骤，那就太好了解决方案...我会用谷歌搜索这些步骤并相应地做 RnD...感谢您的链接..

【参考方案1】：

将您的DataSource 定义为：

var dataSource = new kendo.data.DataSource(
    data  : data,
    schema: 
        model: 
            id    : "Id",
            fields: 
                productName:  editable: false,
                quantity   :  editable: true, type : "number" ,
                price      :  editable: false, type : "number" ,
                total      :  editable: false, type : "number" 
            
        
    
);

您应该在其中添加quantity 乘以price 的total 字段。 注意：另外，我已经定义了不同字段的类型，让 KendoUI 知道它们是数字并生成正确的小部件。

然后，将grid 定义为：

$("#grid").kendoGrid(
    dataSource: dataSource,
    pageable  : true,
    height    : 400,
    toolbar   : ["create"],
    columns   : [
         field: "productName", title: "Product Name" ,
         field: "quantity", title: "Quantity", format: "0:c",
         field: "total", title: "Total", template: "#= quantity * price #", width: "150px" ,
         command: ["edit", "destroy"], title: " " 
    ],
    editable  : "popup"
);

我在其中添加了一个 Total 列，该列使用的模板是 quantity * price 的结果。

每次更新quantity，total 都会得到updated。

见here中修改的代码

【讨论】：

您好 Ona，非常感谢您的宝贵回复！然而，小提琴工作正常......但如果我只有一列呢？我必须即时更改值？我的意思是而不是添加总计列（添加总计列确实有意义）..我该怎么做？

你的意思是price是quantity乘以一个常数吗？常量10 的值是多少？请告诉我，我会更新示例。

Ummmm...不...您的编辑足以让我修复 :) 谢谢 Ona！ :)

嗨 Ona，我正在询问有关类似情况的查询，但在这种情况下，数量列默认为文本框或自动完成。[链接]jsbin.com/ugeref/10/edit 当我更改数量时，总计栏应自动更新...如何在数量栏更改时刷新总计栏？有没有内置的方法？公式是相同的价格 * 数量 = 总数 ...

抱歉，为什么数字 (quantity) 是文本框而不是 NumericTextBox？你为什么将input 定义为模板（这打破了网格是observable 的事实？不确定你想要得到什么，但似乎这不是最简单的方法