GridView的向上和向下导航使用jQuery [英] GridView Up and Down Navigation using jQuery
本文介绍了GridView的向上和向下导航使用jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想实现GridView的向上和向下的键盘导航功能，使用jQuery。我已经写了code为相同，但有一个错误，这是工作只有一次
步骤来重现错误
- 复制我的样本code你WebForm.aspx和WebForm.aspx.cs后
分别运行窗体 - 单击2号记录（例如）选择GridView的记录
- preSS向下箭头键选择下一个记录
- preSS再次向下箭头键选择下一个记录（但它不会在这里工作）
现在，如果你点击任何一行再次向下箭头键一次重新工作。
请注明什么，我在这里失踪。
WebForm1.aspx的
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;风格类型=文/ CSS＆GT;
.normalRow
{
背景颜色：白色;
颜色：黑色;
}
.selectedRowNew
{
背景颜色：＃b0c4de;
颜色：黑色;
}
＆LT; /风格＆GT; ＆LT;脚本SRC =JS / jQuery的-1.6.1.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
//选择器前pression TR [ID]将确保点击事件添加到唯一的数据行，因为我们增加了id属性
//从code仅次于数据行 $（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]）点击（函数（）{。
$（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]'）removeClass移除（selectedRowNew）addClass（normalRow）。;
$（本）.removeClass（normalRow）addClass（selectedRowNew）;
}）; $（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]'）。鼠标悬停（函数（）{
$（本）的.css（{光标：默认，光标：默认}）;
}）; $（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]'）。KEYDOWN（函数（事件）{
如果（event.key code ==40）{
$（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]'）removeClass移除（selectedRowNew）addClass（normalRow）。; VAR行= $（本）.closest（'TR'）;
VAR下一= row.next（）;
next.removeClass（normalRow）addClass（selectedRowNew）;
next.focus（）;
next.click（）;
}
}）; }）; ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV＆GT;
＆LT; ASP：GridView控件ID =GridView1=服务器OnRowDataBound =GridView1_RowDataBound＆GT;
＆LT; / ASP：GridView的＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
WebForm1.aspx.cs中
保护无效的Page_Load（对象发件人，EventArgs的发送）
{
DataTable的DT =新的DataTable（）;
dt.Columns.Add（ID，typeof运算（的Int32））;
dt.Columns.Add（名，typeof运算（字符串））; dt.Rows.Add（新的对象[] {1，约翰}）;
dt.Rows.Add（新的对象[] {2，詹姆斯}）;
dt.Rows.Add（新的对象[] {3，恭}）;
dt.Rows.Add（新的对象[] {4，迈克尔}）;
dt.Rows.Add（新的对象[] {5，大卫}）;
dt.Rows.Add（新的对象[] {6，苏珊}）; GridView1.DataSource = DT;
GridView1.DataBind（）;
} 保护无效GridView1_RowDataBound（对象发件人，GridViewRowEventArgs E）
{
如果（e.Row.RowType == DataControlRowType.DataRow）
{
e.Row.Attributes.Add（ID，0）;
}
}
（更新JS code）的 - 仍然没有工作，虽然通过它踩着正确
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
//选择器前pression TR [ID]将确保点击事件添加到唯一的数据行，因为我们增加了id属性
//从code仅次于数据行 $（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]）点击（函数（）{。
$（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]'）removeClass移除（selectedRowNew）addClass（normalRow）。;
$（本）.removeClass（normalRow）addClass（selectedRowNew）;
}）; $（'＃＆LT;％= GridView1.ClientID％GT; TR [ID]'）。鼠标悬停（函数（）{
$（本）的.css（{光标：默认，光标：默认}）;
}）; // @freshbm：您code到这里
$（身体）的keydown（函数（五）{
如果（e.key code == 40）//向下箭头键code
toggleRowSelectionDown（）;
如果（e.key code == 38）//向上箭头键code
toggleRowSelectionUp（）;
}）; //这个code检测是向上或向下的箭头 功能toggleRowSelectionDown（）{
VAR行= $（＆LT;％= GridView1.ClientID％GT; .selectedRowNew）;
如果（row.is（！最后一子））{//检查网格中的最后一行
$（＆LT;％= GridView1.ClientID％GT; TR [ID]）removeClass移除（selectedRowNew）addClass（normalRow）。;
VAR下一= row.next（）;
next.removeClass（normalRow）addClass（selectedRowNew）;
}
} 功能toggleRowSelectionUp（）{
VAR行= $（＆LT;％= GridView1.ClientID％GT; .selectedRowNew）;
如果（row.is（！最后一子））{//检查电网中的第一行
$（＆LT;％= GridView1.ClientID％GT; TR [ID]）removeClass移除（selectedRowNew）addClass（normalRow）。;
。VAR preV =行preV（）;
prev.removeClass（normalRow）addClass（selectedRowNew）;
}
}
}）;
＆LT; / SCRIPT＆GT;
解决方案
我已经想通了你的问题，你不能绑定的keydown上表行。但是你可以添加监听到身体的keydown：
$（身体）的keydown（函数（五）{
如果（e.key code == 40）//向下箭头键code
toggleRowSelectionDown（）;
如果（e.key code == 38）//向上箭头键code
toggleRowSelectionUp（）;
}）; //这个code检测是向上或向下的箭头
我已经把你的code函数，方便阅读和维护：
函数toggleRowSelectionDown（）{
VAR行= $（＃＆LT;％= GridView1.ClientID％GT; .selectedRowNew）;
如果（row.is（！最后一子））{//检查网格中的最后一行
$（＃＆LT;％= GridView1.ClientID％GT; TR [ID]）removeClass移除（selectedRowNew）addClass（normalRow）。;
VAR下一= row.next（）;
next.removeClass（normalRow）addClass（selectedRowNew）;
}
}功能toggleRowSelectionUp（）{
VAR行= $（＃＆LT;％= GridView1.ClientID％GT; .selectedRowNew）;
如果（row.is（！第一子））{//检查电网中的第一行
。VAR preV =行preV（）;
如果（prev.attr（ID））{//避免标题行
$（＃＆LT;％= GridView1.ClientID％GT; TR [ID]）removeClass移除（selectedRowNew）addClass（normalRow）。;
prev.removeClass（normalRow）addClass（selectedRowNew）;
} }
}
我创造了这个的jsfiddle演示功能：
http://jsfiddle.net/Ps3WL/31/
增加了对电网的开始和结束检查
I am trying to achieve GridView Up and Down keyboard navigation feature, using jQuery. I have written code for the same, but with a bug that it is working only once.
Steps to reproduce the bug
- After copying my sample code to your WebForm.aspx and WebForm.aspx.cs respectively, run the form
- Click on the 2nd record (for eg.) to select the GridView record
- Press down arrow key to select the next record
- Press down arrow key again to select next record (but it won't work here)
Now, if you will click on any row again the down arrow key will work for once again.
Please indicate what I am missing here.
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");
}
}
(updated js code) - still not working although stepping through it properly
<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>
解决方案
I've figured out your problem, you can't bind keydown on table row. But you can add listener to body for 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
I have put your code in functions for easy reading and maintenance:
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");
}
}
}
I created this jsfiddle to demonstrate functionality: http://jsfiddle.net/Ps3WL/31/
Added check for start and end of the grid
这篇关于GridView的向上和向下导航使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
