0
使用例如在Kendo-ui Demo page我現在有下面的代碼用的複選框劍道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屬性,children數組也是空的。在演示頁的例子中,數據源樹視圖中定義:
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [
{
id: 1, text: ....
當我定義樹形目錄內的數據源,結果文本顯示正確的節點作爲選擇。有沒有辦法模擬這種行爲?我打算將來使用遠程數據。