kendo-ui - 如何以编程方式扩展Kendo treeview的节点

Question

我有一个按照以下代码构建的 Kendo Treeview (见下文)。每个树节点都有一个唯一的数据 ID 字段(即员工 ID)。

我想要一个文本框( <input type="text" ... /> )和一个按钮( <input type="button" ... /> )，以便用户可以输入一些 id，当她点击按钮时，按钮单击事件处理程序将使 Treeview 展开其 id 匹配的节点输入 ID。我怎样才能做到这一点？非常感谢。

单击事件处理程序或按钮的详细信息:

function buttonExpand_onClick()
{
   var id = $("textboxEmployeeId").val();

   // ???
   // how can I do the following code lines to expand the node with id of "id" to see all its children?
}

现有 Kendo Treeview 建筑规范的详细信息:

<div id="treeviewEmployee">

</div>

<script id="treeview-template" type="text/kendo-ui-template">
            #: item.text #

</script>

$(function(
{
     var defaultRootSelectedId = 1; // 1 is employee id of the root employee on first loading   

$.ajax({
                url: '/Employee/AjaxGetEmployeeNodes/?id=' + defaultRootSelectedId,
                type: 'GET',
                dataType: 'json',
                async: false,
                success: function (data, textStatus, xhr) {
                    $("#reeviewEmployee").kendoTreeView({
                        template: kendo.template($("#treeview-template").html()),
                        dataSource: data,
                        select: treeview_onSelect


                    });

                    _treeview = $("#treeviewEmployee").data("kendoTreeView");


                },
                error:
                    function (xhr, textStatus, errorThrown) {
                        alert(textStatus);
                    }
            });

});

Answer 1

您可以访问 Treeview 上的数据源并通过 id 查找节点。我还想补充一点，treeView 也有一个 'findByText()' 方法，以防万一这是你想要的。

HTML

<script id="treeTemplate" type="text/x-kendo-template">
    #: item.text #
</script>

<div id="content">
    <div id="form">
        <label>Node ID:
            <input id="nodeId" type="text"/>
        </label>
        <button id="expandNodeBtn">Expand Node</button>
    </div>
    <h2>TreeView</h2>
    <div id="treeView"/>
</div>

java 脚本

(function ($) {
    $(document).ready(function () {
        $("#treeView").kendoTreeView({
            dataSource: [
                {
                    text: 'one with id 1',
                    id: 1,
                    items: [
                        {
                            text: 'one-child-1',
                            id: 2
                        },
                        {
                            text: 'one-child-2',
                            id: 3
                        }
                    ]
                },
                {
                    text: 'two with id 4',
                    id: 4,
                    items: [
                        {
                            text: 'two-child-1',
                            id: 5
                        },
                        {
                            text: 'two-child-2',
                            id: 6
                        }
                    ]
                }
            ]
        });
        $("#expandNodeBtn").on("click", function(e) {
            var val = $("#nodeId").val();
            console.log('val: ' + val);
            var treeView = $("#treeView").data('kendoTreeView');
            var dataSource = treeView.dataSource;
            var dataItem = dataSource.get(val); // find item with id = 5
            var node = treeView.findByUid(dataItem.uid);            
            treeView.expand(node);
        });
    });
})(jQuery);

JSFiddle

我还整理了一个 JSFiddle 示例供您使用: http://jsfiddle.net/jsonsee/D35Q6/