从jqgrid删除拖放的行

Question

I have two jqgrids setup and can drag from 'master' to 'target' grids. The row I drop into the 'target' grid is not saved to the database and has a generated, unique ID (prefixed with "new_"). I have a custom pager button that deletes the selected row. For saved rows, the event deletes the item from the database and reloads the grid. This works fine. However when I want to remove a dragged row that is NOT saved to the DB the row is not removed.

Here is my button function:

onClickButton: function () {
                var deleteId = tgtGrid.getRowData(tgtGrid.getGridParam('selrow'))['ID'];
                if (!deleteId) {
                    return false;
                }
                // remove an added row, not saved in DB
                if (deleteId.indexOf('new_') != -1) {
                    tgtGrid.jqGrid('delRowData', deleteId);
                } else {
                    // remove account saved in DB
                    $.post( url, { id: deleteId }, function (responseData) {
                        if (!responseData.success) {
                            // error here
                        } else {
                           // success here
                           tgtGrid.trigger('reloadGrid');
                        }
                    });
                }

            }

If I set up the button to use 'delRowData' on the saved row tgtGrid.jqGrid('delRowData', deleteId); it returns true and the row is removed from the grid (not the DB, as expected).

How do I remove a dropped row?

Answer 1

I found the problem lies within jqgrid and how it looks for the element to remove. The tgtGrid.getRowData(pager.getGridParam('selrow'))['ID'] will return the ID or column you set as the key in the column model. However, jqgrid looks at the <tr> element's ID for removing rows and this does not match in dropped rows. For data you load from a DB, the <td> element containing the ID/key will have a matching id attribute as the enclosing <tr> element. For dropped rows the <td> element is what you would expect but the enclosing <tr> element has a generated id attribute with the value "dnd_#" where # is some generated random number. Therefore you need to get this id to remove dragged and dropped rows that have not been saved to the data source. Below is the solution I came up with

var trId = $('td[title="' + deleteId + '"]').closest('tr').attr('id');
tgtGrid.jqGrid('delRowData', trId);