ASP.NET中键盘上下左右键控制DataGrid的项选择和分页 - [转载]
2006-02-27 16:39
411 查看
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运行下试试
步骤如下：
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运行下试试
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp_NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- (转载)Asp.net中如何将DataSet写入xml文件,及如何将xml读出来绑定到DataGrid 选择自 kgdiwss 的 Blog
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- Asp.NET的DataGrid排序，选择和分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- [导入]让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- 让Asp.NET的DataGrid可排序、可选择、可分页
- 让Asp.NET的DataGrid可排序、可选择、可分页