如何跟蹤Kendo UI樹狀結構中檢查的節點ID

Question

我在使用asp.net mvc中的複選框來使用Kendo UI的樹狀控件。父節點和子節點都有id屬性。當用戶檢查任何子節點時，我想跟蹤哪些節點已被檢查。以下是我的cshtml代碼以及javascript代碼來跟蹤id和我的json用於填充treeview。

   <div style="padding-top: 2em;"> 
       <h4>Status</h4> 
       <p id="result">No nodes checked.</p> 
      </div> 

     <script>     
      $("#treeview").kendoTreeView({ 
       checkboxes: { 
        checkChildren: true, 
       }, 
       dataSource: { 
        //type: "odata", 
        transport: { 
         read: { 
          url: '@Url.Content("~/Document/GetDocuments")', 
          type: "post", 
          dataType: "json" 
         } 
        },       
        schema: { 
         model: { 
          id: "id", text: "Name", 
          children: "Files" 
         } 
        } 
       }, 
       dataTextField: [ "Name", "FileName"], 
       check: onCheck         
      }); 
      // function that gathers IDs of checked nodes 
      function checkedNodeIds(nodes, checkedNodes) { 
       for (var i = 0; i < nodes.length; i++) {      
        if (nodes[i].checked) { 
         checkedNodes.push(nodes[i].name); 
        } 
        if (nodes[i].hasChildren) { 
         checkedNodeIds(nodes[i].children.view(), checkedNodes); 
        } 
       } 
      } 
      // show checked node IDs on datasource change 
      function onCheck() {     
       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); 
      } 
     </script> 

json object 
    [{"id":1,"Name":"Checking", 
    "Files":[{"Filename":"doc10","id":"1afd5a4f-086f-44d2-9287-8098384e379e"}, 
    {"Filename":"doc11","id":"89ea3366-14b8-4e91-8273-6e2a51fbe516"}]}, 
    {"id":2,"Name":"Saving", 
    "Files":[{"Filename":"doc20","id":"c7a88f5d-067e-4f20-93b6-da6eff69d532"}, 
    {"Filename":"doc21","id":"8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0"}]}] 

當我檢查一些子節點時，它只顯示「檢查節點的ID：,,,」。所以它看起來像ID值爲空白。

謝謝

Answer 1

請試試下面的代碼片段。

要獲得所有選擇的ID的： -

<div id="treeview"></div> 
<script> 
    var data = [{ "id": 1, "Name": "Checking", "Files": [{ "Filename": "doc10", "id": "1afd5a4f-086f-44d2-9287-8098384e379e" }, { "Filename": "doc11", "id": "89ea3366-14b8-4e91-8273-6e2a51fbe516" }] }, { "id": 2, "Name": "Saving", "Files": [{ "Filename": "doc20", "id": "c7a88f5d-067e-4f20-93b6-da6eff69d532" }, { "Filename": "doc21", "id": "8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0" }] }]; 

    var inline = new kendo.data.HierarchicalDataSource({ 
     data: data, 
     schema: { 
      model: { 
       id: "id", text: "Name", 
       children: "Files" 
      } 
     } 
    }); 

    $(document).ready(function() { 
     $("#treeview").kendoTreeView({ 
      checkboxes: { 
       checkChildren: true, 
      }, 
      dataSource: inline, 
      dataTextField: ["Name", "Filename"], 
      check: onCheck 
     }); 
    }); 

    function checkedNodeIds(nodes, checkedNodes) { 
     for (var i = 0; i < nodes.length; i++) { 
      if (nodes[i].checked) { 
       checkedNodes.push(nodes[i].id); 
      } 
      if (nodes[i].hasChildren) { 
       checkedNodeIds(nodes[i].children.view(), checkedNodes); 
      } 
     } 
    } 

    function onCheck() { 
     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."; 
     } 
     console.log(message); 
    } 
</script> 

要獲得所有選定的名稱和文件名的細節： -

<div id="treeview"></div> 
<script> 
    var data = [{ "id": 1, "Name": "Checking", "Files": [{ "Filename": "doc10", "id": "1afd5a4f-086f-44d2-9287-8098384e379e" }, { "Filename": "doc11", "id": "89ea3366-14b8-4e91-8273-6e2a51fbe516" }] }, { "id": 2, "Name": "Saving", "Files": [{ "Filename": "doc20", "id": "c7a88f5d-067e-4f20-93b6-da6eff69d532" }, { "Filename": "doc21", "id": "8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0" }] }]; 

    var inline = new kendo.data.HierarchicalDataSource({ 
     data: data, 
     schema: { 
      model: { 
       id: "id", text: "Name", 
       children: "Files" 
      } 
     } 
    }); 

    $(document).ready(function() { 
     $("#treeview").kendoTreeView({ 
      checkboxes: { 
       checkChildren: true, 
      }, 
      dataSource: inline, 
      dataTextField: ["Name", "Filename"], 
      check: onCheck 
     }); 
    }); 

    function checkedNodeIds(nodes, checkedNodes) { 
     for (var i = 0; i < nodes.length; i++) { 
      if (nodes[i].checked) { 
       if (nodes[i].Name) 
        checkedNodes.push(nodes[i].Name); 
       else 
        checkedNodes.push(nodes[i].Filename); 
      } 
      if (nodes[i].hasChildren) { 
       checkedNodeIds(nodes[i].children.view(), checkedNodes); 
      } 
     } 
    } 

    function onCheck() { 
     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."; 
     } 
     console.log(message); 
    } 


</script> 

讓我知道如果任何問題。