asp.net - 如何在 asp:DataGrid 中设置单元格的样式？

Question

如何设置单元格的（css）样式asp:DataGrid？

---

我真正想要达到什么目的？一个html table，我控制每个单元格的 html 内容，以及每行和每个单元格的 css 样式：

<TABLE>
   <TR class="odd available">
      <TD class="holiday available hassub firstColumn">
          <P ...>...
      <TD class="blackout">
          <A href="...">...</A>
      <TD style="available">
          <SPAN ...>...</SPAN>
      <TD class="booked">
          <DIV ...>...</DIV>
      <TD class="orphan available">
          <DIV ...>...</DIV>
      <TD style="orphan booked checked">
          <SPAN ...>...</SPAN>
          <A href="...">...</A>
          <DIV ...>...</DIV>
   </TR>
   <TR class="blackout">
      <TD>34 points
      <TD><%# GetHtmlForCell() %>
   </TR>
</TABLE>

并且在这种情况下不能正常工作是公认的。asp:Repeater

我有需要生成的 HTML；我只需要看看 ASP.net 是否可以生成所需的 html。我猜不是，因为“WebForms”意味着您不生成 HTML。

奖金喋喋不休

ASP.net 中的一个asp:DataGrid控件呈现多个单元格。可以通过设置各种格式属性来调整每种样式的格式，例如：

• BackColor
• ForeColor
• Font

但是没有办法调整Style单元格的，例如

style="holiday blackout hassub"

奖金阅读

一些不相​​关的奖金阅读：

• 更改数据网格中单元格的样式
• MSDN：DataGridViewCellStyle 类
• 如何在 asp:ListView 中设置单元格的样式？
• 使用 ASP 中继器创建 HTML 表
• 如何在 ASP.Net Repeater 中创建三列表
• 中继器中的自定义 html 代码
• MSDN：Windows 窗体 DataGridView 控件中的单元格样式

Answer 1

假设您实际上是指 aGridView而不是 old DataGrid，您可以使用and的CssClass属性。GridViewRowTableCells

例如在RowDataBound：

protected void Grid_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        if(e.Row.RowIndex == 0)
        {
            e.Row.CssClass = "odd available";
            e.Row.Cells[0].CssClass = "holiday available hassub firstColumn";
            // ....
            e.Row.Cells[4].CssClass = "orphan booked checked";
        }
        else if(e.Row.RowIndex == 1)
            e.Row.CssClass = "blackout";
    }
}

Answer 2

如果您处理 OnRowDataBound，这很容易完成。例子：

<style>
.class25
{
    background-color:Red;  
}
.class25a
{
    font-weight:bolder;
}
.class23
{
    background-color:Yellow;  
}
.class23a
{
    font-size:20px;
}
.class33
{
    background-color:Fuchsia;  
}
.class33a
{
    font-style:italic;
}
</style>
<asp:GridView ID="customGrid" runat="server" OnRowDataBound="customGrid_RowDataBound">

现在在后面的代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindData();
    }
}

private void BindData()
{
    List<Employee> emp = new List<Employee>(){
        new Employee{Age=25,ID=1,First="John",Last="Smith"},
        new Employee{Age=23,ID=2,First="Juan",Last="Cabrera"},
        new Employee{Age=33,ID=3,First="Richard",Last="Mar"}
    };

    customGrid.DataSource = emp;
    customGrid.DataBind();

}

protected void customGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if ((e.Row.DataItem as Employee).Age == 25)
            e.Row.Cells[0].Attributes.Add("class", "class25 class25a");
        else if((e.Row.DataItem as Employee).Age == 23)
            e.Row.Cells[0].Attributes.Add("class", "class23 class23a");
        else
            e.Row.Cells[0].Attributes.Add("class", "class33 class33a");
    }
}

public class Employee
{
    public int ID { get; set; }
    public int Age { get; set; }
    public string First { get; set; }
    public string Last { get; set; }
}

渲染：