Javascript 如何使用箭头键在ASP.NET gridview中导航（向上或向下）？

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

我能够使用javascript代码和C代码通过上下箭头键移动行。我还实现了一个开始请求和结束请求JS代码，用于在回发时维护滚动位置

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

我的gridview没有复选框

请帮帮我。这里是我的代码：

我在回发时保持滚动位置所做的是：

<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和keydup中有这个

 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");

问题：我不知道在哪里使用你在codeproject中提到的代码，当我按下向下键或向上箭头键时，它应该自动移动滚动条。我没有分页

页面加载代码

看看这条线

还有一个很好的示例代码

更新

我只是看了一下代码。如果使用DIV包装GridView，则自动滚动效果良好，如下所示。我使用的代码与中给出的相同，只是添加了带有CSS样式的DIV。还通过将代码隐藏中的for循环更改为n<100，增加了网格中显示的记录数

代码隐藏

---

希望这有帮助

有什么想法吗？有人能帮我用javascript代码来实现这一点吗？我在整个互联网上找不到这方面的任何来源。23个视图，还没有答案！首先分享你的代码。如果没有看到你的代码，别人怎么能提供帮助呢？山姆，再次感谢你，我不知道如何在我的gridview中使用它。看，我没有桌子，只有gridview。如果您阅读了作者提到的最后一行内容，那么作者只为grid的左右箭头键编写了文章。我希望它只适用于向上和向下，当我传递我拥有的gridview名称时，它不起作用。我做得对吗？好的，给我点时间。我正在做一些工作，很快就会看到这个。干杯是的，我来自维多利亚。你从哪里来的？您还可以共享页面加载和keyup和keydown JS代码吗？我对div中的属性进行了注释，并通过粘贴代码使用了如上所述的样式类scrollable。然后我还评论了我的JS代码，它包含了所有的按键向上和向下事件，现在我看到两个滚动条：D lol好吧，我所有的退出功能都被破坏了，因为在row中，在箭头键向下事件中没有选择。所以你没有按照我的要求做。不需要评论你的DIV，就放在那里吧。还有，不要用样式添加新的DIV。我建议您不要使用DIV。然后按照我更新的答案Update 2Sam中的步骤操作。谢谢，它部分有效，但并不总是有效。只有当我向下滚动并选择最后一行，然后按向上箭头键时，它才起作用。而且，让我告诉你，当我使用begin请求启用JS代码来维护滚动位置时，问题再次出现，它不会自动滚动。因此，我恐怕这不是最后的解决办法。或者可以做任何调整？Sam，现在我再次尝试了你的代码或建议，它根本不起作用，甚至现有的功能也不起作用OK，你投票并接受这个答案，因为它解决了你的初始问题，使用箭头键上下移动，然后用你当前的逻辑创建一个新问题，所以我们将重点放在这个问题上？

 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");

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);
                }
            }
        }
    }

<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>

<style type="text/css">
    .scrollable {
        height: 460px;
        width: 100%;
        overflow: auto;
        border: 0;
    }
    </style>

<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;";
        }
    }