如何设置DEV GridView控件,获取当前单元格的焦点,按回车会获取下一行同一列的单元格焦点
时间: 2023-12-16 07:05:45 浏览: 83
要实现这样的功能,可以使用GridView控件的内置事件和属性。具体步骤如下:
1. 在GridView控件中设置属性`AutoGenerateColumns="false"`,手动添加列。
2. 为GridView控件绑定数据源。
3. 为GridView控件添加事件`RowDataBound`,在事件中为每一行的单元格添加`onkeydown`事件。
```aspx
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Age" HeaderText="Age" />
<asp:BoundField DataField="Gender" HeaderText="Gender" />
</Columns>
</asp:GridView>
```
```csharp
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 绑定数据源
GridView1.DataSource = GetData();
GridView1.DataBind();
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// 为每一行的单元格添加onkeydown事件
foreach (TableCell cell in e.Row.Cells)
{
cell.Attributes.Add("onkeydown", "return MoveNextCell(event)");
}
}
}
private DataTable GetData()
{
// 模拟数据
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Age");
dt.Columns.Add("Gender");
dt.Rows.Add("Tom", "20", "Male");
dt.Rows.Add("Jerry", "18", "Female");
dt.Rows.Add("Alice", "22", "Female");
return dt;
}
```
4. 编写JavaScript函数`MoveNextCell`,在函数中判断按下的键是否是回车键,如果是则获取当前单元格的行和列,然后焦点移动到下一行同一列的单元格。
```javascript
function MoveNextCell(e) {
var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if (keyCode == 13) { // 回车键
var currentCell = e.srcElement || e.target;
var currentRow = currentCell.parentNode.parentNode;
var currentRowIndex = currentRow.rowIndex;
var currentCellIndex = currentCell.cellIndex;
var nextRow = currentRow.nextSibling;
while (nextRow) { // 查找下一行
if (nextRow.nodeType == 1) {
var nextCell = nextRow.cells[currentCellIndex];
if (nextCell) { // 如果存在同一列的单元格
nextCell.focus();
break;
}
}
nextRow = nextRow.nextSibling;
}
return false;
}
return true;
}
```
通过以上步骤,就可以实现在GridView控件中获取当前单元格的焦点,按回车会获取下一行同一列的单元格焦点的功能了。
阅读全文