使用jQuery进行GridView上下导航
我正在尝试使用jQuery实现GridView向上和向下键盘导航function。 我已经编写了相同的代码， 但有一个错误，它只能工作一次 。
重现错误的步骤
- 将我的示例代码分别复制到WebForm.aspx和WebForm.aspx.cs后，运行该表单
- 单击第二条记录（例如）以选择GridView记录
- 按向下箭头键选择下一条记录
- 再次按下箭头键选择下一条记录（但这里不起作用）
现在，如果您再次单击任何一行，向下箭头键将再次起作用。
请说明我在这里缺少的东西。
WebForm1.aspx的
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代码） – 虽然正确地执行它仍然无法正常工作
$(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 $('# tr[id]').click(function () { $('# tr[id]').removeClass("selectedRowNew").addClass("normalRow"); $(this).removeClass("normalRow").addClass("selectedRowNew"); }); $('# 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 = $(" .selectedRowNew"); if (!row.is(":last-child")) { //check for last row in grid $(" tr[id]").removeClass("selectedRowNew").addClass("normalRow"); var next = row.next(); next.removeClass("normalRow").addClass("selectedRowNew"); } } function toggleRowSelectionUp() { var row = $(" .selectedRowNew"); if (!row.is(":last-child")) { // check for first row in grid $(" tr[id]").removeClass("selectedRowNew").addClass("normalRow"); var prev = row.prev(); prev.removeClass("normalRow").addClass("selectedRowNew"); } } });
我已经找到了你的问题，你不能绑定表行上的keydown。 但是你可以为keydown添加监听器到body：
$("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来演示function： http ： //jsfiddle.net/Ps3WL/31/
添加了对网格开始和结束的检查
你可以用我的线替换你的线
(e.keycode==40) $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();