gpt4 book ai didi

jquery - 使用 jQuery 的 GridView 向上和向下导航

转载 作者:行者123 更新时间:2023-12-01 04:15:41 26 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

我已经解决了你的问题,你不能在表格行上绑定(bind) 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/

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

关于jquery - 使用 jQuery 的 GridView 向上和向下导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15020095/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com