ASP.NET TableCell OnSelected?
ASP.NET TableCell OnSelected?
所以,我必须从数据库中创建一个项目列表,我通常使用 GridView 来完成;但是,此客户要求当他们 select 列表中的项目时,它会自动在其他地方显示该项目的图片。
因此,我创建了 table,并根据后面的代码创建行来填充它。
这是table:
<asp:Table ID="tblWatches" CssClass="table table-striped" runat="server" Width="50%" BorderStyle="Double" BorderColor="Black">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="tblCell1">
<asp:Label ID="code" runat="server" Text="code"></asp:Label>
</asp:TableCell>
<asp:TableCell ID="tblCell2">
<asp:Label ID="stock" runat="server" Text="stock"></asp:Label>
</asp:TableCell>
<asp:TableCell ID="tblCell3">
<asp:Label ID="purchased" runat="server" Text="purchased"></asp:Label>
</asp:TableCell>
<asp:TableCell ID="tblCell4">
<asp:Label ID="price" runat="server" Text="price"></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
在后面的代码中,我创建了这样的行:
DataView view;
view = getWatches();
TableRow rowNew;
TableCell cellNew;
Label lblNew;
for (int i = 0; i < view.Count; i++)
{
rowNew = new TableRow();
tblWatches.Rows.Add(rowNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToString(view[i][1]);
cellNew.TabIndex = Convert.ToInt16(i + 1);
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToInt32(view[i][2]).ToString();
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToString(view[i][3]);
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToString(view[i][4]);
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
}
效果很好。它创建了行,我可以使用 Tab 键循环浏览它们。问题是,现在我希望能够使用 "onselect" 事件,因此当客户端循环浏览项目时,图像框会更新。
但是 TableCell 没有那个事件。有解决方法吗?这完全可能吗?
P.S.: 为什么标签循环?他们希望列表看起来像 Excel 电子表格,您可以使用箭头键在其中移动项目。我设法做到的最接近的是 TabIndex。
您提到的 TableCell
类型没有 OnSelected
事件,因此最简单的选择是在前端使用 jQuery 通过绑定焦点事件来解决它table 个单元格:
$(function() {
$("table[id$=tblWatches] tr td").on( "focus", function() {
var code = $(this).parent("tr").find("td:first-child > label").text();
// set img src here
});
});
然后根据图像文件的存储位置,使用产品代码在<img>
上设置src
路径。即 "/images/products/" + code + ".jpg"
或处理程序 "/productimage.ashx?code=" + code
所以,我必须从数据库中创建一个项目列表,我通常使用 GridView 来完成;但是,此客户要求当他们 select 列表中的项目时,它会自动在其他地方显示该项目的图片。
因此,我创建了 table,并根据后面的代码创建行来填充它。
这是table:
<asp:Table ID="tblWatches" CssClass="table table-striped" runat="server" Width="50%" BorderStyle="Double" BorderColor="Black">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="tblCell1">
<asp:Label ID="code" runat="server" Text="code"></asp:Label>
</asp:TableCell>
<asp:TableCell ID="tblCell2">
<asp:Label ID="stock" runat="server" Text="stock"></asp:Label>
</asp:TableCell>
<asp:TableCell ID="tblCell3">
<asp:Label ID="purchased" runat="server" Text="purchased"></asp:Label>
</asp:TableCell>
<asp:TableCell ID="tblCell4">
<asp:Label ID="price" runat="server" Text="price"></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
在后面的代码中,我创建了这样的行:
DataView view;
view = getWatches();
TableRow rowNew;
TableCell cellNew;
Label lblNew;
for (int i = 0; i < view.Count; i++)
{
rowNew = new TableRow();
tblWatches.Rows.Add(rowNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToString(view[i][1]);
cellNew.TabIndex = Convert.ToInt16(i + 1);
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToInt32(view[i][2]).ToString();
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToString(view[i][3]);
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
cellNew = new TableCell();
lblNew = new Label();
lblNew.Text = Convert.ToString(view[i][4]);
cellNew.Controls.Add(lblNew);
rowNew.Cells.Add(cellNew);
}
效果很好。它创建了行,我可以使用 Tab 键循环浏览它们。问题是,现在我希望能够使用 "onselect" 事件,因此当客户端循环浏览项目时,图像框会更新。 但是 TableCell 没有那个事件。有解决方法吗?这完全可能吗?
P.S.: 为什么标签循环?他们希望列表看起来像 Excel 电子表格,您可以使用箭头键在其中移动项目。我设法做到的最接近的是 TabIndex。
您提到的 TableCell
类型没有 OnSelected
事件,因此最简单的选择是在前端使用 jQuery 通过绑定焦点事件来解决它table 个单元格:
$(function() {
$("table[id$=tblWatches] tr td").on( "focus", function() {
var code = $(this).parent("tr").find("td:first-child > label").text();
// set img src here
});
});
然后根据图像文件的存储位置,使用产品代码在<img>
上设置src
路径。即 "/images/products/" + code + ".jpg"
或处理程序 "/productimage.ashx?code=" + code