静态表格构建器


静态表格和Ajax表格不同的是,构建的内容需要使用模板绑定并静态显示,不支持通过Ajax更新。
静态表格的参数来源一般来自url,适合用在前台页面,可以更好的支持搜索引擎的索引。

创建静态表格

创建静态表格分为以下步骤

  • 获取参数并建搜索结果StaticTableSearchResnponse
    • 搜索可以使用IStaticTableHandler处理
  • 描画StaticTableSearchResnponse到模板

创建静态表格的例子

添加控制器,从url获取参数搜索并构建搜索结果,然后描画到模板。
添加src\Controllers\StaticTableExampleController.cs

[ExportMany]
public class StaticTableExampleController : ControllerBase {
    [Action("example/static_table")]
    public IActionResult StaticTable() {
        var request = StaticTableSearchRequest.FromHttpRequest();
        var handlers = new ExampleStaticTableHandler().WithExtraHandlers();
        var response = request.BuildResponse(handlers);
        return new TemplateResult("zkweb.examples/static_table.html", new { response });
    }
}

添加静态表格回调
添加src\UIComponents\StaticTableHandlers\ExampleStaticTableHandlers.cs

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

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

    public override void OnSelect(
        StaticTableSearchRequest 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();
        }
    }
}

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

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

<div class="portlet">
    <div>
        {% for row in response.Rows %}
        <div>
            <a>{{ row.Name }}</a>
            <span>{{ row.CreateTime }}</span>
        </div>
        {% endfor %}
    </div>
    {% url_pagination response.Pagination %}
</div>

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

效果
静态表格的效果