DataList列分布

Question

我正在使用.NET aspx编程。在asp:DataList组件中，我希望均匀地分配列，即使不是所有列都被分配为ItemTemplate。

例如。

<asp:DataList id="test" runat="server" Width="90%" gridlines="None"
    RepeatDirection="Horizontal" 
    RepeatColumns="4" HorizontalAlign="Left">
<ItemTemplate> ... </ItemTemplate>
</asp:DataList>

在运行时，绑定到datalist的数组只包含2个元素。我仍然希望在这四个空格中均匀地分配列。

Answer 1

如果您致力于使用DataList，那么有两种合理的方法可以实现这一点。

首先，您可以将您的ItemTemplate div 封装在一个固定宽度的div中。

<ItemTemplate>
  <div style="width: 250px;">
  ...
  </div>
</ItemTemplate>

其次，如果您的DataList必须展开或收缩以适应查看器的屏幕，则可以使用jquery.。

在页面加载之后，我们将获取datalist的计算客户端宽度，并调整要均匀分布的列。

<asp:DataList id="MyDataList" ClientIDMode="Static" runat="server" Width="90%" gridlines="None"
    RepeatDirection="Horizontal" 
    RepeatColumns="4" HorizontalAlign="Left">
  <ItemTemplate>  
    <div class="DataListItem">
    ....
    </div>
  </ItemTemplate>
</asp:DataList>

在我们看到jquery之前，先做两个简短的说明

• ClientIDMode="Static“上的datalist
• Every数据列表项将被包装在带有类"DataListColumn"

的div中。

在jquery中，在加载页面时，您可以获得计算出的datalist宽度，如下所示

$(document).ready(function () {   
    $(".DataListItem").width($("#MyDataList").width() / 4); // Set the column width    
});

尽管如此，您可能希望只使用一个中继器，这样您就可以更好地控制实际列。