2013-08-25 55 views
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: .... 

當我定義樹形目錄內的數據源,結果文本顯示正確的節點作爲選擇。有沒有辦法模擬這種行爲?我打算將來使用遠程數據。

回答

1

我在TreeView API中找到了答案。答案就在這裏:

loadOnDemand TreeView configuration

所以我需要做的是設置loadOnDemand:

$("#treeView").kendoTreeView({ 
loadOnDemand: false, ... 
:TreeView的內假