如何将HTML表绑定到kendo ui treeview

Question

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

父母|儿童

item0 | ITEM1 item1 | ITEM2 item1 |项目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");