kendo 将 HTML 元素绑定到网格选定的行/dataItem

Posted 2023-05-07

【中文标题】kendo 将 HTML 元素绑定到网格选定的行/dataItem

【英文标题】：kendo bind HTML elements to grid selected row/dataItem

【发布时间】：2012-11-27 22:22:35

【问题描述】：

我有以下情况（使用 KendoUI）：

我有一个绑定到数据源的网格。 当我在网格中选择一行时，我会调用其“更改”事件来获取选定的数据项，并通过其他 html 元素显示其值。

类似于以下内容：

$("grid-element").kendoGrid(
    change: setElements
);

function setElements() 
    var grid = $("#grid-element").data("kendoGrid");
    var selectedItem = grid.dataItem(grid.select());

    $("#span-field1").text(selectedItem.field1);
    $("#span-field2").text(selectedItem.field2);
    $("#span-field3").text(selectedItem.field3);

我的问题是：是否有可能通过 MVVM 或更好的 KendoUI 模型绑定解决方案来实现？

【问题讨论】：

我不熟悉 MVVM 的东西，但仅供参考 - 在更改事件中，您可以使用 'this' 访问网格。

【参考方案1】：

到目前为止，我找到了以下解决方案：

=== javascript ===
var vm = kendo.observable(
    gridSelectedItem: null,

    _field1: function()  
        return this.get("gridSelectedItem.field1"); 
    ,
    _field2: function()  
        return this.get("gridSelectedItem.field2"); 
    
);

$("#grid-element").kendoGrid(
    change: function(e) 
        var selectedItem = this.dataItem(this.select());
        vm.set("gridSelectedItem", selectedItem);
    
);


=== HTML ===
<span data-bind="text: _field1"></span>
<span data-bind="text: _field2"></span>

有没有更好的办法？

【参考方案2】：

确实，你在正确的轨道上，

以下是我可以建议您尝试的方法：

=== JAVASCRIPT ===
var vm = kendo.observable(
    gridSelectedItem: null    
);

$("#grid-element").kendoGrid(
    change: function(e) 
        var selectedItem = this.dataItem(this.select());
        vm.set("gridSelectedItem", selectedItem);
    
);


=== HTML ===
<span data-bind="text: gridSelectedItem.field1"></span>
<span data-bind="text: gridSelectedItem.field2"></span>

应该稍微紧凑一些。

【讨论】：

是的，谢谢。但实际上有些情况我需要对数据应用自定义格式（例如“kendo.toString(value, "p1")"），所以我更喜欢在模型中保留字段。