如何正確設置查詢佈局爲網格？

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

    //.. 
}