通过 Kendo 将图像控件添加到工具栏

Question

我想在顶部工具栏的右上角添加一些名为更新、删除和添加列的按钮状图像（单击时将处理下面的数据）。同样，这些图像会在点击时调用事件。

这是最好的方法吗？

这会通过模板完成吗？不太确定我是否理解这些。模板是否存在其他依赖项？

$("#grid").kendoGrid({
     columns: [{field: "patientName", title: "Patient Name"},
               {field: "MRN", title: "MRN"},
               {field: "account", title: "Account#"},
               {field: "dateOfBirth", title: "Date of Birth"}, 
               {field: "room", title: "Room"},
               {field: "bed", title: "Bed"},
               {field: "admitDate", title: "Admit Date" }],

     //toolbar: [
     //{"name": "create"}, 
     // {"name": "save"}, 
     //  {"name": "cancel"}
     // ],

     dataSource: {
       data:people
     },

     height:300,
     scrollable:true,
     pageable: true,
     pageSize: 2,
     sortable: true                
  });

Answer 1

您可以使用toolbar.template 并执行以下操作：

$("#grid").kendoGrid({
    columns   : [
        {field: "patientName", title: "Patient Name"},
        {field: "MRN", title: "MRN"},
        {field: "account", title: "Account#"},
        {field: "dateOfBirth", title: "Date of Birth"},
        {field: "room", title: "Room"},
        {field: "bed", title: "Bed"},
        {field: "admitDate", title: "Admit Date" }
    ],
    toolbar   : [
        {"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
        {"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
        {"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
    ],
    dataSource: {
        data    : people,
        pageSize: 2
    },
    editable  : true,
    scrollable: true,
    pageable  : true,
    sortable  : true
});

class 值很重要，因为这是 Kendo UI 用于将标准处理程序绑定到此图像单击事件的方法。

另外pageSize需要在dataSource中定义。

为了使图标向右对齐，您应该定义以下样式：

#grid .k-toolbar {
    text-align: right;
}

其中#grid 是您网格的id。

在此处查看一个正在运行的示例：http://jsfiddle.net/OnaBai/Y9vhE/ 唯一的问题是，由于图像未加载，您会看到它缺少图像，但它们仍然可以正常工作。