Question

我正在尝试使用jQuery实现GridView向上和向下键盘导航功能。我已经编写了相同的代码，但是有一个只运行一次的错误。

重现错误的步骤

将我的示例代码复制到WebForm.aspx和WebForm.aspx.cs之后分别运行表格
单击第二条记录（例如）以选择GridView记录
按向下箭头键选择下一条记录
再次按下箭头键选择下一条记录（但这里不起作用）

现在，如果您再次单击任何一行，向下箭头键将再次起作用。

请说明我在这里缺少的东西。

WebForm1.aspx的

<head runat="server">
    <title></title>
    <style type="text/css">
        .normalRow
        {
            background-color: White;
            color: Black;
        }
        .selectedRowNew
        {
            background-color: #b0c4de;
            color: Black;
        }
    </style>

    <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // The selector expression tr[id] will ensure the click event is added to only data rows since we have added id attribute 
            // to only data rows from code behind

            $('#<%=GridView1.ClientID %> tr[id]').click(function () {
                $('#<%=GridView1.ClientID %> tr[id]').removeClass("selectedRowNew").addClass("normalRow");
                $(this).removeClass("normalRow").addClass("selectedRowNew");
            });

            $('#<%=GridView1.ClientID %> tr[id]').mouseover(function () {
                $(this).css({ cursor: "default", cursor: "default" });
            });

            $('#<%=GridView1.ClientID %> tr[id]').keydown(function (event) {
                if (event.keyCode == "40") {
                    $('#<%=GridView1.ClientID %> tr[id]').removeClass("selectedRowNew").addClass("normalRow");

                    var row = $(this).closest('tr');
                    var next = row.next();
                    next.removeClass("normalRow").addClass("selectedRowNew");
                    next.focus();
                    next.click();
                }
            });

        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
        </asp:GridView>
    </div>
    </form>
</body>

WebForm1.aspx.cs中

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(Int32));
            dt.Columns.Add("Name", typeof(String));

            dt.Rows.Add(new object[] { 1, "John" });
            dt.Rows.Add(new object[] { 2, "James" });
            dt.Rows.Add(new object[] { 3, "Christine" });
            dt.Rows.Add(new object[] { 4, "Michael" });
            dt.Rows.Add(new object[] { 5, "David" });
            dt.Rows.Add(new object[] { 6, "Susan" });

            GridView1.DataSource = dt;
            GridView1.DataBind();
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
        {
            if (e.Row.RowType == DataControlRowType.DataRow) 
            {
                e.Row.Attributes.Add("id", "0");
            }
        }

（更新的js代码） - 虽然正确地踩过它仍然无法正常工作

<script type="text/javascript">
        $(document).ready(function () {
            // The selector expression tr[id] will ensure the click event is added to only data rows since we have added id attribute 
            // to only data rows from code behind

            $('#<%=GridView1.ClientID %> tr[id]').click(function () {
                $('#<%=GridView1.ClientID %> tr[id]').removeClass("selectedRowNew").addClass("normalRow");
                $(this).removeClass("normalRow").addClass("selectedRowNew");
            });

            $('#<%=GridView1.ClientID %> tr[id]').mouseover(function () {
                $(this).css({ cursor: "default", cursor: "default" });
            });

            // @freshbm: your code goes here
            $("body").keydown(function (e) {
                if (e.keyCode == 40) //down arrow key code
                    toggleRowSelectionDown();
                if (e.keyCode == 38) // up arrow key code
                    toggleRowSelectionUp();
            }); //this code detect is it up or down arrow

            function toggleRowSelectionDown() {
                var row = $("<%=GridView1.ClientID%> .selectedRowNew");
                if (!row.is(":last-child")) { //check for last row in grid
                    $("<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                    var next = row.next();
                    next.removeClass("normalRow").addClass("selectedRowNew");
                }
            }

            function toggleRowSelectionUp() {
                var row = $("<%=GridView1.ClientID%> .selectedRowNew");
                if (!row.is(":last-child")) { // check for first row in grid
                    $("<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                    var prev = row.prev();
                    prev.removeClass("normalRow").addClass("selectedRowNew");
                }
            }
        });
    </script>

Answer 1

我已经找到了你的问题，你无法在表行上绑定keydown。但是你可以为keydown添加监听器：

$("body").keydown(function(e){
  if(e.keyCode == 40 ) //down arrow key code
    toggleRowSelectionDown();
  if(e.keyCode == 38) // up arrow key code
    toggleRowSelectionUp(); 
}); //this code detect is it up or down arrow

我已将您的代码放在函数中以便于阅读和维护：

function toggleRowSelectionDown() {
    var row = $("#<%=GridView1.ClientID%> .selectedRowNew");
    if (!row.is(":last-child")) { //check for last row in grid
        $("#<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
        var next = row.next();
        next.removeClass("normalRow").addClass("selectedRowNew");
    }
}

function toggleRowSelectionUp() {
                var row = $("#<%=GridView1.ClientID%> .selectedRowNew");
                if (!row.is(":first-child")) { // check for first row in grid
                    var prev = row.prev();
                    if (prev.attr('id')) { // to avoid header row
                        $("#<%=GridView1.ClientID%> tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                        prev.removeClass("normalRow").addClass("selectedRowNew");
                     }

                }
            }

我创建了这个jsfiddle来演示功能： http://jsfiddle.net/Ps3WL/31/

添加了对网格开始和结束的检查

Answer 2

你可以用我的行替换你的行

(e.keycode==40)            $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();

使用jQuery进行GridView上下导航

2 个答案: