2014-03-03 32 views
-1

我正在使用VS 2005,ASP.NET,C#.NET和JQUERY。 我有更新面板中的gridview。 我有一個單元格的標籤索引$(this).attr('tabIndex') 我必須將焦點移到下一個可編輯單元格。 如何找到下一個單元格的選項卡索引,並把焦點事先將其按箭頭鍵時如何使用jQuery將焦點集中到gridview中的下一個可編輯列

感謝 喬治NT

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmPLEntryMonthWise.aspx.cs" Inherits="frmPLEntryMonthWise" %> 
     <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
      Namespace="System.Web.UI" TagPrefix="asp" %> 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

     <html xmlns="http://www.w3.org/1999/xhtml" > 
     <head id="Head1" runat="server"> 
      <title>P & L Entry - All Account (Cumulative)</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
       <style type="text/css"> 
       .GVFixedHeader { font-weight:bold; border-width:1px 1px;border:solid #d3d3d3; position:relative; top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);} 
      </style> 
      <script language="javascript" type="text/javascript"> 
       function getScrollBottom(p_oElem) 
       { 
        return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight; 
       } 
      </script> 
     <link href="includes/text.css" type="text/css" rel="stylesheet" /> 
     <link href="style.css" type="text/css" rel="stylesheet" /> 

     <script type="text/javascript" src="includes/jquery.js">function DIV1_onclick() {} 

     </script> 

     <style type="text/css"> 
     .container { 
      width:900px; 
      height:1000px; 
      overflow:hidden; 
      padding:20px; 
     } 
     </style> 
     <script type="text/javascript" src="includes/plBooking.js"> function isNumberKey() {}</script> 
     <script type="text/javascript" src="includes/plBooking.js">function checkBlankPressTab() {}</script> 
     <script type="text/javascript" src="includes/plBooking.js">function checkBlankPressOnblur() {}</script> 
     <script type="text/javascript" src="includes/plBooking.js"> function checkValidNo(){}</script> 
     <script type="text/javascript" src="includes/plBooking.js"> function fnSum(){}</script> 
     <script type="text/javascript" src="includes/plBooking.js">function fnRound(){}</script> 
     <script type="text/javascript" src="includes/plBooking.js"> function isNumberKey1(){}</script> 
     <script type="text/javascript" src="includes/plBooking.js"> function isNumberKey2(){}</script> 
     <script type="text/javascript" src="includes/plBooking.js">function appendZero(){ }</script> 
     <script type="text/javascript" src="includes/plBooking.js"> function validate_Save(){}</script> 
     <script src="JQuery/jquery-1.4.1.js" type="text/javascript"></script> 

      <script src="JQuery/jquery.keynavigation.js" type="text/javascript"></script> 

      <%-- <script language="javascript" type="text/javascript"> 
       $(document).ready(function() { 
        //For navigating using left and right arrow of the keyboard 
        var gridview = $("#grdView"); 
        $.keynavigation(gridview); 
       }); 
      </script>--%> 
      <script language="javascript" type="text/javascript"> 
      $("body").keydown(function(e) { 
      alert('hi'); 
      if(e.keyCode == 40) { // down 
       $(':focus').nextAll(':has(["tabIndex"]):not([tabIndex=-1])').focus(); 
      } 
      else if(e.keyCode == 38) { // up 
       $(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();    
     } 
      else if(e.keyCode == 37) { // left 
       $(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();    
     } 
      else if(e.keyCode == 39) { // right 
       $(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();    
     } 
     }); 
     </script> 
     <%--<script type="text/javascript" src="includes/plBooking.js"> function fnShowTotal(){}</script>--%> 

     <%--<link href="cal/popcalendar.css" rel="stylesheet" type="text/css" />--%> 
     </head> 
     <body id="body" runat="server" onkeydown=""> 

     <form id="Form1" runat="server" > 

     <div class="container" id="DIV1" onclick="return DIV1_onclick()" style="width: 1219px; height: 540px;" > 
      <asp:ScriptManager id="ScriptManager1" runat="server"> 
       <Scripts> 
        <asp:ScriptReference Path="~/FixFocus.js" /> 
       </Scripts> 
      </asp:ScriptManager>  
       <div >  
       <asp:Label ID="lblDetails" runat="server" Font-Bold="True" ForeColor="Black" Text="Company Name" Width="1080px"></asp:Label>  
       <asp:Label ID="lblExRate" runat="server" Font-Bold="True" ForeColor="Black" Text="Exchange Rate" ></asp:Label> 
      <table style="height: 325px; width: 98%;" > 

        <tr> 
         <td align="left" colspan="4" valign="top" style="width: 682px; height: 243px;"><strong></strong> 

          <div style="height:340px; width:1198px; overflow-y:scroll; overflow: auto;"> 
           <asp:UpdatePanel id="UpdatePanel1" runat="server" ><contenttemplate> 
          <asp:GridView ID="grdView" runat="server" Width="900px" AutoGenerateColumns="False" ShowFooter="True" CssClass="grid" DataKeyNames="accCode" style="overflow: scroll" OnRowDataBound="grdView_RowDataBound" > 
            <HeaderStyle CssClass="GVFixedHeader" /> 
            <FooterStyle CssClass="GVFixedFooter" />         
           <Columns> 
            <asp:TemplateField HeaderText="Acc.No." >         
             <ItemStyle Width="70px" /> 
             <ItemTemplate> 
              <asp:Label ID="lblAccCode" runat="server" Text='<%# Eval("accUserCode") %>'></asp:Label> 
             </ItemTemplate> 
             <FooterTemplate> 
             </FooterTemplate> 

             <ControlStyle Width="70px" /> 
            </asp:TemplateField> 
            <asp:TemplateField HeaderText="P &amp; L Account Name">         
             <ItemStyle Width="190px" /> 
             <ItemTemplate> 
              <asp:Label ID="lblAccName" runat="server" Text='<%# Eval("accName") %>'></asp:Label> 
             </ItemTemplate> 
             <FooterTemplate> 
             <asp:TextBox ID="txtTotal" Width="190px" runat="server" Font-Bold="true" Font-Size="Medium" style="text-align:right;" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" Text="Total" ></asp:TextBox> 
             </FooterTemplate> 
             <ControlStyle Width="190px" /> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="D">         
             <ItemStyle Width="10px" /> 
             <ItemTemplate> 
              <asp:Label ID="lblDeprec" runat="server" ></asp:Label> 
             </ItemTemplate> 
             <FooterTemplate> 
             </FooterTemplate> 
             <ControlStyle Width="10px" /> 
            </asp:TemplateField> 
            <asp:TemplateField HeaderText="B">         
             <ItemStyle Width="10px" /> 
             <ItemTemplate> 
              <asp:Label ID="lblProv" runat="server" ></asp:Label> 
             </ItemTemplate> 
             <FooterTemplate> 
             </FooterTemplate> 
             <ControlStyle Width="10px" /> 
            </asp:TemplateField> 
            <asp:TemplateField HeaderText="C">         
             <ItemStyle Width="10px" /> 
             <ItemTemplate> 
              <asp:Label ID="lblCons" runat="server" ></asp:Label> 
             </ItemTemplate> 
             <FooterTemplate> 
             </FooterTemplate> 
             <ControlStyle Width="10px" /> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="M-1 Cumul." > 
            <HeaderTemplate> 
             <asp:Label Width="60px" ID="lblHCumul" runat="server" Text="<%# fillHeaderCumul() %> " ></asp:Label> 
            </HeaderTemplate>               
             <ItemStyle Width="60px" /> 
             <ItemTemplate> 
              <asp:TextBox Width="60px" ID="lblPCum" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("PCum") %>' TabIndex="-1" ></asp:TextBox> 
             </ItemTemplate> 
             <FooterTemplate> 
             <asp:TextBox ID="lblFPCum" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" /> 
             </FooterTemplate>  
             <ControlStyle Width="60px" /> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="Budget"> 
            <HeaderTemplate> 
            <asp:Label Width="60px" ID="lblHBudget" runat="server" Text='<%# fillHeaderBudget() %>'></asp:Label> 
            </HeaderTemplate>        
             <ItemStyle Width="60px" /> 
             <ItemTemplate> 
              <asp:TextBox Width="60px" ID="lblMBudget" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("MBudget") %>' TabIndex="-1"></asp:TextBox> 
             </ItemTemplate> 
             <FooterTemplate> 
             <asp:TextBox ID="lblFMBudget" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" /> 
             </FooterTemplate> 
             <ControlStyle Width="60px" /> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="P &amp; L As Per Book"> 
            <ItemStyle Width="80px" BackColor="White"/> 
            <ItemTemplate> 
            <asp:TextBox Width="80px" ID="txtPL" runat="server" text='<%# Eval("PL") %>' BorderStyle="None" BorderColor="white" > 
            </asp:TextBox> 
            </ItemTemplate> 
            <FooterTemplate> 
            <%--<asp:TextBox ID="lblFPL" runat="server" />--%> 
             <asp:TextBox ID="lblFPL" Width="80px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" /> 
            </FooterTemplate> 
            <ControlStyle Width="80px" /> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="Adjustments"> 
            <ItemStyle Width="80px" BackColor="White"/> 
            <ItemTemplate> 
            <asp:TextBox Width="80px" ID="txtCorrection" runat="server" text='<%# Eval("Correction") %>' BorderStyle="None" BorderColor="white" > 
            </asp:TextBox> 
            </ItemTemplate> 
            <FooterTemplate> 
             <asp:TextBox ID="lblFCorrection" Width="80px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" /> 
             </FooterTemplate> 
            <ControlStyle Width="80px" />       
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="Cumul."> 
            <HeaderTemplate> 
             <asp:Label Width="60px" ID="lblHMCumul" runat="server" Text="<%# fillHeaderMonthCumul() %> "></asp:Label> 
            </HeaderTemplate>        
             <ItemStyle Width="60px" /> 
             <ItemTemplate> 
              <asp:TextBox Width="60px" ID="lblMCum" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("MCum") %>' TabIndex="-1"></asp:TextBox> 
             </ItemTemplate> 
             <FooterTemplate> 
             <asp:TextBox ID="lblFMCum" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" /> 
             </FooterTemplate> 
             <ControlStyle Width="60px" /> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText="Month Actual">        
             <ItemStyle Width="60px" /> 
             <ItemTemplate> 
              <asp:TextBox Width="60px" ID="lblDiffAmt" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("DAmt") %>' TabIndex="-1"></asp:TextBox> 
             </ItemTemplate> 
             <FooterTemplate> 
             <asp:TextBox ID="lblFDAmt" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" /> 
             </FooterTemplate> 
             <ControlStyle Width="60px" /> 


            </asp:TemplateField> 

            <asp:TemplateField HeaderText="Var. In %">         
             <ItemStyle Width="60px" /> 
             <ItemTemplate> 
              <asp:TextBox Width="60px" ID="lblDiffPcnt" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("DPcnt") %>' TabIndex="-1"></asp:TextBox> 
             </ItemTemplate> 
            </asp:TemplateField>  

            <asp:TemplateField HeaderText="Remarks" >       
            <ItemStyle Width="195px" BackColor="White" /> 
            <ItemTemplate> 
            <asp:TextBox Width="195px" ID="txtComment" runat="server" text='<%# Eval("Comment") %>' BorderStyle="None" BorderColor="white" > 
            </asp:TextBox> 
            <asp:HiddenField ID="HFaccCode" runat="server" Value='<%# Eval("accCode") %>' /> 
            <asp:HiddenField ID="HFprovision" runat="server" Value='<%# Eval("provision") %>' /> 
            <asp:HiddenField ID="HFdepreciation" runat="server" Value='<%# Eval("depreciation") %>' /> 
            <asp:HiddenField ID="HFconsolidation" runat="server" Value='<%# Eval("consolidation") %>' /> 
            <asp:HiddenField ID="HFaccType" runat="server" Value='<%# Eval("accAccType") %>' /> 
            <asp:HiddenField ID="HFplentryCurrentMonthstatus" runat="server" Value='<%# Eval("plentryCurrentMonthstatus") %>' /> 

            </ItemTemplate> 
            <ControlStyle Width="195px" /> 
            </asp:TemplateField> 

            <asp:BoundField DataField="provision" HeaderText="provision" Visible="False" /> 
            <asp:BoundField DataField="accCode" HeaderText="provision" Visible="False" /> 
           </Columns> 



          </asp:GridView></contenttemplate> 
           </asp:UpdatePanel> 
           </div>      

        </td>       
        </tr>    
        </table>   
        </div> 

       <tr> 
        <td colspan="2" style="height: 15px"> &nbsp;&nbsp 
        <strong><asp:Label ID="lblName" runat="server" Text="Version : "></asp:Label></strong> 
         <asp:TextBox ID="txtVersion" runat="server" CssClass="txt" Width="100px" ReadOnly="true"></asp:TextBox> 
         </td> 
         <td align="center" style="width: 100px; height: 15px">&nbsp;&nbsp;    
         </td> 
       </tr> 
      <table > 
       <tr> 

        <td colspan="2" style="height: 27px"> 
        <asp:HyperLink ID="hlBack" runat="server" NavigateUrl="~/frmPL.aspx" Font-Underline="True">Back</asp:HyperLink> 
        &nbsp;<strong><asp:Label ID="Label3" runat="server" Text="D -" ></asp:Label></strong>   
         <asp:Label ID="Label4" runat="server" ForeColor="blue" Text="Cash Flow Account" Width="130px" style="left: 8px; position: relative; top: 0px"></asp:Label> 
        &nbsp;<strong><asp:Label ID="Label1" runat="server" Text="B -" ></asp:Label></strong>   
         <asp:Label ID="Label2" runat="server" ForeColor="blue" Text="Budget Account" Width="120px" style="left: 8px; position: relative; top: 0px"></asp:Label> 
         &nbsp;<strong><asp:Label ID="Label7" runat="server" Text="C -" ></asp:Label></strong>   
         <asp:Label ID="Label8" runat="server" ForeColor="Blue" Text="Consolidation Account" Width="132px" style="left: 8px; position: relative; top: 0px"></asp:Label> 
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <strong> <asp:Label ID="Label20" runat="server" Text="Var. in % - "></asp:Label></strong> 
        <asp:Label ID="Label6" runat="server" ForeColor="blue" Text="Difference between Month Actual and Cumul Previous Months" ></asp:Label> 
         <%--<strong><asp:Label ID="Label5" runat="server" Text="Var. -" ></asp:Label></strong>   
         <asp:Label ID="Label6" runat="server" ForeColor="blue" Text="Difference between current month and previous month" ></asp:Label>--%> 
         <asp:Label ID="lblError" runat="server" ForeColor="Red" Text="Error" Width="224px" style="left: 8px; position: relative; top: 0px"></asp:Label> 
         </td> 
         <td align="center" style="width: 100px; height: 46px"> 
          &nbsp;</td> 
         <td align="center"> 
          &nbsp; 
         <asp:Button ID="btnShow" runat="server" CssClass="button" Text="Show Total" Width="100px" OnClick="btnShow_Click" /></td> 
          <td align="center" style="width: 100px; height: 27px"> 
         <asp:Button ID="btnSave" runat="server" CssClass="button" OnClick="btnSave_Click" 
          Text="Save" Width="100px" /><%-- <asp:Button ID="btnExit" runat="server" CssClass="button" OnClick="btnExit_Click" 
          Text="Exit" Width="100px" />&nbsp;--%></td> 
       </tr> 

      </table> 
      </div> 
      </form> 
     </body> 
     </html> 

回答

0

要捕獲向上/向下+切換到與下一首/上細胞ATTR的tabIndex:

$("body").keydown(function(e) { 
    if(e.keyCode == 40) { // down 
     $(':focus').nextAll(':has(["tabIndex"]').focus(); 
    } 
    else if(e.keyCode == 38) { // up 
     $(':focus').prevAll(':has(["tabIndex"]').focus();    
} 
}); 

UPDATE: 更新選擇忽略-1的tabindex

$("body").keydown(function(e) { 
    if(e.keyCode == 40) { // down 
     $(':focus').nextAll(':has(["tabIndex"]):not([tabIndex=-1])').focus(); 
    } 
    else if(e.keyCode == 38) { // up 
     $(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();    
} 
}); 

UPDATE: 請參閱此琴: http://jsfiddle.net/6a6e6/

$(document).ready(function() { 
$("body").keydown(function (e) { 
    if (e.keyCode == 40) { // down 
     $(':focus').nextAll('input:not([tabIndex=-1]):first').focus() 
    } else if (e.keyCode == 39) { //right 
     $(':focus').nextAll('input:not([tabIndex=-1]):first').focus() 
    } else if (e.keyCode == 38) { //up 
     $(':focus').prevAll('input:not([tabIndex=-1]):first').focus() 
    } else if (e.keyCode == 37) { //left 
     $(':focus').prevAll('input:not([tabIndex=-1]):first').focus() 
    } 
}); 
}); 

更新:

爲了與在GridView這項工作,你有 - 你必須tabindex屬性添加到在你的網格模板定義中實際的asp:textboxes - TabIndex =「1」/ etc .. 例如:

<ItemTemplate> 
<asp:TextBox Width="80px" ID="txtCorrection" runat="server" text="whatever" BorderStyle="None" BorderColor="white" TabIndex="1" > 
</asp:TextBox> 
</ItemTemplate> 

我試圖在ASP應用程序並將其轉換爲小寫的情況下,所以你必須更新的keydown功能包含:

if (e.keyCode == 40) { // down 
    $(':focus').nextAll('input:not([tabindex=-1]):first').focus() 
} else if (e.keyCode == 39) { //right 
    $(':focus').nextAll('input:not([tabindex=-1]):first').focus() 
} else if (e.keyCode == 38) { //up 
    $(':focus').prevAll('input:not([tabindex=-1]):first').focus() 
} else if (e.keyCode == 37) { //left 
    $(':focus').prevAll('input:not([tabindex=-1]):first').focus() 
} 
+0

嗨,所有隻讀列具有tabIndex -1。我從$(this).attr('tabIndex')獲得了當前單元格tabindex。現在我想要在同一行中的下一個單元格的tabindex。如果它是-1,則不需要焦點。焦點應該到tabindex不等於-1的下一個單元格 – user3253876

+0

@ user3253876請參閱已更新的答案。 –

+0

我應該在哪裏調用這個函數,在gridview的keydown或body keydown中 – user3253876

相關問題