How to serialize delete data with jqGrid, multiselection, and Spring?

Question

Currently, I have an overridden delGridRow call that looks like this (credit to Krams and his Spring tutorial):

var row = $('#grid').jqGrid('getGridParam','selrow');

$('#grid').jqGrid( 'delGridRow', row, 
        {   url:'deleteRequirement.html', 
            recreateForm: true,
            beforeShowForm: function(form) {
                //Change title
                $(".delmsg").replaceWith('<span style="white-space: pre;">' +
                        'Delete selected record?' + '</span>');
                //hide arrows
                $('#pData').hide();  
                $('#nData').hide();
            },
            reloadAfterSubmit:true,
            closeAfterDelete: true,
            serializeDelData: function (postdata) {
                var rowdata = $('#grid').getRowData(postdata.id);
                // append postdata with any information 
                return {id: postdata.id, oper: postdata.oper, reqID: rowdata.reqID};
            },
            afterSubmit : function(response, postdata) 
            { 
                var result = eval('(' + response.responseText + ')');
                var errors = "";
                    if (result.success == false) {
                    for (var i = 0; i < result.message.length; i++) {
                        errors +=  result.message[i] + "<br/>";
                    }
                }  else {
                    $('#msgbox').text('Entry has been deleted successfully');
                    $('#msgbox').dialog( 
                    {   title: 'Success',
                        modal: true,
                        buttons: {"Ok": function()  {
                            $(this).dialog("close");
                        } 
                    }
                });
            }
        // only used for adding new records
        var newId = null;
        return [result.success, errors, newId];
    }
});
else {
    $('#msgbox').text('You must select a record first!');
    $('#msgbox').dialog( 
            {   title: 'Error',
                modal: true,
                buttons: {"Ok": function()  {
                    $(this).dialog("close");} 
                }
            });
}

In order to add support for multiselection deletes, I changed the "selrow" first line to this:

var rowList = jQuery("#grid").getGridParam('selarrrow');

After this, things start getting sketchy fast. The spec says that the default delGridRow can accept an array of inputs records to delete. I made the following change to attempt to get the new 'rowList' variable to get used:

$('#grid').jqGrid( 'delGridRow', rowList, ...

I'm still hitting my deleteRequirement.html URL in my Spring controller, but only the last records appears to make it. I'm guessing the problem is in the postdata preparation in the serializeDelData section, but I haven't found the correct way to prepare this postdata with the list of records instead of the single record.

Any suggestions/insight would be appreciated.

Thanks all.

Answer 1

I don't use Spring myself, but some parts of your code seams be strange for me.

First of all the you can use two forms of the first parameter of delGridRow (row in your code). It can be either the comma-separated list of ids or an array of ids. If you use array of ids then jqGrid convert it to the comma-separated format by rowids = rowids.join();. As the result the format of postdata.id inside of serializeDelData can be also the comma-separated list of ids.

So if you need to support delete of multiple rows you should

1. modify the code of serializeDelData to send in reqID property also the list of the reqID. The corresponding code can be

serializeDelData: function (postdata) {
    var ids = postdata.id.split(','), i, l = ids.length, reqIDList = [];
    for (i = 0; i < l; i++) {
        reqIDList.push($(this).jqGrid("getCell", ids[i], "reqID"));
    }
    return {id: postdata.id, oper: postdata.oper, reqID: reqIDList.join()};
}

1. modify your server code to support both id and reqID in comma-separated form.

Inside of afterSubmit callback you you the lines

// only used for adding new records
var newId = null;
return [result.success, errors, newId];

You can modify the lines to the following

return [result.success, errors];

because only the first two elements of the array returned by afterSubmit callback will be used.