使用上下左右箭头在GridView中导航列和行
4.53/5 (14投票s)
实现使用上下左右箭头在GridView中导航列和行。
引言
有时用户会在Web应用程序中要求一些类似于Windows应用程序的功能。我在这里尝试涵盖其中一个。本文解释了如何使用上下左右箭头在GridView中导航控件。我希望找到一个最佳解决方案，该解决方案可以在所有主流浏览器中工作。正如我最初认为的那样，这并不具有挑战性。借助jQuery（太棒了，我使用得越多就越喜欢这个脚本库），我能够用最少的代码来实现它。
注意
我假设GridView单元格中的控件仅为文本框。但它可以应用于其他控件，例如下拉列表等。
GridView代码
<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>
C# 代码
以下代码用于生成虚拟数据表并将其绑定到GridView
public partial class _Default : 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();
}
}
GridView输出
jQuery代码
以下代码用于绑定所有文本框和下拉列表的keydown事件。每次用户使用箭头键时，keydown事件都会被触发。在下面的代码中，我假设页面中只有GridView中的文本框和下拉列表。如果您的网页中有其他文本框和下拉列表位于GridView之外，请确保在jQuery代码中仅选择GridView中的控件。
//JQuery Code
<script language="javascript" 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>
摘要
我在IE 8.0、Google Chrome 5.0和Firefox 3.0.3中测试了此示例。希望这能帮助那些正在寻找使用按键在GridView中导航的人。
我已经更新了代码以突出显示所选行。
更新
上述代码被重构为jQuery插件。您需要在您的源文件中包含“jquery.keynavigation.js”文件。以下是获取上述功能所需的两行代码
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//For navigating using left and right arrow of the keyboard
var gridview = $("#GridView1");
$.keynavigation(gridview);
});
</script>
我已经使用名为KeyNavigationPlugIn.aspx的演示页面更新了示例应用程序。