在使用GridView控件时,我发现键盘上的方向键只能用来在TextBox内部移动(我的GridView中只有TextBox),不能像Excel那样,按下方向键就能实现上下左右四个方向的跨单元格移动。 为了能使用方向键实现跨单元格移动,我找到了示例。但是按照示例写完代码后,我发现任然不能跨单元格移动,下面是我参考的示例的地址 http://www.codeproject.com/Articles/110180/GridView-column-and-row-navigation-using-up-down-r 下面是我完整的前台代码和后台代码!请大家帮忙看看问题出在哪里!谢谢-----------------------前台--------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<RowStyle BackColor="#E3EAEB" />
<Columns>
<asp:TemplateField HeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtColumn1" Text='<%# Bind("Column1") %>'></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtColumn2" Text='<%# Bind("Column2") %>'></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtColumn3" Text='<%# Bind("Column3") %>'></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#1C5E55" ForeColor="White" Font-Bold="True" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//For navigating using left and right arrow of the keyboard
$("input[type='text'], select").keydown(
function (event) {
if ((event.keyCode == 39) || (event.keyCode == 9 && event.shiftKey == false)) {
var inputs = $(this).parents("form").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
inputs[idx + 1].parentNode.parentNode.style.backgroundColor = "Aqua";
inputs[idx + 1].focus();
}
return false;
}
if ((event.keyCode == 37) || (event.keyCode == 9 && event.shiftKey == true)) {
var inputs = $(this).parents("form").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
if (idx > 0) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
inputs[idx - 1].parentNode.parentNode.style.backgroundColor = "Aqua"; inputs[idx - 1].focus();
}
return false;
}
});
//For navigating using up and down arrow of the keyboard
$("input[type='text'], select").keydown(
function (event) {
if ((event.keyCode == 40)) {
if ($(this).parents("tr").next() != null) {
var nextTr = $(this).parents("tr").next();
var inputs = $(this).parents("tr").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
nextTrinputs = nextTr.find("input[type='text'], select");
if (nextTrinputs[idx] != null) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
nextTrinputs[idx].parentNode.parentNode.style.backgroundColor = "Aqua";
nextTrinputs[idx].focus();
}
}
else {
$(this).focus();
}
}
if ((event.keyCode == 38)) {
if ($(this).parents("tr").next() != null) {
var nextTr = $(this).parents("tr").prev();
var inputs = $(this).parents("tr").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
nextTrinputs = nextTr.find("input[type='text'], select");
if (nextTrinputs[idx] != null) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
nextTrinputs[idx].parentNode.parentNode.style.backgroundColor = "Aqua";
nextTrinputs[idx].focus();
}
return false;
}
else {
$(this).focus();
}
}
});
}); </script>
</form>
</body>
</html>-----------------------后台------------------------
[code=C#]
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;public partial class Default7 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindGrid(10);
} private void BindGrid(int rowcount)
{
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("Column1", typeof(String)));
dt.Columns.Add(new System.Data.DataColumn("Column2", typeof(String)));
dt.Columns.Add(new System.Data.DataColumn("Column3", typeof(String)));
for (int i = 1; i < rowcount + 1; i++)
{
dr = dt.NewRow();
dr[0] = "Row" + i.ToString() + " Col1";
dr[1] = "Row" + i.ToString() + " Col2";
dr[2] = "Row" + i.ToString() + " Col3";
dt.Rows.Add(dr);
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
}[/code]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<RowStyle BackColor="#E3EAEB" />
<Columns>
<asp:TemplateField HeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtColumn1" Text='<%# Bind("Column1") %>'></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtColumn2" Text='<%# Bind("Column2") %>'></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtColumn3" Text='<%# Bind("Column3") %>'></asp:TextBox>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#1C5E55" ForeColor="White" Font-Bold="True" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//For navigating using left and right arrow of the keyboard
$("input[type='text'], select").keydown(
function (event) {
if ((event.keyCode == 39) || (event.keyCode == 9 && event.shiftKey == false)) {
var inputs = $(this).parents("form").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
inputs[idx + 1].parentNode.parentNode.style.backgroundColor = "Aqua";
inputs[idx + 1].focus();
}
return false;
}
if ((event.keyCode == 37) || (event.keyCode == 9 && event.shiftKey == true)) {
var inputs = $(this).parents("form").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
if (idx > 0) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
inputs[idx - 1].parentNode.parentNode.style.backgroundColor = "Aqua"; inputs[idx - 1].focus();
}
return false;
}
});
//For navigating using up and down arrow of the keyboard
$("input[type='text'], select").keydown(
function (event) {
if ((event.keyCode == 40)) {
if ($(this).parents("tr").next() != null) {
var nextTr = $(this).parents("tr").next();
var inputs = $(this).parents("tr").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
nextTrinputs = nextTr.find("input[type='text'], select");
if (nextTrinputs[idx] != null) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
nextTrinputs[idx].parentNode.parentNode.style.backgroundColor = "Aqua";
nextTrinputs[idx].focus();
}
}
else {
$(this).focus();
}
}
if ((event.keyCode == 38)) {
if ($(this).parents("tr").next() != null) {
var nextTr = $(this).parents("tr").prev();
var inputs = $(this).parents("tr").eq(0).find("input[type='text'], select");
var idx = inputs.index(this);
nextTrinputs = nextTr.find("input[type='text'], select");
if (nextTrinputs[idx] != null) {
$(this).parents("table").eq(0).find("tr").not(':first').each(function () {
$(this).attr("style", "BACKGROUND-COLOR: white; COLOR: #003399");
});
nextTrinputs[idx].parentNode.parentNode.style.backgroundColor = "Aqua";
nextTrinputs[idx].focus();
}
return false;
}
else {
$(this).focus();
}
}
});
}); </script>
</form>
</body>
</html>-----------------------后台------------------------
[code=C#]
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;public partial class Default7 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindGrid(10);
} private void BindGrid(int rowcount)
{
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("Column1", typeof(String)));
dt.Columns.Add(new System.Data.DataColumn("Column2", typeof(String)));
dt.Columns.Add(new System.Data.DataColumn("Column3", typeof(String)));
for (int i = 1; i < rowcount + 1; i++)
{
dr = dt.NewRow();
dr[0] = "Row" + i.ToString() + " Col1";
dr[1] = "Row" + i.ToString() + " Col2";
dr[2] = "Row" + i.ToString() + " Col3";
dt.Rows.Add(dr);
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
}[/code]
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货