clearAfterAdd事件不起作用

时间:2013-04-12 18:26:08

标签: jquery jqgrid

目前,我使用[Enter键]工作,在保持表格打开的同时将记录保存到网格中。我对jqgrid wikiDoc的理解是clearAfterAdd将清除模态表单上的字段以输入下一条记录,但是这个事件不起作用。任何人都可以有所了解。以下是我的代码。

        var lastSel,
            mydata = [
                { id: "1", invdate: "2007-10-01", name: "test", amount: "200.00", tax: "10.00", total: "210.00" }
            ],
            grid = $("#list"),
            getColumnIndex = function (columnName) {
                var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
                for (i = 0; i < l; i++) {
                    if ((cm[i].index || cm[i].name) === columnName) {
                        return i; // return the colModel index
                    }
                }
                return -1;
            },
            onclickSubmitLocal = function (options, postdata) {
                var $this = $(this), grid_p = this.p,
                    idname = grid_p.prmNames.id,
                    grid_id = this.id,
                    id_in_postdata = grid_id + "_id",
                    rowid = postdata[id_in_postdata],
                    addMode = rowid === "_empty",
                    oldValueOfSortColumn,
                    new_id,
                    tr_par_id,
                    colModel = grid_p.colModel,
                    cmName,
                    iCol,
                    cm;

                // postdata has row id property with another name. we fix it:
                if (addMode) {
                    // generate new id
                    new_id = $.jgrid.randId();
                    while ($("#" + new_id).length !== 0) {
                        new_id = $.jgrid.randId();
                    }
                    postdata[idname] = String(new_id);
                } else if (typeof postdata[idname] === "undefined") {
                    // set id property only if the property not exist
                    postdata[idname] = rowid;
                }
                delete postdata[id_in_postdata];

                // prepare postdata for tree grid
                if (grid_p.treeGrid === true) {
                    if (addMode) {
                        tr_par_id = grid_p.treeGridModel === 'adjacency' ? grid_p.treeReader.parent_id_field : 'parent_id';
                        postdata[tr_par_id] = grid_p.selrow;
                    }

                    $.each(grid_p.treeReader, function (i) {
                        if (postdata.hasOwnProperty(this)) {
                            delete postdata[this];
                        }
                    });
                }

                // decode data if there encoded with autoencode
                if (grid_p.autoencode) {
                    $.each(postdata, function (n, v) {
                        postdata[n] = $.jgrid.htmlDecode(v); // TODO: some columns could be skipped
                    });
                }

                // save old value from the sorted column
                oldValueOfSortColumn = grid_p.sortname === "" ? undefined : grid.jqGrid('getCell', rowid, grid_p.sortname);

                // save the data in the grid
                if (grid_p.treeGrid === true) {
                    if (addMode) {
                        $this.jqGrid("addChildNode", new_id, grid_p.selrow, postdata);
                    } else {
                        $this.jqGrid("setTreeRow", rowid, postdata);
                    }
                } else {
                    if (addMode) {
                        // we need unformat all date fields before calling of addRowData
                        for (cmName in postdata) {
                            if (postdata.hasOwnProperty(cmName)) {
                                iCol = getColumnIndex.call(this, cmName);
                                if (iCol >= 0) {
                                    cm = colModel[iCol];
                                    if (cm && cm.formatter === "date") {
                                        postdata[cmName] = $.unformat.date.call(this, postdata[cmName], cm);
                                    }
                                }
                            }
                        }
                        $this.jqGrid("addRowData", new_id, postdata, options.addedrow);
                    } else {
                        $this.jqGrid("setRowData", rowid, postdata);
                    }
                }

                if ((addMode && options.closeAfterAdd) || (!addMode && options.closeAfterEdit)) {
                    // close the edit/add dialog
                    $.jgrid.hideModal("#editmod" + grid_id, {
                        gb: "#gbox_" + grid_id,
                        jqm: options.jqModal,
                        onClose: options.onClose
                    });
                }

                if (postdata[grid_p.sortname] !== oldValueOfSortColumn) {
                    // if the data are changed in the column by which are currently sorted
                    // we need resort the grid
                    setTimeout(function () {
                        $this.trigger("reloadGrid", [{ current: true }]);
                    }, 100);
                }

                // !!! the most important step: skip ajax request to the server
                options.processing = true;
                return {};
            },
            editSettings = {
                //recreateForm: true,
                jqModal: false,
                reloadAfterSubmit: false,
                closeOnEscape: true,
                savekey: [true, 13],
                closeAfterEdit: true,
                onclickSubmit: onclickSubmitLocal
            },
            addSettings = {
                recreateForm: true,
                jqModal: false,
                reloadAfterSubmit: false,
                savekey: [true, 13],
                closeOnEscape: true,
                closeAfterAdd: false,
                clearAfterAdd: true,
                onclickSubmit: onclickSubmitLocal
            }
                processing: true
            }
            };

        grid.jqGrid({
            datatype: 'local',
            data: mydata,
            colNames: [/*'Inv No', */'Client', 'Amount', 'Tax', 'Total'],
            colModel: [
                //{name: 'id', width: 70, align: 'center', sorttype: 'int', searchoptions: {sopt: ['eq', 'ne']}},
                {name: 'name', index: 'name', editable: true, width: 60, editrules: {required: true}},
                {name: 'amount', index: 'amount', width: 70, formatter: 'number', editable: true, align: 'right'},
                {name: 'tax', index: 'tax', width: 50, formatter: 'number', editable: true, align: 'right'},
                {name: 'total', index: 'total', width: 60, formatter: 'number', editable: true, align: 'right'}
            ],
            rowNum: 10,
            rowList: [5, 10, 20],
            pager: '#pager',
            gridview: true,
            rownumbers: true,
            autoencode: true,
            ignoreCase: true,
            sortname: 'invdate',
            viewrecords: true,
            sortorder: 'desc',
            caption: 'How to implement local form editing',
            height: '100%',
            editurl: 'clientArray',
            ondblClickRow: function (rowid, ri, ci) {
                var $this = $(this), p = this.p;
                if (p.selrow !== rowid) {
                    // prevent the row from be unselected on double-click
                    // the implementation is for "multiselect:false" which we use,
                    // but one can easy modify the code for "multiselect:true"
                    $this.jqGrid('setSelection', rowid);
                }
                $this.jqGrid('editGridRow', rowid, editSettings);
            },
            onSelectRow: function (id) {
                if (id && id !== lastSel) {
                    // cancel editing of the previous selected row if it was in editing state.
                    // jqGrid hold intern savedRow array inside of jqGrid object,
                    // so it is safe to call restoreRow method with any id parameter
                    // if jqGrid not in editing state
                    if (typeof lastSel !== "undefined") {
                        $(this).jqGrid('restoreRow', lastSel);
                    }
                    lastSel = id;
                }
            }
        }).jqGrid('navGrid', '#pager', {}, editSettings, addSettings, delSettings,
            {multipleSearch: true, overlay: false,
                onClose: function (form) {
                    // if we close the search dialog during the datapicker are opened
                    // the datepicker will stay opened. To fix this we have to hide
                    // the div used by datepicker
                    $("div#ui-datepicker-div.ui-datepicker").hide();
                }});

1 个答案:

答案 0 :(得分:0)

您使用我发布的代码herehere。我在上一个问题的回答中写道,如果使用表单编辑模式,jqGrid不支持编辑本地数据。我发布的代码是尝试实现一种解决方法,该方法可以使用本地数据的表单编辑的大多数功能。 onclickSubmitLocal的代码是基于complete的{​​{1}}事件处理程序的代码编写的(请参阅here)。如果您检查代码的the part,您会看到,结合选项editGridRow,将会调用内部函数closeAfterAdd: false, clearAfterAdd: true(请参阅the line

fillData

在编写代码时,我必须删除该部分,因为fillData("_empty",$t,frmgr); 无法从外部访问。

您可以使用fillData回调将输入表单上的所有字段重置为默认值。您应该找到的常用代码here,但在每种特定情况下,填充输入字段都会更容易。