Question

我创建了以下网格

这是代码：

TEMP_CONFIG

在我点击发送按钮的那一刻，它只获得最后一个选中行的<!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列值？

Answer 1

我认为误解了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。

如何获取所有已检查行的列值？

1 个答案: