2

編集および破棄コマンドを使用して、単純な剣道グリッドを作成します。

edit コマンドを実行すると、データを変更できるポップアップが表示されます。編集ウィンドウのタイトルとボタン テキスト (更新ボタンとキャンセル ボタン) をカスタマイズする必要があります。これは私のコードです:

var ds = createJSONDataSource();

function createJSONDataSource() {

var dataSource = new kendo.data.DataSource({

    transport: {
        autoSync: true,
        read: {
            type: "POST",
            url: "WebServices/GetDataTest.asmx/getCustList",
            dataType: "json",
            contentType: mime_charset
        }
    },
    pageSize: 5,
    schema: {
        data: function (data) {
            if (data) {
                if (serverSelectReturnsJSONString)
                    return $.parseJSON(data.d);

                else
                    return data.d;
            }
        },
        model:{
              id: "customer_id",
              fields: {
              customer_id: { type: "string", editable: false },
              name_customer: { type: "string" },
              address_customer: { type: "string" }
               }
         }
   });

    var grid = $("#grid").kendoGrid({
    selectable: true,
    theme: "metro",
    dataSource: ds,
    scrollable: {
        virtual: true
    },
    reorderable: true,
    resizable: true,
    pageable: true,
    height: 300,
    toolbar: ["save", "cancel"],
    columns: [
        { field: "customer_id", title: "ID" },
        { field: "name_customer", title: "Cliente" },
        { field: "address_customer", title: "Indirizzo" },
        { field: "PI_customer", title: "Partita IVA", hidden: true },
        { field: "cap_customer", title: "CAP", hidden: true },
        { field: "city_customer", title: "Città" },
        { field: "state_customer", title: "Nazione", selected: false },
        { command: ["edit", "destroy"], title: " " }
    ],
    filterable: true,
    editable: "popup",
    sortable: true,
    columnMenu: {
        messages: {
            columns: "Scegli colonne",
            filter: "Applica filtro",
            sortAscending: "Ordina (ASC)",
            sortDescending: "Ordina (DESC)"
        }

    },
    groupable: {
        messages: {
            empty: "Trascina la colonna qui..."
        }
    }

});

誰かが私を助けてくれることを願っています!

前もって感謝します。

4

3 に答える 3

3

ボタンをカスタマイズするには、コマンドを次のように定義する必要があります。

{
    name: "edit",
    text: { update: "Actualizar", cancel: "Cancelar"}
},

とで置き換えUpdateたところ。ActualizarCancelCancelar

したがって、列の定義は次のようになります。

columns: [
    { field: "customer_id", title: "ID" },
    { field: "name_customer", title: "Cliente" },
    { field: "address_customer", title: "Indirizzo" },
    { field: "PI_customer", title: "Partita IVA", hidden: true },
    { field: "cap_customer", title: "CAP", hidden: true },
    { field: "city_customer", title: "Città" },
    { field: "state_customer", title: "Nazione", selected: false },
    { 
        command: [
            {
                name: "edit",
                text: { update: "Actualizar", cancel: "Cancelar"}
            }, 
            "destroy"
        ], 
        title: " "
    }
],

ウィンドウのタイトルを変更するには、次の方法で変更する必要がありますeditable: "popup",。

editable  : {
    mode : "popup",
    window : {
        title: "Edición",
    }
},

タイトルを次のように定義しますEdición。

于 2013-05-01T20:20:26.137 に答える
0

別のカスタマイズ方法は次のとおりです。

columns: [
{ command: 
    [{ name: 'edit', 
    click: editButtonClick, 
    template: editButtonTemplate }], title: 'Edit', width: '40px'}..]


var editButtonTemplate = '<a class="btn btn-link btn-xs k-grid-edit" href="\\#"><span class="glyphicon glyphicon-pencil"></span></a>';

editButtonClick = function (e) {
/* Changes default rendering of 'update' & 'cancel' buttons
 * but keeps default behaviour
 */
var btnCancel = $('.k-grid-cancel');
btnCancel.removeClass('k-button k-button-icontext').addClass('btn btn-link btn-xs');
btnCancel.text('');
btnCancel.append('<span class="glyphicon glyphicon-ban-circle"></span>');

var btnOk = $('.k-grid-update');
btnOk.removeClass('k-button k-button-icontext k-primary').addClass('btn btn-link btn-xs');
btnOk.text('');
btnOk.append('<span class="glyphicon glyphicon-ok-circle k-update"></span>');

}

このアプローチはclick、標準コマンドのイベントを処理editし、レンダリングされた html を変更しますが、標準機能は維持します。

重要な詳細- グリッドの更新機能は属性を持つ要素に結合されていk-updateますが、キャンセル機能はk-grid-cancel.

于 2016-07-11T19:58:47.517 に答える