具有2列和固定行数的转发器 - 如何？

Question

我要求在Repeater中有固定的行数（即10行），有2列。 例如，我有一个包含15个项目的列表（即项目1，项目2，......项目16）。转发器必须显示如下数据：

在开始填充第二列之前，第一列必须填充10个项目。

请提供建议。

必需的输出格式：

<pre>
    <table>    
        <tr><td>Item 1</td> <td>Item 11</td></tr>
        <tr><td>Item 2</td> <td>Item 12</td></tr>
        <tr><td>Item 3</td> <td>Item 13</td></tr>
        <tr><td>Item 4</td> <td>Item 14</td></tr>
        <tr><td>Item 5</td> <td>Item 15</td></tr>
        <tr><td>Item 6</td> <td></td></tr>
        <tr><td>Item 7</td> <td></td></tr>
        <tr><td>Item 8</td> <td></td></tr>
        <tr><td>Item 9</td> <td></td></tr>
        <tr><td>Item 10</td> <td></td></tr>
    </table>
</pre>

到目前为止，我有这个

建议还欢迎使用DataList或其他数据控件执行此操作。

Answer 1

您可以使用jQuery来解决它。这是解决方案。如果您有内容事件，请使用clone。

$(function(){
var maxRows=6,totalRecords = $("table tr").length,requiredColumns =Math.floor(totalRecords/maxRows)+1,emptyCells=(totalRecords%maxRows);
console.log(emptyCells);
var index=0;
$("table tr").eq(maxRows-1).nextAll("tr").each(function(){	
	if(index==maxRows)
		index=0;
	$("table tr").eq(index).append($(this).html());
	$(this).remove();
	index++;
	
});
$("table tr:nth-child("+ emptyCells+")").nextAll("tr").append("<td></td>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>    
<tr><td>Item 1</td> </tr>
<tr><td>Item 2</td> </tr>
<tr><td>Item 3</td> </tr>
<tr><td>Item 4</td> </tr>
<tr><td>Item 5</td> </tr>
<tr><td>Item 6</td> </tr>
<tr><td>Item 7</td></tr>
<tr><td>Item 8</td></tr>
<tr><td>Item 9</td></tr>
<tr><td>Item 10</td></tr>
<tr><td>Item 11</td> </tr>
<tr><td>Item 12</td> </tr>
<tr><td>Item 13</td> </tr>
<tr><td>Item 14</td> </tr>
<tr><td>Item 15</td> </tr>
<tr><td>Item 16</td> </tr>
</table>

$(function(){
var maxRows=6,totalRecords = $("table tr").length,requiredColumns =Math.floor(totalRecords/maxRows)+1,emptyCells=(totalRecords%maxRows);
console.log(emptyCells);
var index=0;
$("table tr").eq(maxRows-1).nextAll("tr").each(function(){  
    if(index==maxRows)
        index=0;
    $("table tr").eq(index).append($(this).html());
    $(this).remove();
    index++;

});
$("table tr:nth-child("+ emptyCells+")").nextAll("tr").append("<td></td>");
});

Answer 2

当你给我们你当前的代码时，我可以把它转换成它， 在Plain Console Application中，您可以执行以下操作

var items = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 };
int cols = 4;
int rows = 5;
items = Sort(items, cols, rows);

for (int i = 0; i < items.Length; i++)
{
    if (i % cols == 0)
        Console.WriteLine("<tr>");
    Console.WriteLine("   <td>Item {0}</td>", items[i]);

    if ((i + 1) % cols == 0)
        Console.WriteLine("</tr>");
}

Console.ReadLine();

如果你不能自己转换它我会帮助你，但这应该给出一个想法如何做到

编辑1： 这是我所拥有的盲代码，在你的Repeater中使用它

((Container.ItemIndex % 2 == 0) ? "<tr>" : String.Empty)
    <td>Data</td>
(((Container.ItemIndex + 1) % 2 == 0) ? "</tr>" : String.Empty)

编辑2： 在绑定到Repeater之前，您只需要获取Items并对其进行排序。 I.E我的代码将生成

<tr>
    <td>Item 1</td>
    <td>Item 2</td>
</tr>
<tr>
    <td>Item 3</td>
    <td>Item 4</td>
</tr>

你想要

<tr>
    <td>Item 1</td>
    <td>Item 3</td>
</tr>
<tr>
    <td>Item 2</td>
    <td>Item 4</td>
</tr>

我将再次更新控制台一，以提供如何对数据进行排序的想法

此方法应该可以在右栏中对其进行排序，再次查看控制台应用程序

    private static T[] Sort<T>(IEnumerable<T> items, int cols, int rows)
    {
        var enumerable = items.Take(cols * rows).ToArray();//Prevents the throw of exception, will take only the first items
        var length = enumerable.Length;
        var columLenght = length / cols;
        var itemList = enumerable.ToList();
        var converted = new List<List<T>>();
        //Create columns of existing data
        while (itemList.Count > 0)
        {
            var nextSet = itemList.Take(rows).ToList();
            itemList.RemoveRange(0, nextSet.Count);
            while (nextSet.Count < rows)
            {
                nextSet.Add(default(T));
            }
            converted.Add(nextSet.ToList());
        }
        //Create Empty Columns
        while (converted.Count < cols)
        {
            var emptyColumn = (new T[rows]).ToList();
            converted.Add(emptyColumn);
        }
        //Move into correct collumns
        while (converted.Sum(x => x.Count) > 0)
        {
            foreach (var columItems in converted)
            {
                if (columItems.Count > 0)
                {
                    var item = columItems[0];
                    itemList.Add(item);
                    columItems.RemoveRange(0, 1);
                }
            }
        }
        if (cols * rows != itemList.Count)
            throw new InvalidOperationException("Ratio between new list is smaller to the given list"); //Sanity, this shouldn't happen
        return itemList.ToArray();
    }