在 Kendo Grid 中添加带有按钮的行答案

【问题标题】：Adding a row with a button in Kendo Grid在 Kendo Grid 中添加带有按钮的行
【发布时间】：2013-02-06 18:46:53
【问题描述】：

我现在正在尝试使用 3 个并排按钮在表格顶部添加一个额外的行。我需要添加任何 HTML 还是通过 js 以某种方式动态添加？有点像下面的网址，但它只是一个按钮（可能是图像）而不是下拉菜单（这些将是编辑、删除和添加列按钮等控件）：

http://demos.kendoui.com/web/grid/toolbar-template.html

<!doctype html>
<head>
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>


</head>
<body>
<div id="grid"></div>

<script>
$(function(){

   var people = [{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },

   {patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },

   {patientName: "Jane Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },

   {patientName: "Bert Jones", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },

   ];


   $("#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" }],
     dataSource: {
       data:people
     },

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

});
</script>
</body>
</html>

【问题讨论】：

标签： kendo-ui

【解决方案1】：

您可以将toolbar 部分添加到您的 kendoGrid 配置中，并提供您要添加的按钮列表：



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

如果您无法使用工具栏使内容显示为您想要的样子，您可以为该选项提供您自己的 HTML：


toolbar: "<div>stuff here</div>"

文档中有更多信息，请点击此处：http://docs.kendoui.com/api/web/grid#toolbar-array

【讨论】：

Derick，说我想在顶部栏的右侧添加三个图像（可以点击），这些图像将作用于下面的数据 - 比如更新、删除、刷新 - 可以吗通过模板？不太确定我了解模板（还）