简单的editTemplate给出TypeError答案

【问题标题】：Simple editTemplate giving TypeError简单的editTemplate给出TypeError
【发布时间】：2021-05-27 05:39:59
【问题描述】：

为了演示，我添加了一个简单的editTemplate：

$(document).ready(function() {
  $("#grid").jsGrid({
    autoload: true, width: "100%", editing: true,

    data: [ { d:111}, { d:222}],

    fields: [
      { name: "d", type: "number", title: "Value",
        itemTemplate: function(value, item) { 
           return value+1;
        },
        editTemplate: function(value) {
           return `<input type="number" value="${value*2}">`;
        },
      },
      { type: "control"}
    ]
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="grid">
Test
</div>

当我单击编辑时，<input> 控件显示得很好，其值乘以 2。但是当我单击绿色对勾保存编辑时，我得到：

TypeError：无法读取未定义的属性“val”

我已将问题定位到editTemplate。在我删除它的那一刻，它工作正常。

可能是什么原因？

【问题讨论】：

标签： jsgrid

【解决方案1】：

您可以利用提供的现有模板 jsGrid，并从那里更新值

jsGrid.fields.number.prototype.editTemplate

$(document).ready(function() {
  $("#grid").jsGrid({
    autoload: true, width: "100%", editing: true,

    data: [ { d:111}, { d:222}],

    fields: [
      { name: "d", type: "number", title: "Value",
        itemTemplate: function(value, item) { 
           return value+1;
        },
        editTemplate: function(value) {
            var $result = jsGrid.fields.number.prototype.editTemplate.call(this); // original input
            $result.val(value*2);
            return $result;
        },
      },
      { type: "control"}
    ]
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="grid">
Test
</div>

【讨论】：