DataGrid 模版列设置焦点问题

一个DataGrid有一个几模版列,模版列里面放的都是TextBox,请问用JavaScript怎样通过键盘上的
上,下,左,右键来设置相邻两行或者两列间模版列之间的TextBox控件得到焦点

解决方案 »

  1.   

    这会有点麻烦，幸好，模版列里的控件命名还有些规律可循，利用之可勉强实现，完整例子：
    <asp:DataGrid id="DataGrid1" style="Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server"
    AutoGenerateColumns="False">
    <Columns>
    <asp:TemplateColumn>
    <ItemTemplate>
    <asp:TextBox id="txt1" runat="server"></asp:TextBox>
    </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn>
    <ItemTemplate>
    <asp:TextBox id="txt2" runat="server"></asp:TextBox>
    </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn>
    <ItemTemplate>
    <asp:TextBox id="txt3" runat="server"></asp:TextBox>
    </ItemTemplate>
    </asp:TemplateColumn>
    </Columns>
    </asp:DataGrid>注意：我的DataGrid里面的TextBox都是以“txt”加数字来命名，左右箭头键以此为依据
      

  2.   

    在<head>里添加一个脚本函数：
    <script language="javascript">
    function TableCellMove(curTxtID)
    {
    if(event.keyCode>36 && event.keyCode<41)
    {

    var gridID = curTxtID.substring(0,curTxtID.indexOf("__ctl"));
    var i = new Number(curTxtID.substring(curTxtID.indexOf("__ctl")+5,curTxtID.lastIndexOf("_txt")));
    var j = new Number(curTxtID.substring(curTxtID.lastIndexOf("_txt")+4,curTxtID.length));

    if(event.keyCode==37){j=j-1;}
    else if(event.keyCode==38){i=i-1;}
    else if(event.keyCode==39){j+=1;}
    else if(event.keyCode==40){i+=1;}

    var nextTxtID = gridID + "__ctl" + i + "_txt"+j;
    var nextTxt = document.getElementById(nextTxtID);
    if(nextTxt!=null){nextTxt.focus();}
    }
    }

    </script>
      

  3.   

    最后，需要在ItemDataBound事件中给每一个TextBox添加脚本函数：
    private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
    {
    if(e.Item.ItemIndex>-1)
    {
    foreach(TableCell cell in e.Item.Cells)
    {
    TextBox txt = (TextBox)cell.Controls[1];
    txt.Attributes.Add("onkeydown","TableCellMove('"+txt.ClientID+"');");
    }
    }
    }