c# - 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>

在运行时，绑定(bind)到数据列表的数组只包含 2 个元素。我仍然希望这些列均匀分布在四个空间中。

Answer 1

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

首先，您可以将 ItemTemplate 包装在具有固定宽度的 div 中。

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

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

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

<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"在数据列表上
• 每个数据列表项都将包装在一个类为“DataListColumn”的 div 中

在jquery中，在页面加载时，您可以按如下方式获取计算出的数据列表宽度

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

综上所述，您可能只想使用转发器，以便更好地控制实际列。