forms - 在JQgrid中编辑或添加新行时，如何避免在模态窗口外单击时关闭表单？

Question

有没有办法在添加或编辑行时避免关闭表单。
jqgrid 在我们的应用程序中运行良好，但有一个小问题，当用户通过表单编辑编辑或创建行时，用户在表单的模态之外单击，模态关闭并且更改丢失。是否有可能避免这种行为？

Answer 1

解决了!

只是，一定要在你的网格编辑或添加选项中设置 modal:true ，但要确保你已经下载了带有模态编辑的 jqGrid 。见 http://www.trirand.com/blog/?page_id=6 .

这是我的网格(查找//options)，现在模态仅在单击保存或取消按钮时关闭:

    jQuery("#gridTipo").jqGrid(
            {

                url : 'obtenerTipoDetallePorTipo.do?idTipo=0',
                datatype : "json",

                colNames : [ 'ID', 'Codigo', 'Descripción', 'Tabla',
                        'CodPadre', 'Nombre', 'Idioma' ],
                colModel : [ {
                    name : 'id',
                    index : 'id',
                    autowidth:true,
                    hidden : true,
                    width : 90,
                    editable : true,
                    editoptions : {
                        readonly : true,
                        size : 10
                    }
                }, {
                    name : 'codigoTipo',
                    index : 'codigoTipo',
                    autowidth : true,
                    editable : true,
                    formoptions : {
                        rowpos : 2,
                        label : "Codigo",
                        elmprefix : "(*)"
                    },
                    editrules : {
                        required : true
                    }
                }, {
                    name : 'descripcionTipo',
                    index : 'descripcionTipo',
                    autowidth : true,
                    editable : true,
                    editoptions : {
                        size : 20
                    },
                    formoptions : {
                        rowpos : 3,
                        label : "Descripcion",
                        elmprefix : "(*)"
                    },
                    editrules : {
                        required : true
                    }
                }, {
                    name : 'tabla',
                    index : 'tabla',
                    autowidth : true,
                    editable : true,
                    formoptions : {
                        rowpos : 4,
                        label : "Tabla",
                        elmprefix : "(*)"
                    },
                    editrules : {
                        required : true
                    }

                }, {
                    name : 'codpadre',
                    index : 'codpadre',
                    hidden : true,
                    autowidth:true,
                    editable : true,
                    editoptions : {
                        readonly : true,
                        size : 25,
                        defaultValue : function() {
                            var codPad = jQuery("#codPadreH").val();
                            return codPad;
                        }
                    }
                }, {
                    name : 'nombre_tipo',
                    index : 'nombre_tipo',
                    autowidth : true,
                    editable : true,
                    editoptions : {
                        size : 20
                    },
                    formoptions : {
                        rowpos : 6,
                        label : "Nombre",
                        elmprefix : "(*)"
                    },
                    editrules : {
                        required : true
                    }
                }, {
                    name : 'idioma',
                    index : 'idioma',
                    autowidth : true,
                    editable : true,
                    edittype : "select",
                    editoptions : {
                        value : "${idiomasDin}"
                    },
                    formoptions : {
                        rowpos : 7,
                        elmprefix : "    "
                    }
                } ],
                rowNum : 10,
                pager : jQuery('#pgridTipo'),
                sortname : 'id',
                sortorder : "desc",
                viewrecords : true,
                width : '620',
                height : "250",
                editurl : "doPost.do",
                shrinkToFit:false,
                caption : "Administracion Tipos"
            }).navGrid('#pgridTipo', {
        add : true,
        search : false,
        del : false
    }, //options
            {   modal: true,
                height : 220,
                width : 500,
                reloadAfterSubmit : true,
                recreateForm : true,
                closeAfterEdit : true,
                beforeInitData : function(FrmGrid_gridTipo) {
                    jQuery("#gridTipo").setColProp('codigoTipo', {
                        editoptions : {
                            readonly : true,
                            size : 20
                        }
                    });
                    jQuery("#gridTipo").setColProp('tabla', {
                        editoptions : {
                            readonly : true,
                            size : 20
                        }
                    });
                    jQuery("#gridTipo").trigger('reloadGrid');
                    //alert("hola");
            }
            }, // edit options
            {
                modal: true,
                height : 220,
                width : 500,
                reloadAfterSubmit : true,
                closeAfterAdd : true,
                beforeInitData : function(FrmGrid_gridTipo) {
                    jQuery("#gridTipo").setColProp('codigoTipo', {
                        editoptions : {
                            readonly : false,
                            size : 20
                        }
                    });
                    jQuery("#gridTipo").setColProp('tabla', {
                        editoptions : {
                            readonly : false,
                            size : 20
                        }
                    });
                    jQuery("#gridTipo").trigger('reloadGrid');
                    //alert("hola");
            },
            recreateForm : true
            }, // add options
            {
                reloadAfterSubmit : false
            }, // del options
            {} // search options
            );