2

だから、うまく機能しているjqGridの実装があります。いくつかのデータ行を表示しています。新しいデータが追加されると、グリッドが適宜更新されます。

ただし、グリッドから行を削除しようとすると、欠落している行がクリーンアップされません! 新しい行を追加することは問題ありませんが、削除するとデータが残り、グリッドの表示がバグります。

最初に「clearGridData」を呼び出すと、データが適切にクリーンアップされていることがわかります。ただし、clearGridData を呼び出すと、選択内容/ページが失われます。

http://jsfiddle.net/yNw3C/1766/

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example"
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

$('#UpdateGridButton').click(function(){
    mydata[0].status = "CLOSED";
    delete mydata[1];

    //If I add this -- I can refresh grid data properly, but I lose my selection.
    //$('#grid').clearGridData();

    $("#grid").jqGrid('setGridParam', { data: mydata});

    $("#grid").trigger('reloadGrid', [{current: true}]);
});

jqGrid によって暗黙的にサポートされている両方の長所はありますか? または、カスタム ロジックを記述する必要がありますか?

4

1 に答える 1

3

申し訳ありませんが、あなたは現在 jqGrid を間違った方法で使用しています。

まず、グリッドを埋めることが非常に重要です。現在 を使用していaddRowDataます。これは最も古い方法ですが、私が知っているグリッドを埋める最も遅い方法です。使用する場合は、データを使用して jqGrid を直接作成できるものを使用datatype: "local"する必要があります。data: mydata

その他の非常に重要なオプションはgridviewとrowNumです。gridview: trueグリッドのパフォーマンスを向上させるために常に使用する必要があります(詳細については、回答を参照してください)。の価値を理解するにはrowNum、jqGrid がデータのページングをサポートするように設計されていることを知っておく必要があります。並べ替えとページングの場合、datatype: "local"jqGrid 自体によってローカルに実装されます。ページを移動するためのページャーは、toppager: trueオプションまたは使用法によって作成されますpager: "#pagerId"。ページャーを作成しなくても、ローカル ページングは​​引き続きアクティブになります。のデフォルト値rowNumは 20 です。したがって、現在のグリッドには最初の 20 行のみが表示されます。唯一の例外addRowData現在のページに一時的に行を強制的に追加します。リロード後 (たとえば、並べ替えを間接的に変更することによって)、最初の 20 行のみがユーザーに表示され、ユーザーはページを変更するための GUI を使用できなくなります (!!!???)。すべての行を 1 ページに表示したい場合はrowNum: 10000、たとえば次のように使用する必要があります。

次の重要なパラメーターはautoencode: true、セルのデータを HTML フラグメントとしてではなく、テキストとして解釈する必要があることを意味します。を使用しないと、、などautoencode: trueを含むテキストを表示できません。'<''>''&'

height: "auto"データのローカル ページングを使用する場合は、追加で使用することをお勧めします。スクロールバー用に予約されたグリッドの適切なサイズの空きスペースを削除します。代わりに使用scrollOffset: 0して、不要なスペースを削除できます。

コードの次の重要なエラーは、setGridParamwithdataパラメータの使用です。これは、以前にグリッドが空だった場合、または行を追加する必要がある場合にのみ実行できます。setGridParam主に他の目的のために存在します。内部で使用されます$.extend(コードはこちらを参照してください)。したがって、古いデータを新しい値に置き換えるのではなく、データの古い内容を新しい値で拡張dataします。あなたができることは、例えば内部パラメータgetGridParamへの参照を取得するために使用することです:data

var data = $("#grid").jqGrid("getGridParam", "data");

次に、 、およびdataを使用して配列を変更できます。あなたができることを完全に置き換えるにはpushpopdeletedata

var allParameters = $("#grid").jqGrid("getGridParam");
allParameters.data = newData; // or newData.slice(0)

その後、 をトリガーしてグリッドをリロードできます"reloadGrid"。

于 2012-12-17T22:04:37.400 に答える