如何以编程方式扩展剑道树视图的节点 [英] How to programatically expand a node of Kendo treeview

问题描述

我有一个Kendo树状视图，按以下代码构建(请参见下文).每个树节点都有一个唯一的数据ID字段(即员工ID).

I have a Kendo treeview that is built as below codes (see below). Each tree node has a unique data id field (that is employee Id).

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

I would like to have a text box ( <input type="text" ... /> ) and a button ( <input type="button" ... /> ) so user can input some id and when she hit the button, the button click event handler will let the treeview expand the node whose id matches the input id. How can I do that? Thank you very much.

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

Details of click event handler or the button:

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?
}

现有剑道树状建筑代码的详细信息:

Details of the existing Kendo treeview building codes:

<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);
                    }
            });

});

推荐答案

您可以在树视图上访问数据源，并按ID查找节点.我还要补充一点，treeView也有一个'findByText()'方法，以防万一，就是您想要的.

You can access the datasource on the treeview and find the node by id. I would also like to add that the treeView has a 'findByText()' method as well, in case that is what you want.

<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>

JAVASCRIPT

(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/

这篇关于如何以编程方式扩展剑道树视图的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！