jqgrid複選框全部選中，全部清除

Question

我想選中複選框，當我點擊全選按鈕時。點擊獲取選定按鈕時獲取選定的值。我能夠做到這一點時多選是true。但我使用複選框IsEmployeeActive與多選真。我如何使用自定義複選框來實現此功能。

<div style="float: left;"> 
    <input id="getSelected" type="button" value="Get Selected" /> 
    <input id="selectAll" type="button" value="Select All" /> 
    <input id="clear" type="button" value="Clear Selection" /> 
    <div id="names"></div> 
</div> 

的jqGrid代碼

colModel: [//Column details 
         { name: "Id", index: "Id", width: "220px" }, 
         { name: "Name", index: "Name", width: "220px" }, 
         //Do not allow sorting on Action Column 
         { name: "Action", index: "Action", sortable: false, width: "220px" }, 
         { name: "IsEmployeeActive", index: "IsEmployeeActive", sortable: false, width: "220px" , 
          editable:true, edittype:'checkbox', editoptions: { value:"true:false"}, 
          formatter: "checkbox", formatoptions: {disabled : false}, 
         } 
      ] 

     $("#selectAll").click(function(){ 
      $("#jqEmpGrid").jqGrid('resetSelection'); 
      var ids = $("#jqEmpGrid").jqGrid('getDataIDs'); 
      for (var i=0, il=ids.length; i < il; i++) { 
       $("#jqEmpGrid").jqGrid('setSelection',ids[i], true); 
      } 
     }); 
     $("#clear").click(function(){ 
      $("#jqEmpGrid").jqGrid('resetSelection'); 
     }); 
     $("#getSelected").click(function(){ 
      var ids = $("#jqEmpGrid").jqGrid('getGridParam','selarrrow'); 
      if (ids.length>0) { 
       var names = []; 
       for (var i=0, il=ids.length; i < il; i++) { 
        var name = $("#jqEmpGrid").jqGrid('getCell', ids[i], 'Id'); 
        names.push(name); 
       } 
       //alert ("Names: " + names.join(", ") + "; ids: " + ids.join(", ")); 
       $("#names").html(names.join(", ")); 
      } 
     }); 

}); 

Answer 1

聲明山坳名

colNames: ['Employee Id', 'Employee Name', 'Action','<input type="checkbox" id="selectallCB"/>'],//Column Names 
     colModel: [//Column details 
        { name: "Id", index: "Id", width: "220px" }, 
        { name: "Name", index: "Name", width: "220px" }, 
        //Do not allow sorting on Action Column 
        { name: "Action", index: "Action", sortable: false, width: "220px" }, 
        { name: "IsEmployeeActive", index: "IsEmployeeActive", sortable: false, width: "220px" , 
         editable:true, edittype:'checkbox', editoptions: { value:"true:false"}, 
         formatter: "checkbox", formatoptions: {disabled : false}, 
         cellattr: function(rowId, val, rawObject) { 
          return " class='cbEmpActive'"; 
         } 
        } 
     ], 

，並編寫代碼來選擇所有，並獲得選擇的項目

/* use when custom checkbox is required */ 

    $("#selectAll").click(function(){ 
     var td = $('.cbEmpActive'); 
     for(var i=0;i<td.length; i++){ 
      var checkbox = $('input[type="checkbox"]', $(td[i]).closest('td')).get(0).checked=true; 
     } 
    }); 
    $("#clear").click(function(){ 
     var td = $('.cbEmpActive'); 
     for(var i=0;i<td.length; i++){ 
      var checkbox = $('input[type="checkbox"]', $(td[i]).closest('td')).get(0).checked=false; 
     } 
    }); 
    $("#getSelected").click(function(){ 

     var ids = $("#jqEmpGrid").jqGrid('getDataIDs'); 
     if (ids.length>0) { 
      var names = []; 
      for (var i=0, il=ids.length; i < il; i++) { 
       var checkbox = $("#jqEmpGrid").jqGrid('getCell', ids[i], 'IsEmployeeActive'); 
       if(checkbox=='true') 
       { 
        var name = $("#jqEmpGrid").jqGrid('getCell', ids[i], 'Name'); 
        names.push(name); 
       } 
      } 
      $("#names").html(names.join(", ")); 
     } 

     $("#clear").click();// clear the selection after retriving selected values 
    }); 



    // add multiple select/deselect functionality 
    $("#selectallCB").click(function (e) { 
     var isSelectAllTrue = $('#selectallCB').is(":checked"); 
     e = e||event;/* get IE event (not passed) */ 
     e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; 

     var td = $('.cbEmpActive'); 
     for(var i=0;i<td.length; i++) 
     { 
      var checkbox = $('input[type="checkbox"]', $(td[i]).closest('td')).get(0); 

      var checked = checkbox.checked; 
      checkbox.checked = isSelectAllTrue; 

     } 

     //   $('.case').attr('checked', this.checked); 
    });