1

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

http://demos.kendoui.c​​om/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>
4

1 回答 1

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.c​​om/api/web/grid#toolbar-array

于 2013-02-06T19:25:56.597 回答