Question

我想在顶部工具栏的右上角添加一些类似按钮的图像（点击后会操作下面的数据），称为更新，删除和添加列。同样，这些图像可以调用事件onclick。

这是最好的方法吗？

这会通过模板完成吗？不太清楚我还明白这些。是否存在与模板的其他依赖关系？

$("#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/唯一的问题是，由于未加载图像，您会将其视为缺失图像，但它们仍然完全正常运行。

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

1 个答案: