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