How to highlight the last selected row after sorting on the client side on jqGrid?

Question

I have a jqGrid based application and I use loadonce: true in the grid and sortable: true, sorttype: 'text colModel in colModel to enable client-side sorting in the data grid. However, I found that as soon as the data grid is re-sorted, the last row selected will no longer be highlighted. My question is how to keep the highlighted row highlighted among the data resorting to use?

Answer 1

I have prepared for you a small demo that saves the row selection. In the demo, I rewrote the selectionPreserver code used when using reloadGrid with additional parameters: $("#list").trigger("reloadGrid", [{current:true}]); . See more details.

The demo saves the current selection inside the onSortCol event onSortCol and restores it inside loadComplete :

 onSortCol: function () { saveSelection.call(this); }, loadComplete: function () { restoreSelection.call(this); } 

As you can see, the use is very simple, and you can integrate it into your code. The implementation of saveSelection and restoreSelection is as follows:

 var lastSelArrRow = [], lastScrollLeft = 0, lastSelRow = null, saveSelection = function () { var $grid = $(this); lastSelRow = $grid.jqGrid('getGridParam', 'selrow'); lastSelArrRow = $grid.jqGrid('getGridParam', 'selrow'); lastSelArrRow = lastSelArrRow ? $.makeArray(lastSelArrRow) : null; lastScrollLeft = this.grid.bDiv.scrollLeft; }, restoreSelection = function () { var p = this.p, $grid = $(this); p.selrow = null; p.selarrrow = []; if (p.multiselect && lastSelArrRow && lastSelArrRow.length > 0) { for (i = 0; i < lastSelArrRow.length; i++) { if (lastSelArrRow[i] !== lastSelRow) { $grid.jqGrid("setSelection", lastSelArrRow[i], false); } } lastSelArrRow = []; } if (lastSelRow) { $grid.jqGrid("setSelection", lastSelRow, false); lastSelRow = null; } this.grid.bDiv.scrollLeft = lastScrollLeft; };