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

我想在顶部工具栏的右上角添加一些类似按钮的图像（单击这些图像将操作下面的数据），称为更新、删除和添加列。同样，这些图像会在单击时引发事件

这是最好的方法吗

这会通过模板实现吗？我还不太确定我是否理解这些。模板是否有其他依赖项

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

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

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

其中

#grid

是网格的

id

---

请参阅此处的运行示例：唯一的问题是，由于未加载图像，因此您会将其视为丢失的图像，但它们仍然可以正常工作。

对不起，我是否调用toolbar.template，或者这只是下面数据的表示形式？只是想了解如何在代码中实现。此外，如果我希望它们都对齐（彼此相邻），是否有一种方法可以调用按钮/图像“组”上的style属性？完美。你是最棒的女低音歌手！哎呀，还有一个问题：我添加页面大小的那一刻，网格就消失了。此外，pageSize实际上指的是什么？嗯！不应该消失。它是指在开始分页之前网格中显示的行数（查看我在回答中提到的运行示例，并检查差异）。作为奖励：-）您可能会看到我删除了

高度

。它是行的栅格空间的高度。你可能有10行，而你没有空间看10行，然后你必须滚动看其余的。

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