jqGrid的:表格编辑保存行,但寻呼向后或向前时,会丢失所有更改(jqGrid: Form edi

2019-10-19 05:35发布

我使用的表单编辑本地数据。 我能够编辑在表单中的值和设置的值回(使用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');

您的帮助表示赞赏。

谢谢

Answer 1:

我想,你的问题的原因是阵列格式的使用( repeatitems: truelocalReader输入的数据)。 我想,你需要从构建阵列postdata并把它作为参数setRowData而不是postdata

如果咨询会不帮你,你应该张贴与测试数据网格的更完整的代码。 喜欢码colModel: getColModel(),没有真正的帮助。 换句话说,你应该张贴足够的信息来重现该问题。 最好是在工作演示http://jsfiddle.net/ 。 如果你准备这样的演示,请使用jquery.jqGrid.src.js代替jquery.jqGrid.min.js

更新 :在你的代码的问题是使用数组是一个项目,如果输入data (你使用repeatitems: truelocalReader )。 目前执行的setRowData不支持的情况下(工作不正确的)。 例如,如果你有这样的初步数据

并启动第三排的编辑,你将有类似如下

用法等之后$('#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。 因此可以希望,这个问题将被固定在jqG​​rid的下一个版本。



文章来源: jqGrid: Form edits saved to row but all changes lost when paging back or forth