无法在ken​​do网格MVC中添加同时计算的列

时间：2018-02-12 09:25:23

标签： kendo-ui dojo kendo-grid kendo-asp.net-mvc

我已在我的应用程序中实现了剑道网格内联编辑。我的网格中的列百分比和百分比金额是根据基本金额计算的。

我希望当用户更改百分比时，应自动计算百分比金额。此外，当用户更改百分比金额时，应自动计算百分比。

我创建了这个dojo来显示实现。

以下是我目前使用的代码：

<!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>

预期行为：

  1. BaseAmount = 500，百分比（由用户输入）= 10，PercentageAmount（Auto Caluclated）= 50
  2. BaseAmount = 500，百分比（自动计算）= 10，PercentageAmount（由用户输入）= 50

    3. 我正在使用Kendo MVC网格但我不能创建dojo，因此我提供了jquery API。有没有办法在ken​​do网格中添加两个同时计算的列？

1 个答案:

答案 0 :(得分：2)

您可以使用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);
      }
    });
  }
});

根据您的需要，您可以使用各种活动;无论是在数据源本身（如我的例子），还是在网格本身上。

相关问题
最新问题