紙殼CMS（ZKEACMS）里的Grid是一個TagHelper，是對jQuery插件datatables的一個配置封裝。 grid的使用很簡單，設置Model，使用 ...
紙殼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
