asp.net - 设置 Zebra DataList 表

Question

首先，我需要从数据库中绑定一个表，以便每一行都是可编辑的。我决定选择 DataList，因为它有<EditItemTemplate>属性，而中继器没有。

我需要创建一个 Zebra 表，为此我创建了以下 CSS 类：

.row:nth-of-type(odd)
{
background-color:Green;
}

问题是，当我在转发器中使用此类时，它工作正常，因为转发器的构建方式可以让您对行和列进行编码。例如：

<asp:Repeater>
<HeaderTemplate>
    <Table ...>
</HeaderTemplate>
<ItemTemplate>
  <tr Class="row">
    <td> ... </td>
    <td> ... </td>
  </tr>
</ItemTepmlate>
<FooterTemplate></Table></FooterTemplate>

但是，当我以同样的方式构建我的 DataList 时，它看起来很奇怪而且很乱。所以这就是我的 Datalist 的构建方式：

<asp:DataList ID="dlStages" runat="server" DataKeyField="Priority" OnCancelCommand="dlStages_CancelCommand"
    OnEditCommand="dlStages_EditCommand" 
    OnUpdateCommand="dlStages_UpdateCommand" BorderWidth="2" 
     GridLines="Both" CellPadding="20" CellSpacing="20" Width="99%" 
    onitemdatabound="dlStages_ItemDataBound">

    <HeaderTemplate>

            <th>
                Priority
            </th>
            <th>
                Stage
            </th>
            <th>
                Description
            </th>
            <th>
                Command
            </th>
            <th>
                Expected End Date
            </th>
    </HeaderTemplate>
    <ItemTemplate>

            <td>
                <%# Eval("Priority") %>
            </td>
            <td>
                <%# Eval("StatusName") %>
            </td>
            <td>
                <%# Eval("Comments") %>
            </td>
            <td>
                <asp:LinkButton ID="lbtnEdit" runat="server" Text="Edit" CommandName="edit"></asp:LinkButton>
            </td>
            <td>
                <%# Eval("ExpectedEndDate", "{0:dd-MM-yyyy}")%>
            </td>

    </ItemTemplate>        
    <EditItemTemplate>

            <td>
                <%# Eval("Priority") %>
            </td>
            <td>
                <%# Eval("StatusName") %>
            </td>
            <td>
                <asp:TextBox ID="txtComments" runat="server" Text='<%# Eval("Comments") %>' Width="800px"
                    Height="48px" TextMode="MultiLine"></asp:TextBox>
            </td>
            <td>
                <asp:LinkButton ID="lbtnUpdate" runat="server" Text="Update" CommandName="update"></asp:LinkButton>
                /
                <asp:LinkButton ID="lbtnCancel" runat="server" Text="Cancel" CommandName="cancel"></asp:LinkButton>
            </td>
            <td>

                <asp:TextBox runat="server" ID="txtDate"></asp:TextBox>
                <asp:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="txtDate"
                    TargetControlID="txtDate" Format="dd-MM-yyyy">
                </asp:CalendarExtender>
            </td>
    </EditItemTemplate>
</asp:DataList>

为了给DataList中的每一行设置css类，我在下面的代码后面写了代码：

protected void dlStages_ItemDataBound(object sender, DataListItemEventArgs e)
{
    e.Item.CssClass = "row";
}

问题是它不会为我创建斑马表。相反，它以灰色绘制第一列（我不知道它是从哪里来的）。

谁能告诉我我的代码有什么问题？在我的情况下，如何在 DataList 控件中实现 ZEBRA 表？

提前致谢

PS我的问题可能不清楚，所以如果需要澄清，我会更详细地解释。

Answer 1

请参阅此相关问题：在 Datalist 中创建表

1. 您尚未<tr>在模板中指定标签，因此DataList只是生成孤立<td>标签

2. 您可以使用RepeatLayout值为 的属性Table来为您DataList生成一个开始和结束<table>标记。

Answer 2

我知道这是一个老问题，但你应该设置ItemStyle和的AlternatingItemStyle属性，asp:DataList以便像这样获得你想要的条带 ItemStyle="normalRow" AlternatingItemStyle="greenRow"

您的 datalist 标记的开头应如下所示：

<style type="text/css">
.normalRow { background-color: white; }
.greenRow { background-color: green; }
</style>
<asp:DataList ID="dlStages" runat="server" DataKeyField="Priority" OnCancelCommand="dlStages_CancelCommand"
    OnEditCommand="dlStages_EditCommand" 
    OnUpdateCommand="dlStages_UpdateCommand" BorderWidth="2" 
     GridLines="Both" CellPadding="20" CellSpacing="20" Width="99%" 
    ItemStyle="normalRow" AlternatingItemStyle="greenRow"
    onitemdatabound="dlStages_ItemDataBound">

Answer 3

您可以在 DataList 控件的 CssClass 属性中使用引导类：

CssClass="table table-striped"

然后，覆盖表条带：

.table-stripedCSS > tbody > tr:nth-child(odd) > td,
.table-stripedCSS > tbody > tr:nth-child(odd) > th {
    background-color:red;

    /*Choose your own color here*/
}

更多信息：
Bootstrap table striped：如何更改条纹背景颜色？