将Div添加到GridView [英] Add Div to GridView

问题描述

我试图在gridview表中的一列的td内添加一个div。我发现这个问题与我正在尝试做的类似，但答案还不够彻底，使我无法按照自己的想法进行工作。基本上，我从DataTable dt自动生成gridview的数据：

  GridView1.DataSource = dt; 
 GridView1.DataBind（）; 
  

gridview的html在这里：

 < div class =gridTablestyle =width：100％> 
< asp：GridView runat =serverID =GridView1OnRowDataBound =GridView1_RowDataBound> 
<列> 
< asp：TemplateField> 
< ItemTemplate> 
< div id =insideDivrunat =server>< / div> 
< / ItemTemplate> 
< / asp：TemplateField> 
< /列> 
< / asp：GridView> 
< / div> 
  

我希望在标题为评论的列中有一个内部div。我用我的OnRowDataBound函数得到了这个：
$ b $ pre $ protected void GridView1_RowDataBound（object sender，GridViewRowEventArgs e）
{
if（e.RowType == DataControlRowType.DataRow）
{
HtmlGenericControl div =（HtmlGenericControl）e.Row.FindControl（insideDiv）;





$ b但我不确定如何去从这里。我需要的是能够访问我的CSS中的div，因为该列的格式与其他格式不同。

解决方案

您可以使用数据绑定表达式设置div的内容，并设置您将引用的类属性你的CSS样式。假设内容是由数据源的 Comments 字段给出的，它可能如下所示：

 < ASP：模板列> 
< ItemTemplate> 
< div class =innerDiv> 
<％＃Eval（评论）％> 
< / div> 
< / ItemTemplate> 
< / asp：TemplateField> 
  

然后，您可以为 innerDiv class：

 < style type =text / css> 
 .innerDiv 
 {
 ... 
} 
< / style> 
  



更新

在您的评论（下文）中，您提到您希望替换自动生成的列的内容，而不是使用TemplateField添加列。为此，您可以使用与我们在隐藏列中使用的技术类似的技术

为评论字段的列索引定义一个变量：

  private int commentsColIndex; 
  

从DataTable获取其值：

  commentsColIndex = dt.Columns [Comments]。Ordinal; 
 GridView1.DataSource = dt.DefaultView; 
 GridView1.DataBind（）; 
  

将其内容替换为 RowDataBound 事件处理程序，并设置div元素的 class 属性：



  protected void GridView1_RowDataBound（object sender，GridViewRowEventArgs e）
 {
 if（e.RowType == DataControlRowType.DataRow）
 {
 TableCell commentsCell = e.Row。细胞[commentsColIndex]; 
 HtmlGenericControl div = new HtmlGenericControl（DIV）; 
 div.Attributes.Add（class，innerDiv）; 
 div.InnerHtml = commentsCell.Text; 
 commentsCell.Text = string.Empty; 
 commentsCell.Controls.Add（div）; 
} 
 ... 
} 
  



N.B。如果在该行中移动或删除了其他单元格，则可能必须为 commentsColIndex 添加偏移量。




I'm trying to add a div inside the td of one column in my gridview table. I found this question that is similar to what I am trying to do, but the answer was not thorough enough for me to make it work how I want. Basically, I am generating the data for my gridview automatically from a DataTable dt:

GridView1.DataSource = dt;
GridView1.DataBind();

The html for the gridview is here:

<div class="gridTable" style="width:100%">
  <asp:GridView runat="server"  ID="GridView1" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div id="insideDiv" runat="server"></div>
            </ItemTemplate>
        </asp:TemplateField>           
    </Columns>
  </asp:GridView>
</div>

I want there to be an internal div on the column titled "Comments". I got this far with my OnRowDataBound function:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
        {
            HtmlGenericControl div = (HtmlGenericControl)e.Row.FindControl("insideDiv");

        }
}

But I am unsure how to go from here. What I need is to be able to access the div in my css, because that column is formatted differently than the others.

解决方案

You can set the content of the div with a data binding expression, and set a class attribute that you will refer to in your CSS styles. Assuming that the content is given by the Comments field of the data source, it could look like this:

<asp:TemplateField>
    <ItemTemplate>
        <div class="innerDiv" >
            <%# Eval("Comments") %>
        </div>
    </ItemTemplate>
</asp:TemplateField>

You can then add the style definition for the innerDiv class:

<style type="text/css">
    .innerDiv
    {
        ...
    }
</style>

UPDATE

In your comment (below), you mention that you would prefer to replace the content of the auto-generated column rather than add a column with a TemplateField. For that, you can use a technique similar to the one we used in Hide Column in GridView from Code Behind.

Define a variable for the column index of the Comments field:

private int commentsColIndex;

Get its value form the DataTable:

commentsColIndex = dt.Columns["Comments"].Ordinal;
GridView1.DataSource = dt.DefaultView;
GridView1.DataBind();

Replace its content by a div element in the RowDataBound event handler, and set the class attribute of the div element:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        TableCell commentsCell = e.Row.Cells[commentsColIndex];
        HtmlGenericControl div = new HtmlGenericControl("DIV");
        div.Attributes.Add("class", "innerDiv");
        div.InnerHtml = commentsCell.Text;
        commentsCell.Text = string.Empty;
        commentsCell.Controls.Add(div);
    }
    ...
}

N.B. You may have to add an offset to commentsColIndex if some other cells are moved or deleted in the row.

这篇关于将Div添加到GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！