酷徒LOGO
0 0 评论
文章标签:箭头  Arrows  GRID  ARR  COL  column  Gridview  

介绍

有些时候,用户在web应用程序中要求一些类似于 Windows 应用程序中的特性。 我在这里试图覆盖他们中的一个。 本文解释了如何使用 up/down/right 和左箭头在 GridView 中导航控件。 我想提出一个能在所有主流浏览器中工作的最佳解决方案。 这并不是我最初认为的挑战。 借助 jQuery ( 我已经开始喜欢这个脚本库了,我越来越喜欢这个脚本库了),我可以用最少的编码来完成它。

便笺

我在 GridView 单元格中只假设文本框为控件。 但这可以适用于其他控制,如dropdowns等。

GridView代码

<asp:GridViewID="GridView1"runat="server" AutoGenerateColumns="False"CellPadding="4" ForeColor="#333333"GridLines="None"><RowStyleBackColor="#E3EAEB"/><Columns><asp:TemplateFieldHeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left"><ItemTemplate><asp:TextBoxrunat="server"ID="txtColumn1" Text='<%# Bind("Column1") %>'></asp:TextBox></ItemTemplate><HeaderStyleHorizontalAlign="Left"></HeaderStyle></asp:TemplateField><asp:TemplateFieldHeaderText="Coulumn1" HeaderStyle-HorizontalAlign="Left"><ItemTemplate><asp:TextBoxrunat="server"ID="txtColumn2" Text='<%# Bind("Column2") %>'></asp:TextBox></ItemTemplate><HeaderStyleHorizontalAlign="Left"></HeaderStyle></asp:TemplateField><asp:TemplateFieldHeaderText="Coulumn1"HeaderStyle-HorizontalAlign="Left"><ItemTemplate><asp:TextBoxrunat="server"ID="txtColumn3" Text='<%# Bind("Column3") %>'></asp:TextBox></ItemTemplate><HeaderStyleHorizontalAlign="Left"></HeaderStyle></asp:TemplateField></Columns><FooterStyleBackColor="#1C5E55"ForeColor="White"Font-Bold="True"/><PagerStyleBackColor="#666666"ForeColor="White"HorizontalAlign="Center"/><SelectedRowStyleBackColor="#C5BBAF"Font-Bold="True"ForeColor="#333333"/><HeaderStyleBackColor="#1C5E55"Font-Bold="True"ForeColor="White"/><EditRowStyleBackColor="#7C6F57"/><AlternatingRowStyleBackColor="White"/></asp:GridView>

C# 代码

下面的代码用于生成虚拟数据表并将它的绑定到 GridView:

publicpartialclass _Default : System.Web.UI.Page
{
 protectedvoid Page_Load(object sender, EventArgs e)
 {
 BindGrid(10);
 }
 privatevoid 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输出

Description: gridview1.jpg

jQuery代码

下面的代码用于绑定所有文本框和下拉框的keydown事件。 每次用户使用箭头键时,keydown事件都会被触发。 在下面的代码中,我假设页面将只在 GridView 中包含文本框和下拉 List。 如果在 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();
 }
 returnfalse;
 }
 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();
 }
 returnfalse;
 }
});//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();
 }
 returnfalse;
 }
 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 keyboardvar gridview = $("#GridView1");
 $.keynavigation(gridview);
 });
</script>

我已经用一个名为 KeyNavigationPlugIn.aspx的演示页面更新了示例应用程序。



文章标签:COL  GRID  Gridview  column  ARR  箭头  Arrows  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备17041772号-2  |  如果智培  |  酷兔英语  |  帮酷