在剑道网格中创建另一个工具栏 [英] Create another toolbar in kendo grid

问题描述

我正在使用 Kendo 库作为网格.我想在那个网格中有一个工具栏.

我已关注此链接 -
http://demos.kendoui.c​​om/web/grid/toolbar-template.html
并在顶部创建了一个工具栏

我还想在网格底部添加另一个工具栏.在分页栏下方或上方.我找不到任何方法来创建这个额外的工具栏.请帮忙.

解决方案

有两种获取方式:

1. 您让 Kendo UI 在顶部生成，然后将其移至底部
2. 您将其生成到底部.

第一种方法很快，如果你不需要标题工具栏是最好的.只需添加以下代码:

$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));

在这里查看:http://jsfiddle.net/OnaBai/WsRqP/1/

第二种方法 - 使用您在原始问题中提到的示例作为基础 - 将是这样的:

第 1 步:定义模板，您可以使用与示例中相同的模板:

第 2 步:初始化网格，就像你现在所做的一样(在我的例子中，我不会将工具栏作为页眉，而只是作为页脚):

var grid = $("#grid").kendoGrid({数据源: {类型:odata"，运输      : {阅读:http://demos.kendoui.c​​om/service/Northwind.svc/Products"},页面大小:20，服务器分页:真，服务器排序:真，服务器过滤:真},高度:430，可排序:真实，可分页:真实，列   : [{ field: "ProductID", title: "Product ID", width: 100 },{字段:产品名称"，标题:产品名称"}，{ field: "UnitPrice", title: "Unit Price", width: 100 },{ 字段:QuantityPerUnit"，标题:每单位数量"}]}).data("kendoGrid");

第 3 步:添加一个 dataBound 处理程序，用于在网格初始化后创建页脚.我们必须在 dataBound 上做，否则 Grid 仍然没有正确格式化并且页脚看起来会出错.我已经在一个单独的函数中实现了创建页脚工具栏，以免弄乱 dataBound 以防你在这里做更多的事情.

dataBound : function () {initFooterToolbar(this, kendo.template($("#template").html()));}

第四步:实现这个initFooterToolbar:

function initFooterToolbar(grid, template) {如果(！this._footer){this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>").append(模板);grid.wrapper.append(this._footer);//初始化模板的其他代码...}}

initFooterToolbar 所做的是首先检查它是否尚未初始化，否则如果您对数据进行分页刷新，您可能最终会得到多个页脚工具栏.

最后将工具栏附加到 grid.wrapper.

因此，创建页脚工具栏的重要部分是调用 grid.wrapper.append(...) 并在已经创建网格时执行此操作.

此处修改的原始示例:http://jsfiddle.net/OnaBai/WsRqP/

I am using Kendo library for grid. I want to have a toolbar in that grid.

I have followed this link -
http://demos.kendoui.com/web/grid/toolbar-template.html
and created a toolbar at the top

I also want to add another toolbar at the bottom of grid. Below or above pagination bar. I could not find any way to create this extra toolbar. Please help.

解决方案

There are two ways of getting it:

1. You let Kendo UI generate in the top and then you move it to the bottom
2. You generate it to the bottom.

The first approach is fast and if you don't need header toolbar is the best. Just add the following code:

$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));

See it here : http://jsfiddle.net/OnaBai/WsRqP/1/

The second approach -using as base the example that you mention in your original question- would be something like this:

Step 1: Define a template, you might use the same than in the example:

<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <label class="category-label" for="category">Show products by category:</label>
        <input type="search" id="category" style="width: 150px"/>
    </div>
</script>

Step 2: Initialize the grid, as you are doing now (in my case I will not include the toolbar as header but only as footer):

var grid = $("#grid").kendoGrid({
    dataSource: {
        type           : "odata",
        transport      : {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        },
        pageSize       : 20,
        serverPaging   : true,
        serverSorting  : true,
        serverFiltering: true
    },
    height    : 430,
    sortable  : true,
    pageable  : true,
    columns   : [
        { field: "ProductID", title: "Product ID", width: 100 },
        { field: "ProductName", title: "Product Name" },
        { field: "UnitPrice", title: "Unit Price", width: 100 },
        { field: "QuantityPerUnit", title: "Quantity Per Unit" }
    ]
}).data("kendoGrid");

Step 3: Add a dataBound handler for creating the footer after the grid has been initialized. We have to do it on dataBound otherwise the Grid is still not correctly formatted and the footer will look wrong. I've implemented creating the footer toolbar in a separate function to do not mess dataBound in case you do more stuff here.

dataBound : function () {
    initFooterToolbar(this, kendo.template($("#template").html()));
}

Step 4: Implement this initFooterToolbar:

function initFooterToolbar(grid, template) {
    if (!this._footer) {
        this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>")
                           .append(template);
        grid.wrapper.append(this._footer);
        // Other code for initializing your template
        ... 
    }
}

What initFooterToolbar does is first check that it has not already been initialized otherwise if you do pagination of refresh the data you might end-up with multiple footer toolbars.

Finally append the toolbar to grid.wrapper.

So the important part for creating a footer toolbar is invoking grid.wrapper.append(...) and doing it when the grid is already created.

The original example modified here : http://jsfiddle.net/OnaBai/WsRqP/

这篇关于在剑道网格中创建另一个工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！