欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

纸壳CMS列表Grid的配置

程序员文章站 2022-12-29 15:32:37
纸壳CMS(ZKEACMS)里的Grid是一个TagHelper,是对jQuery插件datatables的一个配置封装。 grid的使用很简单,设置Model,使用 ......

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

 原文地址: