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

问题描述

我正在使用Kendo库进行网格化.我想在该网格中有一个工具栏.

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

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

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.

推荐答案

有两种获取方法:

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

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

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

在此处查看: 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:

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

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>

第2步:像现在一样初始化网格(在我的情况下，我不会将工具栏作为页眉，而仅作为页脚):

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

第3步:添加一个dataBound处理函数，用于在初始化网格后创建页脚.我们必须在dataBound上执行此操作，否则网格仍无法正确设置格式，并且页脚将显示为错误.我已经实现了在单独的函数中创建页脚工具栏的功能，以免弄乱dataBound，以防您在此处进行更多操作.

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

第4步:实施此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
        ... 
    }
}

initFooterToolbar的作用是首先检查它是否尚未初始化，否则，如果分页刷新数据，则最终可能会有多个页脚工具栏.

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.

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

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

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

原始示例在此处进行了修改: http://jsfiddle.net/OnaBai/WsRqP/

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

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