複選框不選中

var data; 
 
var gridColumns; 
 
var grid; 
 
var showlist; 
 
var viewModel; 
 

 
viewModel = kendo.observable({ 
 
    showlist:false, 
 

 
}); 
 

 
kendo.bind($(checklist), viewModel); 
 

 
function onChange() { 
 
    viewModel = kendo.observable({ 
 
     showlist:true, 
 
    }); 
 
filterinfo(cType.value()); 
 
kendo.bind($(checklist), viewModel); 
 
    } 
 

 
function filterinfo(value) 
 
{ 
 
    var treeView = $("#treeview").data("kendoTreeView"); 
 
    if(treeView){ 
 
    treeView.destroy(); 
 
    $("#treeview").html(""); 
 
    } 
 

 
    switch(value){ 
 
    case "1": 
 
     treeView = $("#treeview").kendoTreeView({ 
 
      checkboxes : { 
 
      checkChildren: false, 
 
      template  : $("#template").html() 
 
      }, 
 
      dataSource : PrimaryProbe, 
 
      dataTextField: "value" 
 
     }).data("kendoTreeView"); 
 
     
 
     function checkedNodeIds(nodes, checkedNodes) { 
 
    //console.log(nodes); 
 
    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); 
 
     } 
 
    } 
 
} 
 

 
// show checked node IDs on datasource change 
 
treeView.dataSource.bind("change", function() { 
 
    var message; 
 
    var checkedNodes = []; 
 

 
    checkedNodeIds(treeView.dataSource.view(), checkedNodes); 
 
    if (checkedNodes.length > 0) { 
 
     message = "IDs of checked nodes: " + checkedNodes.join(","); 
 
    } else { 
 
     message = "No nodes checked."; 
 
    } 
 
    $("#result").html(message); 
 
}); 
 
     
 
     
 
     
 
     break; 
 
    case "2": 
 
     treeView = $("#treeview").kendoTreeView({ 
 
      checkboxes : { 
 
      checkChildren: false, 
 
      template  : $("#template").html() 
 
      }, 
 
      dataSource : Probe, 
 
      dataTextField: "value" 
 
     }).data("kendoTreeView"); 
 
     
 
     function checkedNodeIds(nodes, checkedNodes) { 
 
    //console.log(nodes); 
 
    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); 
 
     } 
 
    } 
 
} 
 

 
// show checked node IDs on datasource change 
 
treeView.dataSource.bind("change", function() { 
 
    var message; 
 
    var checkedNodes = []; 
 

 
    checkedNodeIds(treeView.dataSource.view(), checkedNodes); 
 
    if (checkedNodes.length > 0) { 
 
     message = "IDs of checked nodes: " + checkedNodes.join(","); 
 
    } else { 
 
     message = "No nodes checked."; 
 
    } 
 
    $("#result").html(message); 
 
}); 
 
     break; 
 
    } 
 
} 
 

 
var clientType = [{"clientTypeID":1,"clientTypeName":"PrimaryProbe"}, 
 
        {"clientTypeID":2,"clientTypeName":"Probe"}] 
 

 

 
var cType = $("#clientType").kendoComboBox({ 
 
         filter: "contains", 
 
         change: onChange, 
 
         placeholder: "Filter by client type", 
 
         dataTextField: "clientTypeName", 
 
         dataValueField: "clientTypeID", 
 
         dataSource: { 
 
          data:clientType 
 
         } 
 
        }).data("kendoComboBox"); 
 

 

 

 

 
var Probe = new kendo.data.HierarchicalDataSource({ 
 
    data: [ 
 
    { id  : 1, 
 
    parent_id: 0, 
 
    value : "General Information - Probe", 
 
    expanded : true, 
 
    items : [ 
 
     { id: 11, parent_id: 1, value: "CPU Model"}, 
 
     { id: 12, parent_id: 1, value: "CPU Usage" }, 
 
     { id: 13, parent_id: 1, value: "Free Space"}, 
 
     { id: 14, parent_id: 1, value: "Hardware Model"}, 
 
     { id: 15, parent_id: 1, value: "Master/Slave Mode"}, 
 
     { id: 16, parent_id: 1, value: "Memory Usage" }, 
 
     { id: 17, parent_id: 1, value: "Product Version" }, 
 
     { id: 18, parent_id: 1, value: "Software Version" } 
 
    ]}, 
 
    { id  : 2, 
 
    parent_id: 0, 
 
    value : "Sim Pool Information - Probe", 
 
    expanded : true, 
 
    items : [ 
 
     { id: 21, parent_id: 2, value: "Slot 1"}, 
 
     { id: 22, parent_id: 2, value: "Slot 2"}, 
 
     { id: 23, parent_id: 2, value: "Slot 3"}, 
 
     { id: 24, parent_id: 2, value: "Slot 4"}, 
 
     { id: 25, parent_id: 2, value: "Slot 5"}, 
 
     { id: 26, parent_id: 2, value: "Slot 6"}, 
 
     { id: 27, parent_id: 2, value: "Slot 7"}, 
 
     { id: 28, parent_id: 2, value: "Slot 8"} 
 
    ]}, 
 
    { 
 
     id  : 3, 
 
     parent_id: 0, 
 
     value : "Trace Files Information - Probe", 
 
     expanded : true, 
 
     items : [ 
 
     { id: 31,parent_id: 3, value: "FTP Upload Status"}, 
 
     { id: 32,parent_id: 3, value: "Remaining Agent Trace Files" }, 
 
     { id: 33,parent_id: 3, value: "Remaining Probe Trace Files" }, 
 
     { id: 34,parent_id: 3, value: "Remaining TRP Log Files"} 
 
     ] 
 
    } 
 
    ] 
 
}); 
 
