Question

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

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>

Answer 1

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



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

在Kendo Grid中添加一个带按钮的行

1 个答案: