如何正确设置查询布局为网格？

Question

在Orchard中，我创建了一个查询，用于过滤“学生”内容类型，并试图将我的学生列入网格。所以我增加了一个新的布局，以查询和设置以下属性：

• 布局类型：网格
• 显示模式：属性（我加的内容类型所需的 属性）
• 显示器类型：细节（我不知道这是否是正确的）
• 分组：无
• 对齐方式：水平
• 列数：自动设定到3

HTML属性：

• GridTag：表
• 行代码：TR
• 单元格标签：TD

但这并不能正确显示网格。这些行水平填充而不是垂直填充。请在下面检查截图：

我需要的是正常的网格布局，在那里我有列名第一排，然后每一行代表一个单一的内容项目的数据。

我该如何做到这一点？

编辑：

我使用Orchard作为Web项目。我所有的定制都是通过管理面板完成的，所以我无法调整代码。我的问题是，如果我可以用Orchard的开箱即用功能来做到这一点。

编辑＃2：

当设置对齐垂直，这里的显示结果：

Answer 1

我认为你正在寻找这一点。

<table width="600" border="1" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Name <a href="#">Jeff McDonald</a> 
 
     </td> 
 
     <td>20</td> 
 
     <td>Spain</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Name <a href="#">John Alex</a> 
 
     </td> 
 
     <td>40</td> 
 
     <td>Italy</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Name <a href="#">Kim Lincoln</a> 
 
     </td> 
 
     <td>30</td> 
 
     <td>netherland</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

如果选择对齐方式：水平，乌节将呈现的项目，就像你描述;彼此相邻。

如果您只选择Alignment：vertical，Orchard将呈现堆叠的项目，其中的列是项目的属性。

当你看Orchard.Projections /供应商/设计/ GridLayout.cs的代码，你可以看到下面的代码：

public dynamic RenderLayout(LayoutContext context, IEnumerable<LayoutComponentResult> layoutComponentResults) { 

    bool horizontal = Convert.ToString(context.State.Alignment) != "vertical"; 

    //.. 

    return Shape.Grid(Id: gridId, Horizontal: horizontal, Columns: columns, Items: shapes, Tag: gridTag, Classes: new[] { gridClass }, RowTag: rowTag, RowClasses: new[] { rowClass }, CellTag: cellTag, CellClasses: new[] { cellClass }, EmptyCell: emptyCell); 
} 

这意味着乌节将呈现一个名为“网格”状，水平属性设置为Alignment != "vertical"。

怎么看这个网格状实际呈现，你可以去Orchard.Projections /供应商/设计/ LayoutShapes.cs，看看下面的代码：

[Shape] 
public void Grid(dynamic Display, TextWriter Output, HtmlHelper Html, string Id, bool Horizontal, IEnumerable<dynamic> Items, int Columns, string Tag, IEnumerable<string> Classes, IDictionary<string, string> Attributes, string RowTag, IEnumerable<string> RowClasses, IDictionary<string, string> RowAttributes, string CellTag, IEnumerable<string> CellClasses, IDictionary<string, string> CellAttributes, string EmptyCell) { 
    //.. 

    // Here Orchard decides the columns and rows: 
    if (!Horizontal) { 
     seekItem = (row, col) => col*Columns + row; 
     maxCols = maxRows; 
     maxRows = Columns; 
    } 

    //.. 
}