免費jqgrid 4.12覆蓋問題當jqgrid內部模態對話框

我使用免費的jqgrid 4.12和我使用模式對話框內的jqgrid。當我選擇一行並單擊編輯按鈕時，出現編輯對話框，但我無法填充該字段（它似乎被凍結）。免費jqgrid 4.12覆蓋問題當jqgrid內部模態對話框

你能幫我嗎？

function OuvrirEcran() 
{ 
    $("#Ecran").dialog("open"); 
}; 

$(function() 
{ 
    $("#Ecran").dialog(
    { 
     dialogClass: 'Ecran', 
     autoOpen: false, 
     width: 500, 
     height:400, 
     modal: true, 
     open: function (event, ui) { 
      $("#jqGrid").jqGrid({ 
       url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders', 
       mtype: "GET", 
       datatype: "jsonp", 
       colModel: [ 
        { label: 'OrderID', name: 'OrderID', key: true, width: 75 }, 
        { label: 'Customer ID', name: 'CustomerID', width: 150, editable:true }, 
        { label: 'Order Date', name: 'OrderDate', width: 150 }, 
        { label: 'Freight', name: 'Freight', width: 150 }, 
        { label:'Ship Name', name: 'ShipName', width: 150 } 
       ], 
       viewrecords: true, 
       width: 480, 
       height: 250, 
       rowNum: 20, 
       pager: "#jqGridPager" 
      }); 

      jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', { 
       del: true, add: false, edit: true} 
      ); 

     }, 
     close:function() {} 
    }); 
}); 

$(document).ready(function() { 
    OuvrirEcran(); 
});

來源

2016-01-27 jfprevot

謝謝你的問題的報告。調試這樣的問題非常困難。現在主要是禁用jqGrid創建的Modal對話框的jQuery UI模式功能。如果您在演示中評論'modal：true'，您將看到免費jqGrid的模態功能正常工作。因此，需要找到通知jQuery UI的方法，不要阻止由免費jqGrid創建的模式對話框的輸入。我必須在免費的jqGrid中做一些其他更改（更好地支持Bootstrap），稍後我會回到你的問題。 – Oleg

的jqGrid應該利用UI的對話框類時，它會創建模態對話框。

您將不得不修改jquery.jqGrid.min.js文件。

按5.0.0版本，

只需添加UI的對話框類follwing線，

modal: { modal: "ui-widget ui-widget-content ui-corner-all ",

例如

modal: { modal: "ui-widget ui-widget-content ui-corner-all ui-dialog",

作爲每免費的jqGrid版本，

添加UI-對話框類下面的行，

dialog: { 
       ... 
       window: "ui-widget ui-widget-content ui-corner-all ui-front", 
       ...

例如

dialog: { 
       ... 
       window: "ui-widget ui-widget-content ui-corner-all ui-front ui-dialog", 
       ...

來源

2016-01-28 18:40:53 amighty

問題的原因是jQuery用戶界面對話框的內部方法_allowInteraction的內部代碼jQuery用戶界面的the lines：

_allowInteraction: function(event) { 
    if ($(event.target).closest(".ui-dialog").length) { 
     return true; 
    } 
    ... 
}

它防止任何的jQuery UI對話外相互作用。

我將包括免費的jqGrid代碼下面的技巧：我會後the line

h.w.css("z-index", z);

的 $.jqm.open()

加線

if ($(h.w[0].ownerDocument).data("ui-dialog-overlays")) { 
    h.w.addClass("ui-dialog"); // hack to allow input inside of jQuery UI modal 
}

。我的測試表明它解決了這個問題。

我現在在免費jqGrid代碼中做了一些其他更改。因此，我會在稍後介紹上述的修復程序。您已經可以使用jquery.jqgrid.4.12.1-jquerui-modal-fix.src.js對其進行編輯。您可以在演示http://jsfiddle.net/OlegKi/9ezy09ep/142/上測試它。請在JSFiddle中使用http而不是https協議，因爲我將修復程序放在不支持https的服務器上。

來源

2016-01-28 09:18:38 Oleg

免費jqgrid 4.12覆蓋問題當jqgrid內部模態對話框

回答

相關問題