动态表格构建器

Ajax表格构建器可以用于构建从远程载入内容的Ajax表格, 并带分页等支持.

创建Ajax表格

创建Ajax表格分为以下步骤

• 创建AjaxTableBuilder, 并描画到模板
• 提供搜索地址, 搜索地址返回AjaxTableSearchResponse的json
  • 搜索可以使用IAjaxTableCallback处理

创建Ajax表格的例子

添加控制器, 提供表格页面和搜索接口.
添加src\Controllers\AjaxTableExampleController.cs

[ExportMany]
public class AjaxTableExampleController : ControllerBase {
    [Action("example/ajax_table")]
    public IActionResult AjaxTable() {
        var table = new AjaxTableBuilder();
        table.Id = "ExampleTable";
        table.Target = "/example/ajax_table_search";
        var searchBar = new AjaxTableSearchBarBuilder();
        searchBar.TableId = table.Id;
        searchBar.Conditions.Add(new FormField(new CheckBoxFieldAttribute("Deleted")));
        return new TemplateResult("zkweb.examples/ajax_table.html", new { table, searchBar });
    }

    [Action("example/ajax_table_search", HttpMethods.POST)]
    public IActionResult AjaxTableSearch() {
        var json = Request.Get<string>("json");
        var request = AjaxTableSearchRequest.FromJson(json);
        var callbacks = new ExampleAjaxTableHandler().WithExtraHandlers();
        var response = request.BuildResponse(callbacks);
        return new JsonResult(response);
    }
}

添加表格处理器
添加src\UIComponents\AjaxTableCallbacks\ExampleAjaxTableHandler.cs

public class ExampleAjaxTableHandler : AjaxTableHandlerBase<ExampleTable, long> {
    public override void OnQuery(
        AjaxTableSearchRequest request, ref IQueryable<ExampleTable> query) {
        if (!string.IsNullOrEmpty(request.Keyword)) {
            query = query.Where(q => q.Name.Contains(request.Keyword));
        }
    }

    public override void OnSort(
        AjaxTableSearchRequest request, ref IQueryable<ExampleTable> query) {
        query = query.OrderByDescending(q => q.Id);
    }

    public override void OnSelect(
        AjaxTableSearchRequest request, IList<EntityToTableRow<ExampleTable>> pairs) {
        foreach (var pair in pairs) {
            pair.Row["Id"] = pair.Entity.Id;
            pair.Row["Name"] = pair.Entity.Name;
            pair.Row["CreateTime"] = pair.Entity.CreateTime.ToClientTimeString();
            pair.Row["UpdateTime"] = pair.Entity.UpdateTime.ToClientTimeString();
        }
    }

    public override void OnResponse(AjaxTableSearchRequest request, AjaxTableSearchResponse response) {
        response.Columns.AddIdColumn("Id");
        response.Columns.AddMemberColumn("Name");
        response.Columns.AddMemberColumn("CreateTime");
        response.Columns.AddMemberColumn("UpdateTime");
    }
}

添加模板文件
添加templates\zkweb.examples\ajax_table.html

{% use_title "Example Ajax Table" %}
{% include common.base/header.html %}

<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-table"></i>
            <span class="caption-subject">Example Ajax Table</span>
            <span class="caption-helper"></span>
        </div>
        {{ searchBar }}
    </div>
    <div class="portlet-body">
        {{ table }}
    </div>
</div>

{% include common.base/footer.html %}

效果如图

FAQ

表格构建器AjaxTableBuilder必须和AjaxTableSearchBarBuilder一起使用吗？
如果不需要使用搜索功能, AjaxTableBuilder可以单独使用.

怎样构建AjaxTableSearchResponse, 例子中的BuildResponse的作用是？
AjaxTableSearchResponse包含了当前页序号(从1开始)和每行的数据等信息, 可以自己构建,
也可以使用BuildResponse函数构建, 这个函数提供了从数据库获取数据并分页的功能, 需要注册对应的领域服务.

为什么需要使用表格处理器, 例子中的WithExtraHandlers的意思是？
表格处理器主要用于支持在其他插件中扩展表格的内容, 使用WithExtraHandlers函数可以获取到所有关联的处理器.
提供关联处理器可以继承IAjaxTableExtraHander<TEntity, TPrimaryKey, THandler>并注册到容器.

怎样自定义表格的样式？
需要指定自定义的表格样式时请修改AjaxTableBuilder.Template,
并参考static/common.base.tmpl/ajaxTable.tmpl的内容.

怎样添加自定义样式的列, 例子中的AddMemberColumn的作用是？
表格中的每个列都是一个AjaxTableColumn对象, 可以添加这个对象到response.Columns中实现自定义样式.
AddMemberColumn的源代码如下, 其中的<%-%>是通过underscore.js绑定对象时使用的模板格式.

public static AjaxTableColumn AddMemberColumn(
    this IList<AjaxTableColumn> columns, string member, string width = null) {
    var column = new AjaxTableColumn() {
        Key = member,
        Width = width,
        HeadTemplate = HttpUtils.HtmlEncode(new T(member)),
        CellTemplate = string.Format("<%-row.{0}%>", HttpUtils.HtmlEncode(member))
    };
    columns.Add(column);
    return column;
}

Ajax表格通信时的数据结构是？