纸壳CMS列表Grid的配置

纸壳cms（zkeacms）里的grid是一个taghelper，是对jquery插件的一个配置封装。

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

　　

在列表中显示字段

列表的字段显示，需要在元数据里面配置。元数据配置

调用.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>

 原文地址：