Question

我有一个剑道树视图，其构建如下代码（见下文）。每个树节点都有一个唯一的数据ID字段（即员工ID）。

我想有一个文本框（<input type="text" ... />）和一个按钮（<input type="button" ... />），因此用户可以输入一些ID，当她点击按钮时，按钮点击事件处理程序将让树视图展开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?
}

现有的剑道树视图建筑代码详情：

<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

您可以访问树视图上的数据源并按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>

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/

Answer 2

略有关联，但我来到这里寻找这个问题的答案：如何在角度树视图中单击父节点时展开整个分支？由于我没有找到任何答案，我在这里发布我的解决方案。希望它可以帮到某人。

HTML

        <div id="treeview" kendo-tree-view="tree" k-options="options" k-on-change="selectItem(dataItem)">
     </div>

控制器

    $scope.options = {
        dataSource: dummyData,
        template: $scope.treeItemTemplate
    }

    $scope.treeItemTemplate = "<button ng-click='expandRoot(dataItem)'>Blow up</button>";

    $scope.expandRoot = function expandRoot(dataItem) {
        dataItem.expanded = true;

        if (dataItem.hasChildren) {
            dataItem.load()
            var children = dataItem.children.data();
            children.forEach(function (c) {
                c.expanded = true;
                $scope.expandRoot(c)
            });
        }
    }

如何以编程方式扩展Kendo树视图的节点

2 个答案:

HTML

JAVASCRIPT

的jsfiddle