首页 文章

使用简单的分层数据源在Kendo TreeView中设置显示名称

提问于
浏览 次
1

我在显示或映射Kendo TreeView的父对象和子对象的显示名时遇到了麻烦 .

以下内容用作数据源的基本设置：

<div id="list-of-devices"</div>

// somewhere in my script
var inline = new kendo.data.HierarchicalDataSource({
    data: [
        {
            "DeviceGroupId": 1,
            "DeviceGroupName": "Superdeluxe Devices",
            "Devices": [
                {
                    "DeviceId": 1000,
                    "DeviceName": "My First Device"
                },
                {
                    "DeviceId": 1001,
                    "DeviceName": "My Second Device"
                }
            ]
        }
    ],
    schema: {
        model: {
            children: "Devices"
        }
    }

});

当我使用 .kendoTreeview 函数直接初始化树视图时，它可以工作 . 像这样：

// initialize the treeview
$("#list-of-devices").kendoTreeView({
    dataSource: inline,
    dataTextField: ["DeviceGroupName", "DeviceName"]
});

这部分的魔力是最后一行代码，我为组和子项设置了不同的 dataTextField . 再次，这是有效的！

但是，如果我将其转换为MVVM示例，我不确定如何正确设置它 .

MVVM示例：

<div id="container">
    <div id="list-of-devices" class="devices"
         data-role="treeview"
         data-text-field="dataTextField" <!-- HOW TO DO THIS? -->
         data-bind="source: data">
     </div>
 </div>

var viewModel = kendo.observable({
    data: inline,
    dataTextField: ["DeviceGroupName", "DeviceName"] // <-- HOW TO DO THIS?
});

kendo.bind($("#container"), viewModel);

虽然它确实有效，例如抛出没有错误，所有标签在我的树视图中显示为“未定义” .

问题是：如何相应地设置或绑定dataTextField以使树视图正确地吐出组和子项的名称？

mvvm kendo-ui kendo-treeview

1 回答

  • 1

    基本上，你应该做的是将其定义为：

    <div id="list-of-devices" class="devices"
     data-role="treeview"
     data-text-field="['DeviceGroupName', 'DeviceName']"
     data-bind="source: data">
 </div>

    将 data-text-field 设置为值，就好像它是一个JavaScript数组，但是在引号之间 . 无需在 ObservableObject 中定义它 .

    在这里查看：http://jsfiddle.net/OnaBai/38pk73ty/

    回复于

相关问题