我如何获得所有检查行的列值？

问题描述：

这里是它的代码：

 <!DOCTYPE html> 
    <html> 
    <head lang="en"> 
     <meta charset="UTF-8"> 
     <title></title> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.min.css" /> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
     <style> 
     </style> 
    </head> 
    <body> 

    <table id="list"></table> 
    <div> 
     <input type="button" id="btn" value="send" /> 
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <script> 
     $.jgrid = $.jgrid || {}; 
     $.jgrid.no_legacy_api = true; 
     $.jgrid.useJSON = true; 
    </script> 
    <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script> 

    <script type="text/javascript"> 

     $(document).ready(function(){ 
      var data = 
        [ 
         {id:'1', name:'john dillon', city:'london', active:false}, 
         {id:'2', name:'marcus maxi', city:'chicago', active:false}, 
         {id:'3', name:'fedro james', city:'new york', active:false}, 
         {id:'4', name:'alias hue', city:'georgia', active:false}, 
         {id:'5', name:'greg finto', city:'st louis', active:false} 
        ]; 

      jQuery("#list").jqGrid({ 
       data:data, 
       colNames: ['id','Name','City', 'active'], 
       colModel: [ 
        {name: 'id', index: 'id', width: 220, sorttype:"int", hidden:false }, 
        {name: 'name', index: 'name', width: 220 }, 
        {name: 'city', index: 'city', width: 220 }, 
        {name: 'active', index: 'active', width: 60, align: 'center', 
         edittype: 'checkbox', 
         editoptions: {value: 'Yes:No', defaultValue: 'Yes'}, 
         formatoptions: { disabled: false}, 
         formatter:function(cellvalue, options, rowObject) 
         { 
          if(rowObject.active===true) 
          { 
           return '<input type="checkbox" id="cbPassed-'+ rowObject.id +'" checked/>'; 
          } 
          else 
          { 
           return '<input type="checkbox" id="cbPassed-'+rowObject.id+ '" />'; 
          } 
         } 

        } 
       ], 
       beforeSelectRow: function (rowid, e) { 
        var $self = $(this), 
          iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]), 
          cm = $self.jqGrid("getGridParam", "colModel"), 
          localData = $self.jqGrid("getLocalRow", rowid); 
        if (cm[iCol].name === "active") { 
         localData.active = $(e.target).is(":checked"); 
        } 

        return true; 
       }, 
       threeStateSort:true, 
       autoencode: true, 
       sortname: "id", 
       viewrecords: true, 
       sortorder: "asc", 
       shrinkToFit: false, 
       caption:'sampples' 
       //width:'400px' 

      }); 

      $('#btn').click(function(){ 
var myGrid = $('#list'); 
      var i, 
        selRowIds = myGrid.jqGrid("getGridParam", "selarrrow"), 
        n, 
        rowData; 
      console.log(JSON.stringify(selRowIds)); 

      for (i = 0, n = selRowIds.length; i < n; i++) 
      { 
       rowData = myGrid.jqGrid("getLocalRow", selRowIds[i]); 
       console.log('selected row data:'+ JSON.stringify(rowData)); 
      } 


      var grid = $('#list'); 
      var ids = grid.jqGrid('getGridParam', 'selarrrow'); 
      console.log(JSON.stringify(ids)); 


      }) 

     }) 

    </script> 




    </body> 
    </html>

在格兰那一刻，我按一下按钮发送，它只是变得的的id列值最后一次检查行。但我如何获得所有检查行的所有name列值？

答

我觉得有什么意思是jqGrid的参数是"selarrrow"。仅当指定了multiselect: true选项时才会使用该参数。你的代码不要使用它。因此，您应该通过所有行。例如，您可以使用getDataIDs方法。修改后的JavaScript代码可能如下：

$(function() { 
    "use strict"; 
    var data = [ 
      { id: '1', name: 'john dillon', city: 'london', active: false }, 
      { id: '2', name: 'marcus maxi', city: 'chicago', active: false }, 
      { id: '3', name: 'fedro james', city: 'new york', active: false }, 
      { id: '4', name: 'alias hue', city: 'georgia', active: false }, 
      { id: '5', name: 'greg finto', city: 'st louis', active: false } 
     ]; 

    $("#list").jqGrid({ 
     data: data, 
     colNames: ['id', 'Name', 'City', 'active'], 
     colModel: [ 
      { name: 'id', sorttype: "int" }, 
      { name: 'name' }, 
      { name: 'city' }, 
      { name: 'active', width: 60, align: 'center', 
       edittype: 'checkbox', 
       editoptions: { value: 'Yes:No', defaultValue: 'Yes' }, 
       formatoptions: { disabled: false}, 
       formatter: function (cellvalue, options, rowObject) { 
        return '<input type="checkbox" id="cbPassed-' + rowObject.id + 
         (rowObject.active === true ? '" checked="checked" />' : '" />'); 
       } 
      } 
     ], 
     cmTemplate: { width: 220 }, 
     beforeSelectRow: function (rowid, e) { 
      var $self = $(this), $td = $(e.target).closest("tr.jqgrow>td"), 
       iCol = $td.length > 0 ? $td[0].cellIndex : -1, 
       cmName = iCol >= 0 ? $self.jqGrid("getGridParam", "colModel")[iCol].name : "", 
       localData = $self.jqGrid("getLocalRow", rowid); 
      if (cmName === "active" && $(e.target).is("input[type=checkbox]")) { 
       localData.active = $(e.target).is(":checked"); 
      } 

      return true; 
     }, 
     threeStateSort: true, 
     autoencode: true, 
     sortname: "id", 
     viewrecords: true, 
     sortorder: "asc", 
     shrinkToFit: false, 
     caption: 'samples' 
    }); 

    $('#btn').click(function(){ 
     var myGrid = $('#list'), i, rowData, names = [], 
      rowIds = myGrid.jqGrid("getDataIDs"), 
      n = rowIds.length; 

     //console.log(JSON.stringify(rowIds)); 
     for (i = 0; i < n; i++) { 
      rowData = myGrid.jqGrid("getLocalRow", rowIds[i]); 
      if (rowData.active) { 
       names.push(rowData.name); 
      } 
      //console.log('selected row data:'+ JSON.stringify(rowData)); 
     } 

     console.log(names); 
     alert(names.join("; ")); 
    }) 
});

请参阅the demo。

感谢Oleg，复选框选择问题已修复:) –

@ Dore.Ad：不客气！ – Oleg

我如何获得所有检查行的列值？

相关推荐