Kendo Grid多选复选框

Question

我有一个Treeview。在选择treenode的编辑时，将显示角色的剑道网格，并显示几个文本框（其中编辑角色的其他属性）。角色的剑道网格具有复选框和角色名称。我现在的代码正在工作，如果我选择一个复选框。

我需要的是如何检查多个复选框以获取角色ID的数组。尝试了多种方式，但我没有得到多个复选框被选中时的ID列表。点击节点EditNode的点击编辑被触发，点击保存点击“点击”。

下面是我的代码：

function editNode(itemid) { 
var editTemplate = kendo.template($("#editTemplate").html()); 
var treeview = $("#treeview").data("kendoTreeView"); 
var selectedNode = treeview.select(); 
var node = treeview.dataItem(selectedNode); 

$("<div/>") 
    .html(editTemplate({ node: node })) 
    .appendTo("body") 
    .kendoWindow({ 
     title: "Node Details", 
     modal: true, 
     open: function() { 
      console.log('window opened..'); 
      editDS = new kendo.data.DataSource({ 
       schema: { 
        data: function (response) { 
         return JSON.parse(response.d); // ASMX services return JSON in the following format { "d": <result> }. 
        }, 
        model: {// define the model of the data source. Required for validation and property types. 
         id: "Id", 
         fields: { 
          Id: { editable: false, nullable: false, type: "string" }, 
          name: { editable: true, nullable: true, type: "string" }, 
          NodeId: { editable: false, nullable: false, type: "string" }, 
         } 
        }, 
       }, 
       transport: { 
        read: { 
         url: "/Services/MenuServices.asmx/getroles", 
         contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON 
         type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX 
         datatype: "json", 
        }, 
       } 
      }); 

      rolesGrid = $("#kgrid").kendoGrid({ 
       dataSource: editDS, 
       height: 150, 
       pageable: false, 
       sortable: true, 
       binding: true, 
       columns: [ 
         { 
          field: "name", 
          title: "Rolename", 
          headerTemplate: '<span class="tbl-hdr">Rolename</span>', 
          attributes: { 
           style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px" 
          } 
         }, 

        { 
         template: kendo.template("<input type='checkbox' class = 'checkbox' id='chkbx' data-id='#:Id #' />"), 
         attributes: { 
          style: "vertical-align: top; text-align: center;" 
         } 
        }, 
       ], 

      }).data('KendoGrid'); 
     }, 

    }) 
.on("click", ".k-primary", function (e) { 
    var dialog = $(e.currentTarget).closest("[data-role=window]").getKendoWindow(); 
    var textbox = dialog.element.find(".k-textbox"); 
    var LinKLabel = $('#LL').val(); 
    var roles = $(chkbx).data('roleid'); 
    console.log(PageLocation); 
    node.text = undefined; 
    node.set("LINK_LABEL", LinKLabel); 
    node.set("Roles", roles); 
    dialog.close(); 
    var treenode = treeview.dataSource.get(itemid); 
    treenode.set("LINK_LABEL", LinKLabel); 
    treenode.set("id", Id); 
    treenode.set("roles", roles); 
    treenode.LINK_LABEL = LinKLabel; 
    treenode.ID = Id; 
    treenode.roles = roles; 

    var rid = $(chkbx).data('roleid'); 

    $.ajax({ 
     url: "/Services/MenuServices.asmx/UpdateTreeDetails", 
     contentType: "application/json; charset=utf-8", 
     type: "POST", 
     datatype: "json", 
     data: JSON.stringify({ "Json": treenode }) 
    }); 
    console.log(JSON.stringify(treenode)); 
}) 
    } 

Answer 1

我假设你想获得这些ID在这条线：

var roles = $(chkbx).data('roleid'); 

，对吗？我不知道的是你想要获得这些数据的格式。用下面的代码，你可以得到这样一个{ id: 1, value: true }数组对象的角色数据，检查出来：

var grid = $("#grid").data("kendoGrid"), 
    ids = []; 

$(grid.tbody).find('input.checkbox').each(function() { 
    ids.push({ 
     id: $(this).data("id"), 
     value: $(this).is(":checked") 
    }); 
}); 

Demo。无论如何，你可以在each循环内改变它。

更新：

，仅保留选中的复选框，改变选择这样：

$(grid.tbody).find('input.checkbox:checked') 

Demo