如何使用箭头键在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
-
评论你的JavaScript代码(它有一个__doPostBack,它会进行回发并导致你的滚动条行为不端)
-
else if
你的Page_Load
事件的部分是注释的else if
自从你评论你的JS代码后我们就不会使用它了 -
现在将以下代码添加到您的页面
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;"; } }
希望这可以帮助。