获取节点数据
您可以在select
事件处理程序中获取TreeView节点数据。
function onSelect(e) { // This refers to the TreeView object. var dataItem = this.dataItem(e.node); console.log("Selected node with id=" + dataItem.id); } $("#treeview").kendoTreeView({ dataSource: [ { id: 1, text: "Item 1", items: [ { id: 3, text: "Item 3" } ] }, { id: 2, text: "Item 2" } ], select: onSelect });
节点展开时重新加载子节点
由于dataItem
是的Node
类型,因此可以使用其loaded
标志来强制从服务器重新加载节点。该Node.loaded
方法设置loaded
节点的标志并指示它需要刷新。
function onExpand(e) { var dataItem = this.dataItem(e.node); dataItem.loaded(false); } $("#treeview").kendoTreeView({ dataSource: remoteDataSource, expand: onExpand });
从TreeView收集检查的节点
以下示例演示如何从Kendo UI TreeView收集选中的节点。您也可以使用这种方法来收集扩展的节点。
var treeview = $("#treeview").data("kendoTreeView"); var checkedNodes = []; function gatherStates(nodes) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].checked) { checkedNodes.push(nodes[i].id); } if (nodes[i].hasChildren) { gatherStates(nodes[i].children.view()); } } } gatherStates(treeview.dataSource.view());
投影TreeView状态
在HierarchicalDataSource
不支持数据投影。因此,您可能需要使用schema.parse
配置选项来重新映射状态字段。
<div id="tree"> <script> $("#tree").kendoTreeView({ dataSource: { transport: { read: function (options) { setTimeout(function() { options.success([ { hasChildren: false, text: "Node 1", Downloaded: false }, { hasChildren: true, text: "Node 2", Downloaded: true, items: [ { hasChildren: false, text: "Node 2.1", Downloaded: false }, ] } ]); }, 1000); } }, schema: { parse: function(response) { return $.map(response, function(x) { x.expanded = x.Downloaded; return x; }); }, model: { id: "id", hasChildren: "hasChildren", children: "items" } } } }); </script>
详见:https://docs.telerik.com/kendo-ui/controls/navigation/treeview/common-scenarios#gathering-checked-nodes-from-the-treeview