free jqgrid 4.12 проблема наложения при jqgrid внутри модального диалога

Я использую бесплатный jqgrid 4.12, и я использую jqgrid внутри модального диалога. Когда я выбираю строку и нажимаю кнопку редактирования, появляется диалоговое окно редактирования, но я не могу заполнить поле (оно, кажется, заморожено).free jqgrid 4.12 проблема наложения при jqgrid внутри модального диалога

Вы можете мне помочь?

http://jsfiddle.net/9ezy09ep/54/

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

Благодарим за сообщение о проблеме. Очень сложно отладить такую проблему. В основном проблема заключается в отключении модальной функциональности jQuery UI для модального диалога, созданного свободным jqGrid. Если вы прокомментируете «modal: true» в своей демонстрации, вы увидите, что модальная функциональность бесплатного jqGrid работает правильно.Таким образом, нужно найти способ информировать пользовательский интерфейс jQuery не блокировать вход для модального диалога, созданного свободным jqGrid. Я должен сделать некоторые другие изменения в бесплатном jqGrid (лучшая поддержка Bootstrap), и я вернусь к вашей проблеме позже. – Oleg

jqGrid должен использовать ui-dialog класс, когда он создает модальный диалог.

вам нужно будет изменить 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

Причиной проблемы является the lines из кода JQuery UI внутри внутреннего метода _allowInteraction диалога JQuery UI:

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

Это предотвращает взаимодействие вне какого-либо диалога JQuery UI.

Я буду включать следующий хак в свободном коде jqGrid: Я добавлю линию

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

после the line

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

из $.jqm.open(). Мои тесты показывают, что он исправляет проблему.

Теперь я делаю некоторые изменения в свободном коде jqGrid. Из-за этого я опубликую исправление, которое я описал выше, немного позже. Вы уже можете его использовать, используя jquery.jqgrid.4.12.1-jquerui-modal-fix.src.js. Вы можете проверить его на демо http://jsfiddle.net/OlegKi/9ezy09ep/142/. Пожалуйста, используйте протокол http, а не https в JSFiddle, потому что я разместил исправление на сервере, который не поддерживает https.

источник

2016-01-28 09:18:38 Oleg

free jqgrid 4.12 проблема наложения при jqgrid внутри модального диалога

ответ

Смежные вопросы