[英]How to navigate (up or down) in ASP.NET gridview using arrow keys?
突出顯示當前行時,如何使用箭頭鍵在ASP.NET gridview中進行導航(向上或向下)?
我可以使用javascript代碼和C#代碼在帶有向上和向下箭頭鍵的行之間移動。 我還實現了一個begin請求和end請求JS代碼,以保持回發時的滾動位置。
但是,我的問題是,滾動條不會上下移動以自動顯示突出顯示的行。 假設有100行,我選擇第15行,但是網格高度就像它只能顯示10行一樣,除非我們手動移動滾動條,否則它不會自動移動以通過箭頭鍵顯示選定的行。 如何通過移動滾動條確保這種同步或突出顯示行的可見性?
我的gridview沒有復選框。
請幫我。 它是我的代碼在這里:
<asp:GridView ID="gvCycles" runat="server" AutoGenerateColumns="False"
CssClass="grid"
AllowSorting="True"
ShowHeader="False"
ShowFooter="True"
OnSelectedIndexChanged="gvDeductionList_SelectedIndexChanged"
OnRowDataBound="gvDeductionList_RowDataBound" DataKeyNames="CycleID" onselectedindexchanging="gvCycles_SelectedIndexChanging"
>
<Columns>
<asp:BoundField DataField="CycleID" HeaderText="CycleID"
HtmlEncode="False"
SortExpression="CycleID">
<ItemStyle CssClass="GridViewHiddenColumn" />
</asp:BoundField>
我要做的是在回發時保持滾動位置是:
<script language="javascript" type="text/javascript">
// 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;
}
</script>
另外,我在keydown和keyup中有這個
if (e.keyCode == '38') {
document.getElementById('<%= controlCapture.ClientID %>').value = false;
document.getElementById('<%= shiftCapture.ClientID %>').value = false;
// up arrow
__doPostBack(pageId, "up");
}
else if (e.keyCode == '40') {
document.getElementById('<%= controlCapture.ClientID %>').value = false;
document.getElementById('<%= shiftCapture.ClientID %>').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 < gvCycles.Rows.Count-1)
{
gvCycles.SelectedIndex += 1;
}
}
else if (eventArgument == "up")
{
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線程
而且, 這是一個很棒的示例代碼
更新
我只是看了一下這里的代碼。 如果用如下所示的DIV包裝GridView,則“自動滾動”效果很好。 (我使用的是與此鏈接中給出的代碼相同的代碼,只是添加了具有CSS樣式的DIV。通過將后面的代碼中的for
循環更改for
n < 100
還增加了網格中顯示的記錄n < 100
)
<div class="scrollable">
<asp:GridView ID="gridView" runat="server" AutoGenerateColumns="False" OnRowCreated="gridView_RowCreated"
TabIndex="0" GridLines="Horizontal">
<Columns>
<asp:BoundField HeaderText="S#" DataField="sno">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
</asp:BoundField>
<asp:BoundField HeaderText="Random No" DataField="rndno">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
</asp:BoundField>
<asp:BoundField HeaderText="Date" DataField="date">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:BoundField>
<asp:BoundField HeaderText="Time" DataField="time">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#FFE0C0" />
<HeaderStyle BackColor="#FF8000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#FFC080" />
</asp:GridView>
</div>
而且,這是CSS
<style type="text/css">
.scrollable {
height: 460px;
width: 100%;
overflow: auto;
border: 0;
}
</style>
更新2
注釋您的JavaScript代碼(它具有__doPostBack,它將執行回發操作,並導致滾動條行為異常)
評論您的Page_Load
事件的else if
部分,由於您評論了JS代碼,我們將不再使用它
現在將以下代碼添加到您的頁面
的JavaScript
<script type="text/javascript">
var SelectedRow = null;
var SelectedRowIndex = null;
var UpperBound = null;
var LowerBound = null;
window.onload = function()
{
UpperBound = parseInt('<%= this.gvCycles.Rows.Count %>') - 1;
LowerBound = 0;
SelectedRowIndex = -1;
}
function SelectRow(CurrentRow, RowIndex)
{
if(SelectedRow == CurrentRow || RowIndex > UpperBound || RowIndex < LowerBound) return;
if(SelectedRow != null)
{
SelectedRow.style.backgroundColor = SelectedRow.originalBackgroundColor;
SelectedRow.style.color = SelectedRow.originalForeColor;
}
if(CurrentRow != null)
{
CurrentRow.originalBackgroundColor = CurrentRow.style.backgroundColor;
CurrentRow.originalForeColor = CurrentRow.style.color;
CurrentRow.style.backgroundColor = '#DCFC5C';
CurrentRow.style.color = 'Black';
}
SelectedRow = CurrentRow;
SelectedRowIndex = RowIndex;
setTimeout("SelectedRow.focus();",0);
}
function SelectSibling(e)
{
var e = e ? e : window.event;
var KeyCode = e.which ? e.which : e.keyCode;
if(KeyCode == 40)
SelectRow(SelectedRow.nextSibling, SelectedRowIndex + 1);
else if(KeyCode == 38)
SelectRow(SelectedRow.previousSibling, SelectedRowIndex - 1);
return false;
}
</script>
背后的代碼
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;";
}
}
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.