var PrimaryProbe = new kendo.data.HierarchicalDataSource({ 
 
    data: [ 
 
    { id  : 5, 
 
    parent_id: 0, 
 
    value : "General - Primary Probe", 
 
    expanded : true, 
 
    items : [ 
 
     { id: 51, parent_id: 5, value: "Agent Running Mode"}, 
 
     { id: 52, parent_id: 5, value: "Agent Version"}, 
 
     { id: 53, parent_id: 5, value: "Master/Slave Mode"}, 
 
     { id: 54, parent_id: 5, value: "Manufacturer"}, 
 
     { id: 55, parent_id: 5, value: "Model"}, 
 
     { id: 56, parent_id: 5, value: "Software Version"} 
 
    ]} 
 
    ] 
 
}); 
 

 

 

 

 

 
// function that gathers IDs of checked nodes 
 

 

 
function add(){ 
 
    viewModel = kendo.observable({ 
 
    showlist:true, 
 

 
}); 
 
kendo.bind($(checklist), viewModel); 
 

 
    
 
} 
 
function check(){ 
 

 
}

#fieldlist { 
 
        margin: 0; 
 
        padding: 0; 
 
       } 
 
     
 
       #fieldlist li { 
 
        list-style: none; 
 
        padding-bottom: 1.5em; 
 
        text-align: left; 
 
       } 
 
     
 
       #fieldlist label { 
 
        display: block; 
 
        padding-bottom: .3em; 
 
        font-weight: bold; 
 
        text-transform: uppercase; 
 
        font-size: 12px; 
 
       } 
 

 
.searchClientText { 
 
    width: 222px !important; 
 
    height: 25px !important; 
 
    border-radius: 3px; 
 
} 
 

 
.checkboxList { 
 
    margin: 0 0 -1em; 
 
    padding: 0; 
 
} 
 

 
.checkboxList li { 
 
    list-style: none; 
 
    padding-bottom: 1em; 
 
} 
 

 
td { 
 
    width:150px; 
 
    vertical-align: top; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 
<meta charset=utf-8 /> 
 
<title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="demo-section k-content"> 
 
    
 
    <ul id="fieldlist"> 
 
     <li> 
 
     <input id="clientType" style="width:auto" /> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    
 
    <script id="template" type="text/kendo-ui-template"> 
 
    # if(!item.hasChildren){ # 
 
    <input type='hidden' id='#= item.id #' parent_id='#= item.parent_id #' d_text='#= item.value #'/> 
 
    <input type='checkbox' id_a='#= item.id #' name='c_#= item.id #' value='true'/> 
 
    #}else{# 
 
    <div id='#= item.id #' style='display:none;' parent_id='#= item.parent_id #' d_text='#= item.value #'/> 
 
    #}# 
 
</script> 
 
    <div id="checklist" data-bind="visible: showlist"> 
 
    <table> 
 
     <tr> 
 
     <td><div id="treeview"></div><div id="result"></div></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 

 

 
    
 

 
</body> 
 
</html>

將有與[「初探」，「探針」]的組合框和一旦我選擇從組合框中選擇一個選項將顯示一個複選框的列表，一旦複選框被選中，那麼它將獲得id並顯示在結果中。

問題：問題是，當我從主探針更改選項到探針或探針組合框的主探針時，它將取消選中我選擇的組合框。

如何讓系統加載我檢查的ID

來源

2016-09-26 Cylex

了在filterinfo創建的新的TreeView情況下，沒有一個change處理器連接到他們的數據源。目前對於第一個TreeView實例只進行一次，這就是爲什麼僅在此實例中顯示選中的ID。

來源

2016-09-26 08:56:24 dimodi

我已經嘗試了很多時間添加更改處理程序，但它似乎不工作。幫助我檢查並修改下面的jsbin鏈接（如果需要） [鏈接]（http://jsbin.com/gupamomodi/edit?html,js輸出） – Cylex

在提供的示例中，'treeView.dataSource.bind（「change 「，...）'只在'filterinfo（）'函數'switch'的** case 2 **中執行。在兩種情況下都執行它。 – dimodi

[示例代碼]（http://jsbin.com/yuyaciz/edit?js,output）現在的問題是每當我更改組合框選項，然後我的選中複選框將被清除，但它會說我會檢查以前的消息選擇。如何根據以前的ID檢查複選框 – Cylex

複選框不選中

回答

相關問題