且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-02-12 19:46:05

您可以在树视图***问数据源,并按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/