带有2列和固定行数的中继器 - 如何实现？

Question

我有一个需求，需要在Repeater中有固定的行数（例如10行），并且有2列。例如，我有一个包含15个项目的列表（即Item 1、Item 2、... Item 16）。Repeater必须按以下方式呈现数据：

第一列必须填充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或其他数据控件来完成此操作的建议。

- user1181219

---

请发布您尝试过的代码，这样我们可以修改和纠正，而不是从头开始构建。 - Krsna Kishore

把你的屏幕截图放在代码里，这样我们就可以看一下（复制、粘贴和编辑）。同时展示一下你尝试过的其他方法。 - Donald Jansen

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>");
});

- Sushmit Patil

---

这个解决方案简单明了 - 这就是为什么我选择它作为答案的原因。 - user1181219

Answer 2

当您提供当前的代码时，我可以将其转换为执行此操作， 在普通控制台应用程序中，您可以执行以下操作

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： 在将Items绑定到Repeater之前，您只需要对其进行排序。也就是说，我的代码将生成

<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();
    }

- Donald Jansen