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

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

我希望有一个文本框（

）和一个按钮（

），这样用户可以输入一些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?
}

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

});

#：item.text#
$（函数）(
{
var defaultRootSelectedId=1；//1是第一次加载时根员工的员工id
$.ajax({
url:“/Employee/AjaxGetEmployeeNodes/？id=”+defaultRootSelectedId，
键入：“GET”，
数据类型：“json”，
async:false，
成功：函数（数据、文本状态、xhr）{
$（“#reeviewEmployee”）.kendoTreeView({
模板：kendo.template（$（“#树视图模板”）.html（），
数据源：数据，
选择：treeview_onSelect
});
_treeview=$（“#treeview员工”）.data（“kendoTreeView”）；
},
错误：
函数（xhr、textStatus、errorshown）{
警报（文本状态）；
}
});
});

您可以访问treeview上的数据源，并通过id查找节点。我还想补充一点，treeview也有一个“findByText（）”方法，以防您需要它

HTML JSFIDLE

---

我还为您准备了一个JSFIDLE示例：

稍微相关，但我来这里是想找到这个问题的答案：当单击angular treeview中的父节点时，如何扩展整个分支？因为我没有找到任何答案，所以我将我的解决方案发布在这里。希望它能对其他人有所帮助

html

控制器

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

$scope.options={
数据源：dummyData，
模板：$scope.treeItemTemplate
}
$scope.treeitemplate=“放大”；
$scope.expandRoot=函数expandRoot（数据项）{
dataItem.expanded=true；
if（dataItem.hasChildren）{
dataItem.load（）
var children=dataItem.children.data（）；
儿童。forEach（函数（c）{
c、 扩展=真；
$scope.expandRoot（c）
});
}
}

@EduCielo:在我的用例中，我需要展开路径上的所有节点。我在treeView小部件上递归使用了dataBound事件：var treeView=$（“#mytree”）.data（'kendoTreeView'））；var data=…//展开var itemId=…//获取路径var rements=$（data）.slice（1）；treeView.one（'dataBound'，function（）{doExpandRecursive（itemId，rements，treeView）；}；treeItem.set（'expanded'，true）；

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

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