如何编辑 MVVM 剑道网格中的特定列？答案

【问题标题】：How to edit specific column in MVVM kendo grid?如何编辑 MVVM 剑道网格中的特定列？
【发布时间】：2016-10-25 08:58:12
【问题描述】：

我正在处理需要编辑剑道网格中的一列的要求。但是在网格中，我们根据条件显示了一些列。问题是当我们编辑列时它以隐藏列开头。

编辑项目栏后，它会显示 AreSkusInUse 栏：

这是我的 MVVM 代码：

<div id="BomEditorGrid"
 class=""
 data-role="grid"
 data-resizable="true"
 data-sortable="false"
 data-filterable='{ "extra":false, "operators": { "string": { "contains":"Contains", "doesnotcontain" : "Does not contain", "startswith":"Starts with", "endswith": "Ends with", "eq": "Equal to", "neq" : "Not equal to" } }}'
 data-bind="source: bomEditorDataSource"
 data-editable='{"mode": "incell", "template": kendo.template($("#bomEditorEditTemplate").html()) }'
 data-row-template="bomEditorRowTemplate"
 data-alt-row-template="bomEditorAltRowTemplate"
 data-columns='[
 {"field": "Selected", "title": "Selected", "filterable": false , "sortable": false, "headerTemplate": kendo.template($("#gridHeaderWithCheckboxTemplate").html()), width: 100},
 {"field": "AreSkusInUse",  "title": "SKUs In Use", hidden: true},
 {"field": "ItemCd",  "title": "Item Code"},
 {"field": "DesignItemNm",  "title": "Item"},
 {"field": "ChildQty",  "title": "Child Qty", "filterable": false, width: 100},
 {"field": "TemplateDsc",  "title": "Template"},
 {"field": "ParentItemNm", "title": "Parent", hidden: true},
 {"field": "CreatedByBookNm",  "title": "Created By"},
 {"field": "MaterialTypeCd",  "title": "Material Type", hidden: true, "template": kendo.template($("#MaterialTypeColumnTemplate").html())},
 {"field": "DesignGroup", "title": "DesignGroup", hidden: true},
 {"field": "CrudType", "title": "Change", "filterable": false}
 ]'>

这里是编辑器模板：

<script id="bomEditorEditTemplate" type="text/x-kendo-tmpl">
<tr data-uid='#= uid #'>
    <td><input type="checkbox" class="cb-itemSelected" data-bind='checked:Selected' /></td>
    # if (BomEditorType === "PFAM") {#
    <td>#: AreSkusInUse #</td>
    #}#
    <td>#: ItemCd #</td>
    <td>#: DesignItemNm #</td>
    <td><input type="text" data-bind="value: ChildQty" /></td>
    # if (MaterialTypeCd !== "DIEN" && MaterialTypeCd !== "FERT") {#
    <td>#: TemplateDsc #</td>
    #}#
    <td>#: CreatedByBookNm #</td>
    # if (BomEditorType === "FERT") {#
    <td>#: MaterialTypeCd #</td>
    #}#
    <td> <img data-bind="attr:{ class: ChangeIndicatorCssClass}" src="/5/DesignItem/Content/Images/Transparent.gif" /> </td>
</tr>

在这里我们可以看到 AreSkusInUse 列根据条件显示。

所以我需要两个帮助：
如何将 Child Qty 以外的所有列设置为可编辑的 false。
我该如何解决编辑问题。编辑时应显示相应的归档数据。

谢谢

【问题讨论】：

标签： jquery kendo-ui kendo-grid kendo-mvvm

【解决方案1】：

“如何将子数量以外的所有列设置为可编辑假”
您可以设置架构以将字段设置为可编辑：false
```
ItemCd: { type: "string", editable: false }
```

“如何解决编辑问题。编辑时应显示相应的归档数据。”
在模板中指定字段值

<tr data-uid='#=uid#'>
  <td>
    <input type="number" value="#:ChildQty#" data-bind="value: ChildQty">
  </td>
</tr>

【讨论】：