如何在asp：DataGrid中设置单元格的样式？

Question

如何在asp:DataGrid？

中设置单元格的（css）样式

---

我真正想要实现的目标是什么？一个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>

在这种情况下接受an asp:Repeater cannot work。

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

Bonus Chatter

ASP.net中的asp:DataGrid控件呈现多个单元格。每种样式的格式可以通过setting various formatting properties进行调整，例如：

• BackColor
• ForeColor
• Font

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

style="holiday blackout hassub"

奖金阅读

一些不相关的奖金阅读：

• Change the style of cell within datagrid
• MSDN: DataGridViewCellStyle Class
• 如何在asp中设置单元格的样式：ListView？
• Create a HTML table with an ASP repeater
• How to create a three column table in ASP.Net Repeater
• custom html code in a repeater
• MSDN: Cell Styles in the Windows Forms DataGridView Control

Answer 1

假设您实际上是指GridView而不是旧DataGrid，则可以GridViewRow使用TableCells和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"; } } 。

例如CssClass property：

{{1}}

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; }
}

渲染：