Kendo UI TreeView 自定义属性答案

【问题标题】：Kendo UI TreeView custom attributesKendo UI TreeView 自定义属性
【发布时间】：2014-01-06 13:37:23
【问题描述】：

我有一个使用本地数据绑定的剑道树

我的代码一切正常。

但是，我正在尝试将自定义属性添加到生成的项目中，例如 data-name。

我怎样才能使用kendo.data.HierarchicalDataSource 做到这一点？

// bind kendo tree
var treeDataSource = new kendo.data.HierarchicalDataSource({
    data: [{ Id: "id", Text: "Node 1", HasChildren: false, ChildrenFolders: [], HtmlAttributes: { "data-name": "Custom Name" } }],
    schema: {
        model: {
            children: "ChildrenFolders",
            hasChildren: "HasChildren",
            id: "Id",
            htmlAttributes: "HtmlAttributes"
        }
    }
});

this.kendoTreeView = $("#tree").kendoTreeView({
    dataSource: treeDataSource,
    dataTextField: "Text",
    loadOnDemand: false
}).data("kendoTreeView");

【问题讨论】：

标签： javascript kendo-ui kendo-treeview

【解决方案1】：

您必须替换树视图小部件中的项目模板，不幸的是，这意味着替换整个 _template 方法。我建议手动创建 DOM 结构（如 here 所做的那样），这样您就可以在初始化树视图之前设置属性。另一种选择是使用树视图的template 选项（在这种情况下，您只能在子元素上添加属性）。

【讨论】：

+1 用于手动创建 DOM 感谢您指出这一点

【解决方案2】：

你可以使用dataItem()获取dataSource项属性，方法以jQuery选择器为参数：

var treeview = $("#treeview").kendoTreeView({
                        animation: false,
                        dataSource: dataSource,
                        select: function (e) {
                            var dataitem = treeview.dataItem("#treeview_tv_active");
                            //dataitem.HtmlAttributes
                        }
                    }).data("kendoTreeView");

【讨论】：

不鼓励仅使用代码回答。请添加一些行来解释为什么这个解决方案有效。