具有 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

当你给我们你当前的代码时，我可以转换它来做，在普通控制台应用程序中，您可以执行以下操作

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 之前对其进行排序即可。即我的代码将生成

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

Answer 2

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

具有 2 列和固定行数的中继器 - 怎么样？

Repeater with 2 columns and fixed numbe of rows - how?

asp.net

repeater