0

上部のツールバーの右上に、列の更新、削除、追加と呼ばれるボタンのような画像 (クリックすると下のデータが操作されます) を追加したいと思います。繰り返しますが、これらは 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                
  });
4

1 に答える 1

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
});

これは、Kendo UI が標準ハンドラーをこの画像クリック イベントにバインドするために使用するものであるため、class値は重要です。

さらにpageSize、 内で定義する必要がありますdataSource。

アイコンを右揃えにするには、次のスタイルを定義する必要があります。

#grid .k-toolbar {
    text-align: right;
}

あなたのグリッド#gridのはどこですか。id

ここで実行例を参照してください: http://jsfiddle.net/OnaBai/Y9vhE/唯一の問題は、画像が読み込まれていないため、画像が欠落しているように見えますが、まだ完全に機能していることです。

于 2013-02-07T19:09:23.263 に答える