首先,我需要从数据库中绑定一个表,以便每一行都是可编辑的。
我决定选择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时,它看起来很奇怪而且很凌乱。
这就是我的数据列表的构建方式:

<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表?

提前致谢

附言
我的问题可能不清楚,因此如果需要澄清,我将进一步详细解释。

最佳答案

请参阅以下相关问题:Creating table inside Datalist


您尚未在模板中指定<tr>标记,因此DataList只是生成孤立的<td>标记
您可以使用值为RepeatLayoutTable属性,以使DataList为您生成开始和结束<table>标记。

关于asp.net - 设置Zebra DataList表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13937293/

10-12 00:31