Распределение столбцов DataList

Question

Я программирую с использованием .NET aspx. В компоненте asp: DataList я хочу распределять столбцы равномерно, даже если не всем столбцам присваивается ItemTemplate.

E.g.

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

Во время выполнения массив, привязанный к каталогу данных, содержит только два элемента. Я все равно хочу, чтобы столбцы распределялись равномерно по четырем пробелам.

Answer 1

Если вы посвятили себя использованию DataList, для этого есть два разумных метода.

Во-первых, вы можете обернуть свой ItemTemplate в 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
• Каждый DataList деталь будет обернут в DIV с классом "DataListColumn"

В jquery при загрузке страницы вы можете получить рассчитанную ширину фильтра данных следующим образом:

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

С учетом всего сказанного вы можете просто использовать ретранслятор, чтобы вы могли больше контролировать фактические столбцы.