1

これが私のDataListです：

<asp:DataList id="DataList" Visible="false" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" runat="server">
        [Contents Removed]
</asp:DataList>

これにより、各項目がスパンでラップされたマークアップが生成されます。そこから、これらの各スパンを 3 列の行に分割したいと思います。理想的には、次のようなものが欲しいです：

<div>
 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
</div>
<div>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
</div>
[etc]

これに最も近いのは、RepeatColumns を「3」に設定<br>し、DataList の 3 つの項目ごとに a を挿入することです。

 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
<br>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
<br>

これは私を少し近づけますが、実際にはうまくいきません-私はまだ、私ができるようにしたい方法でレイアウトを制御することはできません.

誰でもこれを改善する方法を提案できますか? 上記の例を実装できれば完璧ですが、 ( の代わりに<br>a を挿入するなど) よりも柔軟である限り、あまり洗練されていないソリューションも受け入れます。<span class="clear"></span><br>

4

4 に答える 4

3

これをリピーターとして実装する代わりに、何らかの理由でデータリストを本当に使用する必要がある場合は、次のようなことを試すことができます。

<asp:DataList ID="dataList" runat="server" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" OnItemDataBound="dataList_ItemDataBound">
    <HeaderTemplate>
        <div>
    </HeaderTemplate>
    <SeparatorTemplate>
        </div><div>
    </SeparatorTemplate>
    <ItemTemplate>
        <%# Container.DataItem %></ItemTemplate>
    <FooterTemplate>
        </div></FooterTemplate>
</asp:DataList>

protected void dataList_ItemDataBound(object sender, DataListItemEventArgs e) {
    if (e.Item.ItemType == ListItemType.Separator) {
        if ((e.Item.ItemIndex + 1) % 3 != 0) {
            e.Item.Controls.Clear();
        }
    }
}
于 2009-01-16T03:41:19.873 に答える
1

元の生成されたマークアップを変更することなく、CSS を使用して目的のレイアウトを実現できます。スパン タグはデフォルトでインラインで表示されるため、インライン ブロックに切り替えてこれらのスパンに 33% の幅を指定するとうまくいくはずです。

より具体的には、DataList コントロールの CssClass プロパティを「threecolumns」などの値に設定します。

次の CSS スタイルを定義します。

<style type="text/css">
.threecolumns span 
{
    display: inline-block;
    width: 33%;
}
</style>

VS2008 は、インライン ブロックが表示プロパティの有効な設定ではないことを通知する場合があります。ほとんどすべてのブラウザがサポートしているので、あまり心配する必要はありません。

于 2009-01-16T05:23:27.980 に答える
1

戸惑うかもしれませんが、リピーターとカスタム アイテム テンプレートを使用するだけではどうですか?

于 2009-01-16T03:26:01.277 に答える