如何使用箭头键在ASP.NET gridview中导航(向上或向下)?

如何在突出显示当前行的同时使用箭头键在ASP.NET gridview中导航(向上或向下)?

我可以使用javascript代码和C#代码使用向上和向下箭头键移动行。 我还实现了一个开始请求和结束请求JS代码,用于维护回发时的滚动位置。

但是,我的问题是,滚动条不会向上或向下移动以自动显示突出显示的行。 假设有100行,我选择第15行,但网格高度就像它只能显示10行,除非我们手动移动滚动条,它不会自动移动以通过箭头键显示所选行。 如何通过移动滚动条来确保突出显示的行的同步或可见性?

我的gridview没有复选框。

请帮我。 我的代码在这里:

     

我在回发时保持滚动位置的做法是:

  // This Script is used to maintain Grid Scroll on Partial Postback var scrollTop; //Register Begin Request and End Request Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); //Get The Div Scroll Position function BeginRequestHandler(sender, args) { var m = document.getElementById('divGrid'); scrollTop = m.scrollTop; } //Set The Div Scroll Position function EndRequestHandler(sender, args) { var m = document.getElementById('divGrid'); m.scrollTop = scrollTop; }  

另外,我在keydown和keyup中有这个

  if (e.keyCode == '38') { document.getElementById('').value = false; document.getElementById('').value = false; // up arrow __doPostBack(pageId, "up"); } else if (e.keyCode == '40') { document.getElementById('').value = false; document.getElementById('').value = false; // down arrow __doPostBack(pageId, "down"); 

问题:我不知道在代码项目中使用您提到的代码的位置,当我按下向下键或向上箭头键时,它应该自动移动滚动条。 我没有分页。

Page_load代码

 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) //on initial load, default dates to current fbt year { dpDateFrom.DateValue = currentBT; dpDateTo.DateValue = currentBTEnd; Searchclick(); } //cursor keys else if (Request.Form["__EVENTARGUMENT"] == "up" || Request.Form["__EVENTARGUMENT"] == "down") { string eventArgument = Request.Form["__EVENTARGUMENT"]; int intPayCycleId = 0; if (gvCycles.SelectedIndex >= 0 && gvCycles.SelectedIndex < gvCycles.Rows.Count) { if (eventArgument == "down") { if (gvCycles.SelectedIndex  0) { gvCycles.SelectedIndex -= 1; } } hdnSelectedRow.Value = gvCycles.SelectedValue.ToString() + ","; //assign hidden value with selected row SetRowsStyle(gvCycles); if (int.TryParse(gvCycles.SelectedRow.Cells[0].Text, out intCycleId)) { ShowDeductions(intCycleId, false); } } } } 

看看这个SO线程

而且, 这是一个很好的示例代码

UPDATE

我刚看了一下这里的代码。 如果使用DIV包装GridView,则自动滚动工作正常,如下所示。 (我使用与此链接中给出的代码相同的代码,只是添加了带有CSS样式的DIV。还通过将后面代码中的for循环更改for n < 100来增加网格中显示的记录数量

 

而且,这是CSS

  

在此处输入图像描述

更新2

  1. 评论你的JavaScript代码(它有一个__doPostBack,它会进行回发并导致你的滚动条行为不端)

  2. else if你的Page_Load事件的部分是注释的else if自从你评论你的JS代码后我们就不会使用它了

  3. 现在将以下代码添加到您的页面

JavaScript的

  

代码背后

 protected void gvCycles_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow && (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)) { e.Row.TabIndex = -1; e.Row.Attributes["onclick"] = string.Format("javascript:SelectRow(this, {0});", e.Row.RowIndex); e.Row.Attributes["onkeydown"] = "javascript:return SelectSibling(event);"; e.Row.Attributes["onselectstart"] = "javascript:return false;"; } } 

希望这可以帮助。