1

現在、3つのボタンを並べてテーブルの上部に行を追加しようとしています。HTMLを追加する必要がありますか、それともjsを介して動的に追加されますか？以下のURLのようなものですが、これは単なるボタン（おそらく画像）であり、ドロップダウンではありません（これらは編集、削除、列の追加ボタンなどのコントロールになります）：

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

toolbarkendoGrid 設定にセクションを追加し、追加するボタンのリストを指定できます。



$("#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 に答える