紙殼CMS列表Grid的配置

ZKEASOFT發表於2018-08-17

紙殼CMS（ZKEACMS）裡的Grid是一個TagHelper，是對jQuery外掛datatables的一個配置封裝。

Easy.Mvc.TagHelpers.GridTagHelper

　　

grid的使用很簡單，設定Model，使用<grid>標籤就可以了：

@model ArticleEntity
<grid></grid>

　　

Grid的預設值

1. ModelType

列表預設使用View設定的Model的Type作為Grid的ModelType，並使用它的配置後設資料來呈現列表。例如：@model ArticleEntity列表則會使用ArticleEntity的後設資料ArticleEntityMeta來呈現列表。如果要特別指定這個ModelType，可以在Grid中進行設定：

<grid model-type="typeof(ArticleEntity)"></grid>

　　

2. 編輯

編輯連結

預設的編輯連結是當前的Controller的Edit Action加主鍵。如文章，ArticleController，則編輯連結則是：/admin/Article/Edit/{id}，也可以直接指定這個Action：

<grid edit="Edit"></grid>

　　

編輯UI模板

預設的編輯模板是一個帶有編輯圖示的連結：

<a href="{0}" class="glyphicon glyphicon-edit"></a>

　　

也可以在grid中設定這個模板，比如設定成按鈕：

<grid edit-template="@("<a href="{0}" class="btn btn-default">Edit</a>")"></grid>

　　

設定是否可編輯：

<grid edit-able="false"></grid>

　　

3. 刪除

刪除連結

預設的刪除連結是當前的Controller的Delete Action加主鍵。如文章，ArticleController，則刪除連結則是：/admin/Article/Delete/{id}，也可以直接指定這個Action：

<grid delete="Delete"></grid>

　　

刪除UI模板

預設的編輯模板是一個帶有刪除圖示連結：

<a href="{0}" class="glyphicon glyphicon-remove"></a>

　　

也可以在grid中設定這個模板，比如設定成按鈕：

<grid delete-template="@("<a href="{0}" class="btn btn-danger">Delete</a>")"></grid>

　　

注意：修改了這個刪除模板，可能要注意同時配合修改~/wwwroot/js/dataTable.js

設定是否可刪除：

<grid delete-able="false"></grid>

　　

4. 資料來源

預設的資料來源是當前的Controller的GetList Action，以Post的方式獲取資料。也可以直接指定這個Action:

<grid source="GetList"></grid>

　　

返回資料示例：

[HttpPost]
public virtual IActionResult GetList(DataTableOption query)
{
    var pagin = new Pagination { PageSize = query.Length, PageIndex = query.Start / query.Length };
    var expression = query.AsExpression<TEntity>();
    var order = query.GetOrderBy<TEntity>();
    if (order != null)
    {
        if (query.IsOrderDescending())
        {
            pagin.OrderByDescending = order;
        }
        else
        {
            pagin.OrderBy = order;
        }
    }
    var entities = Service.Get(expression, pagin);
    return Json(new TableData(entities, pagin.RecordCount, query.Draw));
}

　　

在列表中顯示欄位

列表的欄位顯示，需要在後設資料裡面配置。後設資料配置http://www.zkea.net/codesnippet/detail/post-94.html

呼叫.ShowInGrid()該欄位就會顯示在列表中：

ViewConfig(m => m.ImageUrl).AsTextBox().MediaSelector().ShowInGrid();

　　

配置搜尋

.ShowInGrid().Search(Query.Operators.Contains)

　　

配置UI模板

.ShowInGrid().SetGridColumnTemplate("<img src="{imageUrl}"/>");

 

注意：欄位名使用的是駝峰命名方式，如欄位名是ImageUrl，則使用的時候是{imageUrl}

排序

grid預設以最後更新時間（LastUpdateDate）倒序。也可以直接在grid中進行設定：

<grid order-asc="ID"></grid>
<grid order-desc="ID"></grid>

 

自定義樣式

可以使用以下方式進行設定自定義樣式class：

<grid grid-class="table"></grid>

 原文地址：http://www.zkea.net/zkeacms/document/grid

相關文章