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