列表 Grid 的配置

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