0

ツールバーのカスタム ボタンをクリックしてバッチ編集を有効にしたいと考えています。ツールバーに「編集」というボタンがあるとしましょう。編集ボタンをクリックすると、編集のためにすべての行をアクティブにしたいと思います。ロード時に最初にすべての行を編集可能にしたくありません。

これは可能ですか？はいの場合、誰かがこれを達成する方法について指示を与えることができますか?

4

2 に答える 2

0

@Jaiminソリューションに沿って、2つのグリッドがあるが、エディションモードから非エディションモードに移動するたびに新しいグリッドを作成しない同様のアプローチを提案します(これが要件かどうかはわかりません)。

だから私は2つのグリッドを作成しています。定義はまったく同じですが、1つは非表示で1つは表示、1つは編集可能でもう1つは編集できないという点だけが異なります。ボタンをクリックすると、表示されているものが非表示になり、表示されていないものが表示されます。どちらも同じ DataSource を共有しているため、一方のページを変更すると他方が変更され、一方を編集すると他方が更新されるため、実際には完璧に機能します。

したがって、次のようなものです。

1- 可視性の切り替えに使用される CSS 定義:

.ob-hide {
    display : none;
}

2- DataSource 定義:

var ds = new kendo.data.DataSource({
    transport : {
        read : {
            url: ...
        },
        update : {
            url: ...
        },
        create : {
            url: ...
        },
        destroy : {
            url: ...
        }
    },
    pageSize: 10,
    schema  : {
        model: {
            id : ...,
            fields: {
                id       : { type: '...' },
                ...
            }
        }
    }
});

次の 2 つのグリッド:

$("#grid-editable").kendoGrid({
    editable: "inline",
    dataSource : ds,
    ...
}

$("#grid-not-editable").kendoGrid({
    editable: false,
    dataSource: ds,
    ...
});

$("#grid-editable").addClass("ob-hide");

最後に、グリッドを交換するボタン ハンドラー:

$("#make-editable").on("click", function() {
    $("#grid-editable").toggleClass("ob-hide");
    $("#grid-not-editable").toggleClass("ob-hide");
});

ここで実行されていることを確認してください: http://jsfiddle.net/OnaBai/bCEJR/

于 2013-07-12T23:00:29.370 に答える