在剑道网格中创建另一个工具栏答案

【问题标题】：Create another toolbar in kendo grid在剑道网格中创建另一个工具栏
【发布时间】：2013-07-03 06:11:45
【问题描述】：

我正在为网格使用剑道库。我想在那个网格中有一个工具栏。

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

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

【问题讨论】：

您觉得我的 onabai 的回答有帮助吗？

标签： javascript kendo-ui kendo-grid jquery-templates

【解决方案1】：

有两种获取方式：

您让 Kendo UI 在顶部生成，然后将其移动到底部
您将其生成到底部。

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

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

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

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

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

<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 步：初始化网格，就像您现在所做的那样（在我的情况下，我不会将工具栏作为页眉，而只是作为页脚）：

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 上执行此操作，否则 Grid 的格式仍然不正确，并且页脚看起来会出错。我已经在一个单独的函数中实现了创建页脚工具栏，以免弄乱dataBound，以防你在这里做更多的事情。

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 所做的是首先检查它是否尚未初始化，否则如果您进行分页刷新数据，您可能最终会使用多个页脚工具栏。

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

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

这里修改的原始示例：http://jsfiddle.net/OnaBai/WsRqP/

【讨论】：

【解决方案2】：

我避免使用剑道工具栏，只制作一个外部 1，然后您可以通过更大的控制对其进行调整。

例如，

@Html.DropDownList("Year", (SelectList)ViewBag.YearList, "All years")

transport: {
                    read: {
                        url: '@Url.Action("_List", "Applications")',
                        data: refreshGridParams,
                        type: 'POST'
                    },
function refreshGridParams() {
        return {
            Year: $('#Year').val()
        };
    }

        $('#Year').change(function () {
            theGrid.dataSource.read({
                Year: $('#Year').val()
            });
        });

然后在我的控制器中，

[HttpPost]
    public JsonResult _List(int? Year, int skip, int take)
    {

最后

_db.Blargh.Where(w => w.Year== Year).Skip(skip).Take(take).ToList().ForEach(x => { waList.Add(new WAListDTO(x)); });

这应该涵盖所有需要的核心代码，但这意味着您可以继续添加尽可能多的工具栏/下拉菜单/日期选择器/文本搜索等，并且只需更改每个阶段以包含其他数据。

【讨论】：

【解决方案3】：

这是另一个使用列脚注模板的 hack。触发databound时，footertemplate表被安排为一列colspan等于网格列数。

http://plnkr.co/edit/1BvMqSC7tTUEiuw4hWZp

$("#grid").kendoGrid({
  columns:[{
      field:'name',
      footerTemplate : "Row Count: #= data.name.count #" 
    },{
      field:'age'
    }],
  dataSource: new kendo.data.DataSource({
    aggregate: [{
      field:"name",
      aggregate: "count"
    }],

    data: [{
      name: "Jane", 
      age: 31
    }, {
      name: "John",
      age: 33
    }]
  }),
  dataBound: function() {
    var footer = this.wrapper.find('.k-footer-template');
    footer.children(":first").attr('colspan', this.columns.length);
    footer.children().not(':first').remove();
  }
});

【讨论】：