JQgrid'te yeni bir satır düzenlerken veya eklerken modal pencerenin dışını tıklattığınızda form kapatma nasıl engellenir?

Question

Bir satır eklerken veya düzenlerken form kapanmasından kaçınmanın bir yolu var. jqGrid bizim uygulamada mükemmel çalışıyor, ancak kullanıcı düzenleme veya form düzenleme ve formun modal dışında kullanıcı tıklamalar aracılığıyla bir satır oluşturarak zaman küçük bir sorun vardır, modal kapatır ve değişiklikler kaybolur. Bu davranıştan kaçınmak mümkün mü?

Answer 1

çözüldü!

Sadece modal ayarlamayı unutmayın: sizin ızgara düzenlemek true veya seçenekleri eklemek, ancak kalıcı düzenleme nereye JqGrid indirdiğiniz emin olun. Bakınız 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 
      ); 

Answer 2

modal: true sahiptir sorun olarak

İşte benim ızgara (// seçenekleri arayın) tasarruf tıklayın veya düğmeleri iptal zaman, şimdi modal sadece kapatır olduğunu. Gerçek:

sen jqGrid Editform'a ile modal başka jquery iletişim yükseltince. yeni iletişim kutusunda hiçbir şey giremezsiniz, çünkü tüm anahtar kartı (sadece giriş tamam) olay modal tarafından durdurulur: true.

Yani sorun hala orada. içeride aşağıdaki

Answer 3

deneme/düzenlemek seçenekleri

modal: true, 
jqModal:true