Kendo ui 无法在剑道网格MVC中添加同时计算列
我已经在我的应用程序中实现了剑道网格内联编辑。我的网格中有百分比和百分比金额列，它们是基于基本金额计算的 我想，当用户更改百分比，然后百分比金额应自动计算。此外，当用户更改百分比金额时，应自动计算百分比 我创建这个来展示实现 以下是我目前使用的代码：Kendo ui 无法在剑道网格MVC中添加同时计算列,kendo-ui,dojo,kendo-grid,kendo-asp.net-mvc,Kendo Ui,Dojo,Kendo Grid,Kendo Asp.net Mvc,我已经在我的应用程序中实现了剑道网格内联编辑。我的网格中有百分比和百分比金额列，它们是基于基本金额计算的 我想，当用户更改百分比，然后百分比金额应自动计算。此外，当用户更改百分比金额时，应自动计算百分比 我创建这个来展示实现 以下是我目前使用的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</titl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<button onClick="reset()" class="k-button">Reset test data</button>
<div id="grid"></div>
<script>
function setTestData(){
var testData = [
{ID: 1, Value: "TEST1", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
{ID: 2, Value: "TEST2", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
{ID: 3, Value: "TEST3", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
{ID: 4, Value: "TEST4", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
{ID: 5, Value: "TEST5", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50}
];
localStorage["grid_data"] = JSON.stringify(testData);
}
function reset(){
setTestData();
$("#grid").data("kendoGrid").dataSource.read();
}
$(document).ready(function () {
if(localStorage["grid_data"] == undefined){
setTestData();
}
var dataSource = new kendo.data.DataSource({
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
},
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number", editable: false },
Value: { type: "string", editable: false },
BaseAmount:{type: "number" , editable: false},
IncreasePercentage:{type: "number"},
IncreaseAmount:{type: "number"}
}}
},
pageSize: 20
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 500,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "ID", width: "100px" },
{ field: "Value", width: "100px"},
{ field: "BaseAmount", width: "150px"},
{ field: "IncreasePercentage", width: "150px"},
{ field: "IncreaseAmount", width: "150px"},
{ command: ["edit"], width: "150px" }
],
editable: "inline",
}).data("kendoGrid");
});
</script>
</body>
</html>
剑道UI片段
重置测试数据
函数setTestData（）{
var testData=[
{ID:1，值：“TEST1”，BaseAmount:500，IncreasePercentage:10，IncreaseAmount:50}，
{ID:2，值：“TEST2”，BaseAmount:500，IncreasePercentage:10，IncreaseAmount:50}，
{ID:3，值：“TEST3”，BaseAmount:500，IncreasePercentage:10，IncreaseAmount:50}，
{ID:4，值：“TEST4”，BaseAmount:500，IncreasePercentage:10，IncreaseAmount:50}，
{ID:5，值：“TEST5”，BaseAmount:500，IncreasePercentage:10，IncreaseAmount:50}
];
localStorage[“grid_data”]=JSON.stringify（testData）；
}
函数重置（）{
setTestData（）；
$（“#网格”）.data（“kendoGrid”）.dataSource.read（）；
}
$（文档）.ready（函数（）{
if（本地存储[“网格数据”]==未定义）{
setTestData（）；
}
var dataSource=new kendo.data.dataSource({
运输：{
创建：函数（选项）{
var localData=JSON.parse（localStorage[“grid_data”]）；
options.data.ID=localData[localData.length-1].ID+1；
localData.push（options.data）；
localStorage[“grid_data”]=JSON.stringify（localData）；
选项。成功（选项。数据）；
},
阅读：功能（选项）{
var localData=JSON.parse（localStorage[“grid_data”]）；
options.success（localData）；
},
更新：功能（选项）{
var localData=JSON.parse（localStorage[“grid_data”]）；
对于（var i=0；i您可以通过change
事件监听数据源上的更改：
var dataSource = new kendo.data.DataSource({
change: function(e) {
// only triggered when the item changes
if (e.action !== 'itemchange') {
return;
}
if (e.field === 'IncreasePercentage') {
$.each(e.items, function(i, item) {
// calling item.set also triggers the change event, so we need to prevent infinite loops
var newIncreaseValue = item.BaseAmount * item.IncreasePercentage/100;
if (item.IncreaseAmount !== newIncreaseValue) {
item.set('IncreaseAmount', newIncreaseValue);
}
});
} else if (e.field === 'IncreaseAmount') {
$.each(e.items, function(i, item) {
// calling item.set also triggers the change event, so we need to prevent infinite loops
var newIncreaseValue = 100 * item.IncreaseAmount / item.BaseAmount;
if (item.IncreasePercentage !== newIncreaseValue) {
item.set('IncreasePercentage', newIncreaseValue);
}
});
}
});
根据您的需要，您可以使用各种事件；数据源本身（如我的示例）或网格本身
- 数据源上的事件：
- 网格上的事件：
感谢您的努力，但此解决方案不起作用。当用户按“更新”时，这将更改百分比按钮。但我想在按下“更新”按钮之前实现百分比或百分比金额更改的逻辑。有解决方法吗？我已根据您的评论更新了我的答案。它将在单击“更新”按钮之前起作用，但只有在触发数字文本框的更改事件时才起作用（因此，只有在按下enter键时，或者在失去焦点时）。