I have a jqGrid on a page and users can click a button to add a new row. If there are already enough rows on the page to fill 开发者_如何学JAVAthe visible portion of the grid the new row is added and a scroll bar appears but the user needs to scroll to see the new row.
Is there a way to do this programmatically?
A quick and easy way to do this using the jqGrid API is to:
- Call
editRow
(which will set focus to the edited row) - And then immediately call
restoreRow
(because you do not really want to edit the row)
Otherwise you should be able to use jQuery's focus
function to set focus to the row, for example: jQuery("#" + row_id).focus()
- but I have not tested this method, so YMMV.
Actually focus
will not scroll the grid's div. But you can use the following code to guarantee that the grid scrolls such that the row with a given id
is viewable:
function getGridRowHeight (targetGrid) {
var height = null; // Default
try{
height = jQuery(targetGrid).find('tbody').find('tr:first').outerHeight();
}
catch(e){
//catch and just suppress error
}
return height;
}
function scrollToRow (targetGrid, id) {
var rowHeight = getGridRowHeight(targetGrid) || 23; // Default height
var index = jQuery(targetGrid).getInd(id);
jQuery(targetGrid).closest(".ui-jqgrid-bdiv").scrollTop(rowHeight * index);
}
//i. Set newly added row (with id = newRowId) as the currently selected row
$('#myGrid').jqGrid('setSelection', newRowId);
//ii. Set focus on the currently selected row
$("#" + $('#myGrid').jqGrid('getGridParam', 'selrow')).focus();
FYI:
I found this example helpful. http://gurarie.org/jqGrid.html from this post, http://www.trirand.com/blog/?page_id=393/bugs/setselection-is-not-scrolling-to-the-selected-row
My issue was $(tableInstance).jqGrid('setSelection', id)
didn't work even scrollrows: true
when height: 'auto'
in jqGrid config. I set height to a specific height 20 and 'setSelection' worked. The selected row was in view for the user. Super Cool
精彩评论