新增或更新jqGrid行后,如何选中并滚动至该行?
解决jqGrid选中并滚动至新增/更新行的问题
- 先确认新增/更新操作完成后,目标行已经存在于网格DOM中。如果是远程请求操作,一定要在请求的成功回调里执行选中和滚动,别同步执行。
setSelection仅负责选中行,不会自动滚动,得配合scrollToRow方法一起用,示例代码:
// 替换成你的目标行ID和网格ID var rowId = "target-row-id"; var gridSelector = "#your-grid-id"; // 选中行 $(gridSelector).jqGrid('setSelection', rowId, true); // 滚动到该行位置 $(gridSelector).jqGrid('scrollToRow', rowId);
- 如果遇到行未渲染完成导致的失效,别用定时器硬等,改用jqGrid的
loadComplete事件或者AJAX回调来触发操作。比如新增数据后的重载与选中流程:
$.ajax({ url: "/api/add-row", method: "POST", data: yourRowData, success: function(res) { var newRowId = res.rowId; // 重载网格并在加载完成后执行选中滚动 $("#your-grid-id").jqGrid('setGridParam', { datatype: "json", loadComplete: function() { $(this).jqGrid('setSelection', newRowId, true); $(this).jqGrid('scrollToRow', newRowId); // 用完就清空这个回调,避免干扰后续操作 $(this).jqGrid('setGridParam', {loadComplete: null}); } }).trigger('reloadGrid'); } });
- 要是本地数据操作,直接在添加/更新行之后执行选中和滚动就行:
// 新增本地行 $("#your-grid-id").jqGrid('addRowData', newRowId, rowData); // 立即选中并滚动 $("#your-grid-id").jqGrid('setSelection', newRowId, true); $("#your-grid-id").jqGrid('scrollToRow', newRowId);
内容的提问来源于stack exchange,提问作者sarsnake
相关产品推荐
相关产品推荐

