ASP.NET中鍵盤上下左右鍵控制DataGrid的項選擇和分頁
步驟如下：
ASP.NET中鍵盤上下左右鍵控制DataGrid的項選擇和分頁
步驟如下：
1、在.aspx頁面中拖入2個控件服務器控件ID:DataGrid1和客戶端控件hidden類型的ID:tbxIndex
代碼如下：
<div style="Z-INDEX:105;LEFT:8px;WIDTH:100%;POSITION:absolute;TOP:144px;align:center">
<asp:DataGrid id="DataGrid1" runat="server" AllowPaging="True" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:BoundColumn HeaderText="索引">
<HeaderStyle Wrap="False" HorizontalAlign="Center" Width="36px"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="cpid" HeaderText="項目ID">
<HeaderStyle Wrap="False" HorizontalAlign="Center" Width="72px"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="cpname" HeaderText="項目名稱">
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
</asp:BoundColumn>
</Columns>
<PagerStyle HorizontalAlign="Right" Wrap="False" Mode="NumericPages"></PagerStyle>
</asp:DataGrid>
</div>
<input type="hidden" runat="server" id="tbxIndex" style="Z-INDEX: 106; LEFT: 8px; POSITION: absolute; TOP: 104px; Design_Time_Lock: True"
Design_Time_Lock="True">
2、在.aspx中放入如下js代碼
<script language="javascript">
function tr_move(et)
{
et.style.backgroundColor="red";
var dpdnNow = et.children.item(0);
window.document.getElementById("tbxIndex").value = dpdnNow.innerText;
}
function tr_mout(et)
{
et.style.backgroundColor="#ffffff";
}
function IsKeyDown()
{
var objTbRows = window.document.getElementById("DataGrid1").rows;
var objIndex = parseInt(window.document.getElementById("tbxIndex").value);
//鍵盤向下
if(window.event.keyCode == 40)
{
TableGetBackColor(1);
}
//鍵盤向上
if(window.event.keyCode == 38)
{
TableGetBackColor(-1);
}
//鍵盤向左分頁
if(window.event.keyCode == 37)
{
if(objIndex == -1)
{
objIndex = 0;
}
var pageIndex = parseInt((objIndex) / (window.document.getElementById("DataGrid1").rows.length - 2));
if(objIndex >= parseInt(objTbRows(1).cells(0).innerText) && pageIndex <= parseInt(objTbRows(objTbRows.length - 2).cells(0).innerText))
{
pageIndex = pageIndex - 1;
}
var objTableN = "DataGrid1$_ctl14$_ctl"+pageIndex;
__doPostBack(objTableN,'');
}
//鍵盤向右分頁
if(window.event.keyCode == 39)
{
if(objIndex == -1)
{
objIndex = 0;
}
var pageIndex = parseInt((objIndex + 1) / (window.document.getElementById("DataGrid1").rows.length - 2));
var objTableN = "DataGrid1$_ctl14$_ctl"+(pageIndex+1);
__doPostBack(objTableN,'');
}
}
function TableGetBackColor(objValue)
{
var nowValue = window.document.getElementById("tbxIndex").value;
var objTbRows = window.document.getElementById("DataGrid1").rows;
for(var iRow = 1; iRow < objTbRows.length - 1; iRow ++)
{
var objRow = objTbRows(iRow);
if(parseInt(nowValue) + objValue == parseInt(objRow.cells(0).innerText))
{
if(objValue == 1)
{
tr_move(objRow);
tr_mout(objTbRows(iRow - 1));
break;
}
else if(objValue == -1)
{
tr_move(objTbRows(iRow));
tr_mout(objTbRows(iRow+1));
break;
}
}
}
}
</script>
3、加上如下代碼：
<body language="javascript" onkeydown="IsKeyDown()" ms_positioning="GridLayout">
4、編寫對應的後臺代碼.cs文件中
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
DataGrid1.CurrentPageIndex = 0;
BindDataGrid();
this.tbxIndex.Value = "-1";
}
// 在此處放置用戶代碼以初始化頁面
}
/// <summary>
/// 綁定DataGrid
/// </summary>
private void BindDataGrid()
{
string strCon = "workstation id=(local);packet size=4096;user id=sa;data source=(local);persist security info=True;initial catalog=CPRO;password=1234";
string strSql = "select top 100 * from cpro";
System.Data.SqlClient.SqlConnection conn = new SqlConnection(strCon);
System.Data.SqlClient.SqlDataAdapter ada = new SqlDataAdapter(strSql,strCon);
DataSet ds = new DataSet();
ada.Fill(ds);
DataGrid1.DataSource = ds;
DataGrid1.DataBind();
}
private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemIndex < 0)
return;
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem ||
e.Item.ItemType == ListItemType.SelectedItem)
{
e.Item.Cells[0].Text = Convert.ToString(DataGrid1.CurrentPageIndex * DataGrid1.PageSize +e.Item.ItemIndex);
e.Item.Attributes.Add("onmouseover","tr_move(this)");
e.Item.Attributes.Add("onmouseout","tr_mout(this)");
}
}
private void DataGrid1_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
DataGrid1.CurrentPageIndex = e.NewPageIndex;
BindDataGrid();
this.tbxIndex.Value = Convert.ToString(DataGrid1.CurrentPageIndex * DataGrid1.PageSize - 1);
}
ok運行下試試