0

我有一个数据源，有两个字段，比如年和月，我必须将它们组合在一起才能像一列中的一个字段一样显示，当点击编辑按钮时，每个字段都会有自己的下拉列表。

例如，我有类似的数据{ 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);
4

1 回答 1

0

这是一个简单的 dojo，应该允许您绑定自定义内联编辑器。

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>

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

于 2019-08-14T12:28:42.647 回答