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

I have a requirement to have fixed number of rows (i.e. 10 rows) in a Repeater, with 2 columns. For example, I have a list of 15 items (i.e. Item 1, Item 2, ...Item 16). The repeater must present the data like below:

我要求在中继器中有固定的行数(即10行)，包含2列。例如，我有一个包含15个项目的列表(例如，项目1，项目2，……)项16)。中继器必须提供如下数据:

The first column must be filled up with 10 items before starting to fill the second one.

第一列必须填满10项才能开始填满第二列。

Please provide suggestions.

请提供建议。

Required Output Format:

所需的输出格式:

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

So far, I have this

到目前为止，我有这个

Suggestions also welcome on how to do this using a DataList or other data controls.

建议也欢迎使用DataList或其他数据控件来实现这一点。

2 个解决方案

#1

You can use jQuery to solve it. Here is the solution. If you have events for content then use clone.

您可以使用jQuery来解决它。这是解决方案。如果有内容的事件，那么使用克隆。

$(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

When you give us your current code I can convert it to do it, In a Plain Console Application you can do the following

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

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

If you cannot convert it yourself I will help you but this should give an Idea how to do it

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

EDIT 1: Here is my blind code to what you have, use it inside of your Repeater

编辑1:这是我给你的盲码，用在你的中继器里面

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

EDIT 2: You will only need to take the Items and sort it before it is Bound to the Repeater. I.E my code wil generate

编辑2:您只需要获取条目并对其进行排序，然后再将其绑定到中继器。我。我的代码将生成

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

and you want

和你想要的

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

I will update again the Console one to give an Idea how to sort the data

我将再次更新控制台1，了解如何对数据进行排序

This method should work to sort it in the right columns, see the console app again

这个方法应该在正确的列中进行排序，请再次查看控制台应用程序

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