Làm cách nào để tránh việc đóng biểu mẫu khi nhấp vào bên ngoài cửa sổ phương thức khi chỉnh sửa hoặc thêm hàng mới trong JQgrid?

Question

là có cách để tránh đóng biểu mẫu khi thêm hoặc chỉnh sửa hàng. Jqgrid hoạt động hoàn hảo trong ứng dụng của chúng tôi, nhưng có một vấn đề nhỏ, khi người dùng chỉnh sửa hoặc tạo hàng thông qua chỉnh sửa biểu mẫu và người dùng nhấp vào bên ngoài phương thức của biểu mẫu, phương thức đóng và thay đổi bị mất. Có thể tránh được hành vi này không?

Answer 1

Giải quyết!

Chỉ cần đảm bảo đặt phương thức: true trong chỉnh sửa lưới của bạn hoặc thêm tùy chọn, nhưng hãy chắc chắn bạn đã tải xuống jqGrid whith editing editing. Xem http://www.trirand.com/blog/?page_id=6.

Đây là lưới của tôi (tìm kiếm // tùy chọn), nay là phương thức chỉ đóng khi nhấp vào tiết kiệm hoặc hủy bỏ các nút:

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: đúng của nó có vấn đề.

khi bạn tăng một hộp thoại jquery khác từ biểu mẫu chỉnh sửa jqgrid bằng phương thức: true. bạn không thể nhập bất cứ điều gì trong hộp thoại mới, bởi vì tất cả các bàn phím (chỉ cần nhập là ok) sự kiện được dừng lại bởi phương thức: true.

Vì vậy, sự cố vẫn còn đó.

Answer 3

thử sau bên trong thêm/chỉnh sửa tùy chọn

modal: true, 
jqModal:true