1

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

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

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

4

3 回答 3

4

有两种获取方式：

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

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

$("#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否则网格仍然没有正确格式化并且页脚看起来错误。我已经在一个单独的函数中实现了创建页脚工具栏，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/

于 2013-07-05T10:52:36.843 回答
0

这是另一个使用列脚注模板的 hack。当触发数据绑定时，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();
  }
});
于 2014-11-27T16:09:18.153 回答
0

我避免使用剑道工具栏，只制作一个外部 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)); });

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

于 2013-07-05T10:19:51.640 回答