Как избежать закрытия формы при щелчке за пределами модального окна при редактировании или добавлении новой строки в JQgrid? - PullRequest
6 голосов
/ 01 апреля 2010

есть способ избежать закрытия формы при добавлении или редактировании строки. Jqgrid отлично работает в нашем приложении, но есть небольшая проблема, когда пользователь редактирует или создает строку с помощью редактирования формы, и пользователь нажимает за пределами модальной формы, модальное закрытие и изменения теряются. Можно ли избежать такого поведения?

Ответы [ 3 ]

6 голосов
/ 19 мая 2010

Решено!

Просто убедитесь, что установили модальное значение: 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
            );
3 голосов
/ 03 марта 2011

модально: правда имеет свою проблему.

когда вы вызываете другой диалог jquery из формы редактирования jqgrid с помощью modal: true. Вы не можете вводить что-либо в новом диалоговом окне, потому что все события на клавиатуре (просто введите, все в порядке) останавливается модальным: true.

Так что проблема все еще там.

0 голосов
/ 05 июня 2016

попробуйте следовать внутри опции добавления / редактирования

 modal: true,
 jqModal:true
...