未选中时,kendo ui会获取复选框的ID

时间:2013-06-17 06:27:27

标签: checkbox kendo-ui kendo-treeview

我正在使用带有复选框的剑道ui树视图

我想要取消选中复选框的ID

这是kendo ui mine code

// var homogeneous contains data

$("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: false,
        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#'/> #}#",

    },
    dataSource: homogeneous,
    dataBound: ondata,
    dataTextField: "value"
});

function ondata() {
   //alert("databound");
}   


// function that gathers IDs of checked nodes
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").data("kendoTreeView").dataSource.bind("change", function() {
    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);
});

在这段代码中我没有取消选中复选框的ID,所以我试过这个 jquery代码

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
       alert('checked');
    } else {
        alert('not checked');
    }
});

此代码仅适用于js小提琴,但不适用于我的http://jsfiddle.net/NPUeL/

如果我使用此代码,那么我可以获得计数但我不知道如何使用它

    var treeview = $("[data-role=treeview]").data("kendoTreeView");
    treeview.dataSource.bind("change", function (e) {
        if (e.field == "checked") {
            console.log("Recorded Selected: " + $("[data-role=treeview] :checked").length);
        }
    });

我需要在数据源中做些什么改变,所以我可以获得id 谢谢你的意见

2 个答案:

答案 0 :(得分:1)

如果你想获得id,你可能会这样做:

$('input[type=checkbox]').click(function (e) {
    var li = $(e.target).closest("li");
    var id = $("input:hidden", li).attr("id");
    var node = treeView.dataSource.get(id);
    if (node.checked) {
        console.log('checked');
    } else {
        console.log('not checked');
    }
});

我在事件处理程序中做的是:

  1. 找到最近的li元素,该元素是已单击的树的节点。
  2. 该ID位于input的HTML hidden元素中(这是我理解您存储它的方式)。
  3. 使用dataSource方法从dataSource.get获取项目。
  4. 查看您的代码已修改并正在运行here

答案 1 :(得分:0)

我做了一个小改动,现在正在工作

    function ondata() {
   $('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
       alert('checked');
    } else {
        alert('not checked');
    }
  });
}