1

ローカル データのフォーム編集を使用しています。フォームの値を編集し、値を行に戻すことができます (setRowData を使用)。しかし、ページを前後に移動すると、変更が失われます。

グリッド内の行と基になるソースへの変更を保存するにはどうすればよいですか? 後で行を反復処理し、すべてのエラーが修正されていることを確認して (編集フォームを使用)、サーバーに投稿する必要があります。

コード：

var gridId = 'mygrid';
var pagerId = 'mygridpager';

var grid = $('#mygrid');
var pager = $('#mygridpager');

grid.jqGrid({
    caption: caption,
    colModel: getColModel(),
    recreateForm: true,

    hidegrid: true,
    sortorder: 'desc',
    viewrecords: true,
    multiselect: true,
    rownumbers: true,

    autowidth: true,
    height: '100%',
    scrollOffset: 0,

    datatype: 'local',
    data: dataAsArray,
    localReader: {
        repeatitems: true,
        cell: '',
        id: 2
    },

    pager: '#' + pagerId,
    pgbuttons: true,
    rowNum: 5,
    rowList: [2, 5, 7, 10, 250, 500]
});

grid.jqGrid('navGrid',
    '#' + pagerId,
    {
        add: false,
        del: false,
        search: false,

        edit: true,
        edittext: 'Fix Error',
        editicon: 'ui-icon-tag',
        editurl: 'clientArray',

        refreshtext: 'Refresh',
        recreateForm: true
    },
    {
        // edit options
        editCaption: 'Fix Error',
        editurl: 'clientArray',
        recreateForm: true,
        beforeShowForm: function(form) {
            /* Custom style for elements. make it disabled etc */
        },
        onclickSubmit: function(options, postdata) {
                    var idName= $(this).jqGrid('getGridParam').prmNames.id;

                    // [UPDATED]
                    if (postdata[idName] === undefined) {
                        var idInPostdata = this.id + "_id";
                        postdata[idName] = postdata[idInPostdata];
                        postdata['row'] = postdata[idInPostdata];
                    }

            $('#mygrid').jqGrid('setRowData', postdata.row, postdata);

            if (options.closeAfterEdit) {
                $.jgrid.hideModal('#editmod' + gridId, {
                    gb: '#gbox_' + gridId,
                    jqm: options.jqModal,
                    onClose: options.onClose
                });
            }

            options.processing = true;

            return {};
        }
    },
    {}, // add options
    {}, // del options
    {} //search options
).trigger('reloadGrid');

あなたの助けに感謝します。

ありがとう

4

1 に答える 1

1

あなたの問題の理由は、入力データの配列形式 ( repeatitems: truein ) の使用にあると思います。localReaderから配列を構築し、それを の代わりにpostdataのパラメータとして使用する必要があると思います。setRowDatapostdata

アドバイスが役に立たない場合は、テスト データを含むグリッドの完全なコードを投稿する必要があります。のようなコードcolModel: getColModel(),はあまり役に立ちません。つまり、問題を再現するのに十分な情報を投稿する必要があります。http://jsfiddle.net/で動作するデモが最適です。そのようなデモを用意する場合は、jquery.jqGrid.src.js代わりに使用してくださいjquery.jqGrid.min.js。

UPDATED : コードの問題は、入力の場合は配列の使用法が項目であるdataことです ( in で使用repeatitems: trueしますlocalReader)。この場合、現在の実装でsetRowDataはサポートされていません (動作が正しくありません)。たとえば、最初にそのようなデータがある場合

ここに画像の説明を入力

3行目の編集を開始すると、次のようになります

ここに画像の説明を入力

使用後同様の$('#mygrid').jqGrid('setRowData', postdata.row, postdata);内訳ですonclickSubmit。そのため、内部データが誤って変更されます。

setRowDataこの問題を解決するには、次のコードを含めて現在の実装を上書きすることをお勧めします

$.jgrid.extend({
    setRowData : function(rowid, data, cssp) {
        var nm, success=true, title;
        this.each(function(){
            if(!this.grid) {return false;}
            var t = this, vl, ind, cp = typeof cssp, lcdata=t.p.datatype === "local" && t.p.localReader.repeatitems === true? [] : {}, iLocal=0;
            ind = $(this).jqGrid('getGridRowById', rowid);
            if(!ind) { return false; }
            if( data ) {
                try {
                    $(this.p.colModel).each(function(i){
                        nm = this.name;
                        var dval =$.jgrid.getAccessor(data,nm);
                        if( dval !== undefined) {
                            vl = this.formatter && typeof this.formatter === 'string' && this.formatter === 'date' ? $.unformat.date.call(t,dval,this) : dval;
                            if (t.p.datatype === "local" && t.p.localReader.repeatitems === true) {
                                lcdata[iLocal] = vl;
                            } else {
                                lcdata[nm] = vl;
                            }
                            vl = t.formatter( rowid, dval, i, data, 'edit');
                            title = this.title ? {"title":$.jgrid.stripHtml(vl)} : {};
                            if(t.p.treeGrid===true && nm === t.p.ExpandColumn) {
                                $("td[role='gridcell']:eq("+i+") > span:first",ind).html(vl).attr(title);
                            } else {
                                $("td[role='gridcell']:eq("+i+")",ind).html(vl).attr(title);
                            }
                        }
                        if (nm !== "cb" && nm !== "subgrid" && nm !== "rn") {
                            iLocal++;
                        }
                    });
                    if(t.p.datatype === 'local') {
                        var id = $.jgrid.stripPref(t.p.idPrefix, rowid),
                        pos = t.p._index[id], key;
                        if(t.p.treeGrid) {
                            for(key in t.p.treeReader){
                                if(t.p.treeReader.hasOwnProperty(key)) {
                                    delete lcdata[t.p.treeReader[key]];
                                }
                            }
                        }
                        if(pos !== undefined) {
                            t.p.data[pos] = $.extend(true, t.p.data[pos], lcdata);
                        }
                        lcdata = null;
                    }
                } catch (e) {
                    success = false;
                }
            }
            if(success) {
                if(cp === 'string') {$(ind).addClass(cssp);} else if(cssp !== null && cp === 'object') {$(ind).css(cssp);}
                $(t).triggerHandler("jqGridAfterGridComplete");
            }
        });
        return success;
    }
});

後で私の提案をtrirandに投稿します。そのため、jqGrid の次のバージョンで問題が修正されることが期待できます。

于 2014-01-18T12:24:48.113 に答える