Question

我有一个带有这样的模板的GridView：

<asp:GridView class="TableContainer" ID="prodGrid" runat="server" AutoGenerateColumns="False"
    EmptyDataText="No products" GridLines="None" CellPadding="4" OnRowCommand="prodGrid_RowCommand"
    OnRowDataBound="prodGrid_RowDataBound" EnableViewState="true" CssClass="Grid">
    <Columns>
      <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkSelectProduct" AutoPostBack="true" OnCheckedChanged="chkSelectedProduct_CheckChanged" runat="server">
                </asp:CheckBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Image ID="imgProd" ImageUrl="" AlternateText="image" runat="server" >
                </asp:Image>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle CssClass="Footer" />
    <RowStyle CssClass="RowStyle" />
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle CssClass="AlternatingRowStyle" />
</asp:GridView>

在html标记中它创建了一个包含行的表，我想在需要时添加一个div，以便我可以在其中添加消息或添加跨越两列。该消息不适合其中一个单元格，因此它看起来像这样：

Product    |      Image  |
-------------------------
Bananas        [image]


So if they select the bananas product and it doesnt have enough stock,
 i would like to insert something like

Product   |    Image    |
-------------------------
Bananas        [image]
--- DIV WITH MESSAGE SHOWS HERE ACCROSS THE GRID---

一旦他们确定了数量，我会隐藏它。我只是想知道如何在给定上面的网格的情况下插入div（将有多行），这样它可以在多个产品上显示消息。我想就如何处理它提出一些建议或想法。

Answer 1

考虑使用TemplateField中的其他图像，例如动态显示的警报类型图标（读取：感叹号），以及当用户将鼠标悬停在图像上时的工具提示，如果正确的标准满足，像这样：

<asp:TemplateField>
    <ItemTemplate>
        <asp:Image ID="imgProd" ImageUrl="" AlternateText="image" runat="server">
        </asp:Image>
        <asp:Image ID="alertProd" ImageUrl="" AlternateText="alert" 
                   runat="server" Visible="False">
        </asp:Image>
    </ItemTemplate>
</asp:TemplateField>

注意：我们使警报图像不可见，因为它可选地由网格视图的RowDataBound事件中的逻辑显示，如下所示：

protected void prodGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        // Check conditions here for whether or not to show alert image
        if(ShowAlertImage)
        {
            Image theAlertImage = e.Row.FindControl("alertProd") as Image;

            // Make sure we found the Image control before we try to set its tooltip
            if(theAlertImage != null)
            {
                theAlertImage.ToolTip = "Quantity is too low";
            }
        }
    }
}

现在，当用户将鼠标悬停在警报图像上时，他们会看到消息，通知他们产品存在问题。

在asp.net gridview中将div添加到行

1 个答案: