在JQgrid中编辑或添加新行时,如何在单击外部模态窗口时避免表单关闭?

时间:2010-03-31 22:43:35

标签: forms jqgrid editing

有没有办法在添加或编辑行时避免表单关闭。 Jqgrid在我们的应用程序中工作得很好,但是有一点问题,当用户通过表单编辑编辑或创建一行并且用户在表单的模态外单击时,模式关闭并且更改丢失。是否可以避免这种行为?

3 个答案:

答案 0 :(得分:6)

解决!

请确保在网格编辑中设置模态:true或添加选项,但请确保已下载jqGrid进行模态编辑。请参阅http://www.trirand.com/blog/?page_id=6

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

    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
            );

答案 1 :(得分:3)

modal:true有它的问题。

当您使用modal:true从jqgrid editform引发另一个jquery对话框时。 您无法在新对话框中输入任何内容,因为所有键盘(只需输入正常)事件由模态停止:true。

所以问题仍然存在。

答案 2 :(得分:0)

尝试遵循内部添加/编辑选项

 modal: true,
 jqModal:true