如何在编辑行调用中使用 jqGrid 单元格编辑进行滚动
How to scroll with jqGrid cell editing on editrow call?
我已经将jqGrid设置为使用单元格编辑,并且绑定了一些导航键。
向上和向下箭头将调用上一行或下一行上的编辑行,效果很好。唯一的问题是,如果我到达可见记录的末尾,它不会滚动以跟上。
我尝试在网格选项中设置scrollrows: true
,但这似乎仅适用于选择整行,而不是单元格。
以前有人必须处理这个问题吗?我对滚动和javascript/jquery不是很有经验,所以我没有开箱即用的解决方案。
感谢您的任何建议!
编辑:这是一个帮助调试的小提琴。要查看问题,请单击"Thingy"列,使用向下箭头进行导航。
可以修改editNewCell
函数以使用 setSelection
来确保新编辑的行可见:
function editNewCell(iRow, iCol) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
grid.editCell(iRow, iCol, true);
var selRow = grid.getGridParam('selrow');
grid.jqGrid('setSelection', selRow );
};
如果您想尝试一下,这里有一个带有更改的 jsfiddle。
我不确定我做对了。"如果我到达可见记录的末尾,它不会滚动以跟上"是什么意思?您的意思是一旦到达顶部/底部行,您就无法再进一步了,或者您的意思是,如果您继续水平滚动并且一旦越过可见记录的末尾,您的编辑模式就会消失。
我有类似的 excel,例如网格编辑实现,其中我在编辑模式下具有向上和向下箭头导航以进行单元格编辑。第一段中的链接将带您进入 jsfiddle 示例。在javascript部分查找HandleInputNavigation函数。我已经将列的编辑选项下的colModel中的keydown事件绑定到HandleInputNavigation函数。这就是我处理向上/向下导航的地方。
5月24日更新:代码应如下所示:
if (iRow && iCol) {
var isShift = window.event.shiftKey ? true : false;
var top = 1; //UPDATED
var bottom = grid.getGridParam('reccount');
var left = 0;
var right = grid.getGridParam("colNames").length - 1;
switch (key) {
case 38:
// up
if (iRow === top) saveCell(iRow, iCol); //UPDATED
else editNewCell(iRow - 1, iCol);
break;
case 40:
// down
if (iRow === bottom) saveCell(iRow, iCol); //UPDATED
else editNewCell(iRow + 1, iCol);
break;
...
...
更新的小提琴
相关文章:
- JQGrid动态行可编辑
- JQGrid使用服务器编辑后的更新数据刷新数据
- 如何正确拖动jqgrid编辑表单
- 如何避免在自由jqgrid中单击单元格进行水平滚动编辑
- 免费 jqGrid - 行未进入编辑
- 如何避免日期损坏按下保存按钮在免费jqgrid内联编辑
- 用于显示服务器端验证结果的 Jqgrid 编辑事件
- jqGrid - 是否有任何“网格编辑模式”
- 我如何验证/发布编辑类型为表单编辑中的 jqgrid 选择的列
- 在 jqGrid 内联编辑中获取选择的文本部分而不是值
- 如何在不重新加载的情况下在表单编辑中更改主键后刷新jqgrid行id
- 在jqgrid编辑中动态刷新多选下拉列表
- 如何禁用jqgrid中已发布行的内联和表单编辑
- jqGrid-保存内联编辑不起作用
- jqgrid在条件下动态设置单元格可编辑false
- 在jqGrid编辑对话框中使用ptTimeSelect时出现问题
- Jqgrid无法添加或编辑数据
- 使用 Web API 编辑获取数据时,无法将数据绑定到 jqgrid 中的下拉列表
- 在不使用取消按钮的情况下将可编辑JqGrid行更改回“不可编辑”
- 内联编辑jqgrid时,日期选择器中的minDate