2
我想實現GridView的向上和向下的鍵盤導航功能，使用jQuery。我寫的代碼相同，但它的工作只有一次的錯誤。GridView控件上，下導航使用jQuery
步驟來重現錯誤
- 複製我的示例代碼分別到你的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>
嘗試刪除jquery代碼中的最後一行：next.click（）; – freshbm 2013-02-22 08:58:57
@freshbm沒有區別。 – 2013-02-22 09:28:13