如何获取所有选中行的列值？答案

【问题标题】：How do i get column values of all checked rows?如何获取所有选中行的列值？
【发布时间】：2017-02-26 14:47:14
【问题描述】：

我已经创建了跟随网格

这是它的代码：

        <!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 列值？

【问题讨论】：

标签： jquery jqgrid free-jqgrid

【解决方案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。

【讨论】：

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