如何将 HTML 表格绑定到剑道 UI 树视图

Question

我有一个像这样的平面 HTML 表格：

父 |孩子

项目0 |项目1
项目1 |项目2
项目1 |项目3

有没有一种方法可以让我使用 Kendo UI TreeView 基于该表创建一个具有父列和子列的树？如果有，我该怎么做？如果没有，用 HTML 表格构建树的最佳推荐方法是什么？

Answer 1

如果你可以为treeview提供数据源会更好，但是如果你有上面所说的html表，那么你必须为treeview创建数据源然后绑定它。

我已经为它创建了示例 jsfiddle http://jsfiddle.net/GHdwR/41/

享受:)

var DataTable = $("#DataTable")
var Newdata = [];
DataTable.find("td").each(function () {
    var Text = $(this)[0].innerText;
    var item = {
        text: Text
    };
    var ParentNodeValue = FindParentNodeValue(DataTable, Text);
    if (ParentNodeValue === "" && GetItemFormText(ParentNodeValue) === undefined) {
        Newdata.push(item);
    } else {
        var InsertChildInTo = GetItemFormText(ParentNodeValue);
        var childAlreadyPresent = GetItemFormText(Text);
        if (InsertChildInTo !== undefined && childAlreadyPresent === undefined) {
            if (InsertChildInTo.items === undefined) InsertChildInTo.items = [];

            InsertChildInTo.items.push(item);
        }
    }

});

function GetItemFormText(Text) {

    var temp = undefined;
    for (var j = 0; j < Newdata.length; j++) {
        temp = GetDataItemFromChild(Text, Newdata[j]);
        if (temp !== undefined) {
            return temp;
            break;
        }
    }
}

function GetDataItemFromChild(Text, aDataItem) {
    if (aDataItem.text === Text) {
        return aDataItem;
    }

    var temp = undefined;

    if (aDataItem.items !== undefined) {
        for (var j = 0; j < aDataItem.items.length; j++) {
            temp = GetDataItemFromChild(Text, aDataItem.items[j]);
            if (temp !== undefined) {
                break;
            }
        }
    }
    return temp;
}

function FindParentNodeValue(DataTable, Text) {

    var returnVal = "";
    DataTable.find("tr").each(function () {
        var childText = $(this).find("td")[1].innerText;
        if (Text === childText) {
            returnVal = $(this).find("td")[0].innerText;
        }

    });
    return returnVal;
}

var ds = new kendo.data.HierarchicalDataSource({
    data: Newdata
});

var treeview = $("#treeview").kendoTreeView({
    dataSource: ds,
    loadOnDemand: false
}).data("kendoTreeView");

treeview.expand(".k-item");