复选框不选中

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

复选框不选中

回答

相关问题