如何在一列中编辑两个字段并像剑道网格中的一个字段一样显示它们?

Question

我有一个数据源，有两个字段，如年份和月份， 并且我必须将它们组合在一起以像一列中的一个字段一样显示，单击编辑按钮时，每个字段将分别拥有自己的下拉列表。

例如，我有类似{ Year: "2019", Month: "08" }它们应该像201908或 2019/08 一样显示在一列中

我所知道的是使用列模板，例如：

template: "<span>#= Year ##= Month #</span>"

或

template: "<span>#= Year #</span><span>#= Month #</span>"

但似乎我无法在一列中编辑两个或多个字段，我能找到的所有示例都只是编辑一列中的一个字段。

有什么关系吗？

<div id="TargetDiv">
<table id="Grid" data-bind="source: dataSource" class="gridtable"></table>
</div>

这适用于带有HTML5，TypeScript和MVVM框架的Kendo-grid。

我已经在cshtml中定义了网格表

<div id="TargetDiv">
<table id="Grid" data-bind="source: dataSource" class="gridtable"></table>
</div>

并删除了我的代码上的噪音，以使其更易于阅读。年份和月份包含在不同的 HTML 标签中，我尝试在"编辑"中使用编辑模板，但它似乎对我不起作用。

源设置如下：

let vm = {
dataSource: new kendo.data.DataSource({
data: [
{ SN: 1, Year: "2019", Month: "01", Title: "Project1" },
{ SN: 2, Year: "2020", Month: "04", Title: "Project2" },
{ SN: 3, Year: "2020", Month: "09", Title: "Project3" }
],
schema: {
model: {
id: 'SN',
fields: {
SN: {
type: 'number',
editable: false,
nullable: false
}
, 'Year': { type: 'string' }
, 'Month': { type: 'string' }
, 'Content': { type: 'string' }
}
}
}
}),
}

网格设置如下：

$('#Grid').kendoGrid({
columns: [
"SN",
{
title: "YearMonth",
template: "<span>#= Year #</span><span>#= Month #</span>"
},
{
command: {
name: 'edit',
text: { edit: "", update: "", cancel: "" }
},
title: "edit"
}
],
editable: {
mode: "inline"
},
edit: function (e) {
}
});
kendo.bind('#TargetDiv', vm);

Answer 1

这里有一个简单的道场，应该允许你绑定一个自定义的内联编辑器。

https://dojo.telerik.com/uficAxOz/6

我所做的只是将您要编辑的字段绑定到其中一个值。最终，我们将其绑定到哪个字段并不重要，它只需要知道它应该被绑定，然后我们应用一个自定义编辑器函数，然后将其附加到单元格中。 为了使编辑器的编辑更容易，我已将其提取到模板中，然后获取将此html附加到容器对象的函数。

因此，您的字段将如下所示：

{
title: "YearMonth",
field:"Year", 
template: "<span>#= Year #</span><span>#= Month #</span>" ,
editor: customEditor
}

那么编辑器函数是这样的：

function customEditor(container, options) {
var template = $('#editorTemplate').html();
$(template).appendTo(container);
}

模板是这样的：

<script id="editorTemplate" type="text/x-kendo-template"> 
<div> <select data-role="dropdownlist" name="Year">
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>

</select> <select data-role="dropdownlist" name="Month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>

</select> </div>
</script>

我所做的只是确保控件的名称与您在数据源中提供的模型属性的属性字段匹配。