Question

我在我的应用程序中使用多选网格功能，它正如我所期望的那样工作。但问题是我需要在外部javascript函数中获取所有选定的记录。以下是我的代码，

function createCommodity(){
$.ajax({
    url : 'commoditycategory.do?method=listCommodity' + '&random='
            + Math.random(),
    type : "POST",
    async : false,
    success : function(data) {
        $("#list2").jqGrid('GridUnload');
        var newdata = jQuery.parseJSON(data);
        var wWidth = $(window).width();
        var dWidth = wWidth * 0.7;
        var wHeight = $(window).height();
        var dHeight = wHeight * 0.5, idsOfSelectedRows = [];
    jQuery("#list2").jqGrid({
        data : newdata,
        datatype : "local",
        colNames : [ "id", "Commodity Code",
                "Commodity Description", "Commodity Category" ],
        colModel : [
                {
                    name : 'id',
                    index : 'id',
                    hidden : true,
                    editable : true
                },
                {
                    name : 'commodityCode',
                    index : 'commodityCode',
                    align : "center",
                    editable : true,
                    editrules : {
                        required : true
                    }
                },
                {
                    name : 'commodityDesc',
                    index : 'commodityDesc',
                    align : "center",
                    editable : true,
                    editrules : {
                        required : true
                    }
                },
                {
                    name : 'commodityCategoryId',
                    index : 'commodityCategoryId',
                    align : "center",
                    // hidden : true,
                    editable : true,
                    edittype : "select",
                    editoptions : {
                        dataUrl : 'commoditycategory.do?method=parentCategory'
                                + '&random=' + Math.random()
                    },
                    editrules : {
                        edithidden : true,
                        required : true
                    // custom : true
                    }
                } ],
        pager : "#pager2",
        rowNum : 10,
        rowList : [ 10, 20, 50 ],
        height : "230",
        width : dWidth,
        onSelectRow: function (id, isSelected) {
            var p = this.p, item = p.data[p._index[id]], i = $.inArray(id, idsOfSelectedRows);
            item.cb = isSelected;
            if (!isSelected && i >= 0) {
                idsOfSelectedRows.splice(i,1); // remove id from the list
            } else if (i < 0) {
                idsOfSelectedRows.push(id);
            }
        },
        loadComplete: function () {
            var p = this.p, data = p.data, item, $this = $(this), index = p._index, rowid, i, selCount;
            for (i = 0, selCount = idsOfSelectedRows.length; i < selCount; i++) {
                rowid = idsOfSelectedRows[i];
                item = data[index[rowid]];
                if ('cb' in item && item.cb) {
                    $this.jqGrid('setSelection', rowid, false);
                }
            }
        },
        multiselect : true,
        cmTemplate : {
            title : false
        }
    });
    $grid = $("#list2"),
    $("#cb_" + $grid[0].id).hide();
    $("#jqgh_" + $grid[0].id + "_cb").addClass("ui-jqgrid-sortable");
    cbColModel = $grid.jqGrid('getColProp', 'cb');
    cbColModel.sortable = true;
    cbColModel.sorttype = function (value, item) {
        return typeof (item.cb) === "boolean" && item.cb ? 1 : 0;
    };
    }
 });
}

直到现在它的工作很棒。它保持正确的行，这些行是在分页中选择的。我需要获取所选rowid的外部JS函数包括分页，

function updateCommodity() {
    var grid = jQuery("#list2");
    var ids = grid.jqGrid('getGridParam', 'selarrrow'); // This only returns selected records in current page.
    if (ids.length > 0) {
        var html = "<table id='commodityTable' class='main-table' width='100%' border='0' style='border:none;border-collapse:collapse;float: none;'><thead><td class='header'>Commodity Code</td><td class='header'>Commodity</td><td class='header'>Action</td></thead><tbody>";
        for ( var i = 0, il = ids.length; i < il; i++) {
            var commodityCode = grid.jqGrid('getCell', ids[i],
                    'commodityCode');
            var commodityDesc = grid.jqGrid('getCell', ids[i],
                    'commodityDesc');
            html = html
                    + "<tr class='even' id='row" + i + "'><td><input type='text' name='commodityCode' id='geographicState"+i+"' class='main-text-box' readonly='readonly' value='" + commodityCode + "'></td>";
            html = html
                    + "<td><input type='text' name='commodityDesc' id='commodityDesc"+i+"' class='main-text-box' readonly='readonly' value='" + commodityDesc + "'></td>";
            html = html
                    + "<td><a style='cursor: pointer;' onclick='deleteRow(\"commodityTable\",\"row"
                    + i + "\");' >Delete</a></td></tr>";
        }
        html = html + "</tbody></table>";
        $("#commodityArea").html(html);
}
}

更新我有fiddled问题，以便更清楚地说明问题。

Answer 1

首先，我想提醒您使用我在the answer中发布的代码。

我发现问题的解决方案非常简单。 jqGrid的选项列表可以轻松扩展。如果您只在选项列表中包含新属性

...
data : newdata,
datatype : "local",
idsOfSelectedRows: [],
...

您不需要更多地定义变量idsOfSelectedRows（请参阅代码的行var dHeight = wHeight * 0.5, idsOfSelectedRows = [];）。要访问新选项，您可以使用

var ids = grid.jqGrid('getGridParam', 'idsOfSelectedRows');

而不是var ids = grid.jqGrid('getGridParam', 'selarrrow');。要使onSelectRow和loadComplete回调的代码与idsOfSelectedRows一起使用为jqGrid选项，您应该只修改回调的第一行

var p = this.p, ...

到

var p = this.p, idsOfSelectedRows = p.idsOfSelectedRows, ...

一切都是。

更新：请参阅http://jsfiddle.net/OlegKi/s2JQB/4/作为固定演示。

在外部javascript函数中获取jqgrid的所有选定ID

1 个答案: