使用Kendo-ui 演示页面上的示例,我现在有以下代码
<script>
var dataSource = new kendo.data.HierarchicalDataSource({
data: [
{
id: 1, text: "Useraccess", expanded: true, items: [
{ id: 2, text: "Roles", items: [
{ id: 3, text: "Access", checked: true },
{ id: 4, text: "Edit", checked: true }
]},
{ id: 5, text: "Users", items: [
{ id: 6, text: "Access" },
{ id: 7, text: "Edit" }
]}
]
},
{
id: 8, text: "Customer", expanded: true, items: [
{ id: 9, text: "Customer", items: [
{ id: 10, text: "Access" },
{ id: 11, text: "Edit", checked: true }
]},
{ id: 12, text: "Account", items: [
{ id: 13, text: "Access" },
{ id: 14, text: "Edit" }
]}
]
}
]
});
$("#treeView").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: dataSource
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked && !nodes[i].hasChildren) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
function refreshResult() {
var checkedNodes = [],
treeView = $("#treeView").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
// show checked node IDs on datasource change
$("#treeView").data("kendoTreeView").dataSource.bind("change", function() {
refreshResult();
});
refreshResult();
</script>
加载页面时,结果文本为“未检查节点。”,即使确实检查了 3 个节点。在调试时,我注意到即使“角色”节点具有属性 hasChildren = true,子数组也是空的。在 Demo 页面的示例中,数据源在 TreeView 中定义:
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [
{
id: 1, text: ....
当我在 Treeview 中定义数据源时,结果文本会显示正确的节点。有没有办法模拟这种行为?我计划将来使用远程数据。