Dlaczego JQuery Modal Dialog i JQGrid Modal Dialog wyglądają inaczej?

Question

Utworzono JQGrid z modalnym dialogiem Jquery dla Delete. Jqgrid z wbudowaną edycją i jednym polem jest wymagane, jeśli zostawiam go puste, a prasa przesyła komunikat o wyskakujących okienkach Proszę wprowadzić imię, ale problemem jest wbudowany komunikat wyskakujący i moje modalne okno dialogowe jquery wygląda zbyt inaczej.

Wbudowany jqGrid modalnym:

JQuery modalnym

KOD:

function createGrid() { 
     jQuery("#list").jqGrid({ 
      url: '@Url.Action("JQGridGetGridData", "TabMaster")', 
      datatype: 'json', 
      mtype: 'GET', 
      colNames: ['col ID', 'First Name', 'Last Name', ''], 
      colModel: [{ name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} }, 
         { name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true, editrules: { required: true} }, 
         { name: 'LastName', index: 'LastName', width: 150, align: 'left', editable: true, editrules: { required: true} }, 
         { name: 'act', index: 'act', width: 60, sortable: false}], 
      pager: jQuery('#pager'), 
      hidegrid: false, 
      rowNum: 100, 
      rowList: [10, 50, 100, 150], 
      sortname: 'colID', 
      sortorder: "asc", 
      viewrecords: true, 
      multiselect: false, 
      width: 500, 
      height: "250px", 
      imgpath: '@Url.Content("~/Scripts/themes/steel/images")', 
      caption: 'Tab Master Information', 
      editurl: '@Url.Action("JQGridEdit", "TabMaster")', 
      gridComplete: function() { 
       var ids = jQuery("#list").getDataIDs(); 
       for (var i = 0; i < ids.length; i++) { 
        var id = ids[i]; 
        be = "<a href='#'><div title='Edit' id='action_edit_" + id + "' class='actionEdit' onclick='inlineEdit(" + id + ");'></div></a>"; 
        de = "<a href='#'><div title='Delete' id='action_delete_" + id + "' class='actionDelete' onclick='inlineDelete(" + id + ");'></div></a>"; 
        se = "<a href='#'><div title='Save' style='display:none' id='action_save_" + id + "' class='actionSave' onclick='inlineSave(" + id + ");'></div></a>"; 
        ce = "<a href='#'><div title='Cancel' style='display:none' id='action_cancel_" + id + "' class='actionCancel' onclick='inlineCancel(" + id + ");'></div></a>"; 
        jQuery("#list").setRowData(ids[i], { act: be + de + se + ce }) 
       } 
      } 
     }).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: false }); 
    } 

Jak zastosować aplikację Jquery Modal Dialog do wbudowanej skóry okna dialogowego JQGrid?

Dzięki Imdadhusen

Answer 1

jqGrid jest jQuery plugin i nie widget jQuery UI. Więc nie używać okna dialogowego jQuery UI. Zamiast tego używa metody $.jgrid.createModal, $.jgrid.viewModal i $.jgrid.hideModal. W niektórych sytuacjach używana jest wersja uproszczona $.jgrid.info_dialog. Wiele osób (włącznie ze mną) życzy sobie, aby jqGrid w jednej z następnej wersji używał więcej elementów sterujących jQuery wewnątrz i prawdopodobnie będzie widgetem jQuery UI, ale teraz, jeśli chcesz utworzyć okno dialogowe w stylu jqGrid, powinieneś użyć metod, które ja wymienione powyżej.

Jako przykład użycia funkcji sugeruję the following example, które tworzą takie samo okno dialogowe jak jqGrid do z użyciem metody delGridRow. Włączyłem do demonstracji przycisk nawigacyjny "Usuń", aby pokazać, że jeśli użyjesz po raz pierwszy przycisku "Usuń wybrany wiersz", który utworzy dialog, a następnie użyje przycisku "Usuń", nowe okno dialogowe nie zostanie utworzone przez jqGrid. Zamiast tego zostanie użyte nasze niestandardowe okno dialogowe.

Odpowiedni kod jest poniżej:

var grid = $("#list"), 
    gID = grid[0].id, //grid[0].p.id, 
    IDs = { 
     themodal:'delmod'+gID, 
     modalhead:'delhd'+gID, 
     modalcontent:'delcnt'+gID, 
     scrollelm:'DelTbl_'+gID 
    }, 
    hideDialog = function() { 
     $.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null}); 
    }, 
    rowId, 
    createDeleteDialog = function() { 
     var dlgContent = 
      "<div id='"+IDs.scrollelm+"' class='formdata' style='width: 100%; overflow: auto; position: relative; height: auto;'>"+ 
       "<table class='DelTable'>"+ 
        "<tbody>"+ 
         "<tr id='DelError' style='display: none'>"+ 
          "<td class='ui-state-error'></td>"+ 
         "</tr>"+ 
         "<tr id='DelData' style='display: none'>"+ 
          "<td>"+rowId+"</td>"+ // it has not so much sense 
         "</tr>"+ 
         "<tr>"+ 
          "<td class='delmsg' style='white-space: pre;'>"+$.jgrid.del.msg+"</td>"+ 
         "</tr>"+ 
         "<tr>"+ 
          "<td>&#160;</td>"+ 
         "</tr>"+ 
        "</tbody>"+ 
       "</table>"+ 
      "</div>"+ 
      "<table cellspacing='0' cellpadding='0' border='0' class='EditTable' id='"+IDs.scrollelm+"_2'>"+ 
       "<tbody>"+ 
        "<tr>"+ 
         "<td>"+ 
          "<hr class='ui-widget-content' style='margin: 1px' />"+ 
         "</td>"+ 
        "</tr>"+ 
        "<tr>"+ 
         "<td class='DelButton EditButton'>"+ 
          "<a href='javascript:void(0)' id='dData' class='fm-button ui-state-default ui-corner-all'>Delete</a>"+ 
          "&#160;<a href='javascript:void(0)' id='eData' class='fm-button ui-state-default ui-corner-all'>Cancel</a>"+ 
         "</td>"+ 
        "</tr>"+ 
       "</tbody>"+ 
      "</table>"; 

     if ($('#'+IDs.themodal).length===0) { 
      // dialog not yet exist. we need create it. 
      $.jgrid.createModal(
       IDs, 
       dlgContent, 
       { 
        gbox: "#gbox_"+gID, 
        caption: $.jgrid.del.caption, 
        jqModal: true, 
        left: 12, 
        top: 44, 
        overlay: 10, 
        width: 240, 
        height: 'auto', 
        zIndex: 950, 
        drag: true, 
        resize: true, 
        closeOnEscape: true, 
        onClose: null 
       }, 
       "#gview_"+gID, 
       $("#gview_"+gID)[0]); 
      $("#dData","#"+IDs.scrollelm+"_2").click(function(){ 
       // "Delete" button is clicked 
       var rowId = grid.jqGrid('getGridParam', 'selrow'); 
       grid.jqGrid('delRowData',rowId); 
       //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null}); 
       hideDialog(); 
      }); 
      $("#eData", "#"+IDs.scrollelm+"_2").click(function(){ 
       // "Cancel" button is clicked 
       //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null}); 
       hideDialog(); 
       //return false; 
      }); 
     } 

     $.jgrid.viewModal("#"+IDs.themodal,{gbox:"#gbox_"+gID,jqm:true, overlay: 10, modal:false}); 
    }; 

grid.jqGrid({/*jqGrid options*/}); 

$("#delgridrow").click(function() { 
    rowId = grid.jqGrid('getGridParam', 'selrow'); 
    if (rowId === null) { 
     $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+grid[0].p.id,jqm:true}); 
     $("#jqg_alrt").focus(); 
    } else { 
     createDeleteDialog(); 
    } 

    return false; 
}); 

Answer 2

ja też znaleźć okno modalne wbudowanej jqGrid trudne do wdrożenia. Próba wywołania metody createModal() ze wszystkimi jej parametrami była zbyt skomplikowana. Obejścia, które zobaczyłem, były również bardzo złożone. Postanowiłem zrobić koniec problemu, przepisując kod HTML, a następnie wyświetlając go.

jqGrid zapisuje już HTML dla swoich modalnych wyskakujących okienek podczas ładowania. Porwałem go, napisałem własnego słuchacza do bliskiego łącza "X" i oto zobaczyłem, że mam w pełni skrócone okno dialogowe. Mój nie jest modalny, ale możesz łatwo stworzyć swój własny, modyfikując CSS rozwiązania. Kiedy zrozumiesz, jak manipulować HTMLem, możesz dodać dowolne elementy/atrybuty/klasy, które chcesz. Po zamknięciu po prostu usuń to, co dodałeś.

var popup = function (msg, title) { 
    if ($('#clonePopup').length == 0) { 
    var popupClose = $('.ui-icon-closethick'); 
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose); 
    popupClose.hide(); 
    $('#alertcnt>div').html(msg); 
    $('#alerthd>span').html(title); 
    $('#clonePopup').click(function (e) { 
     $('#alertmod').hide(); 
     $('#clonePopup').remove(); 
     $('#alertcnt>div').html(' אנא, בחר שורה'); 
     $('#alerthd>span').html('אזהרה'); 
     popupClose.removeAttr('style'); 
    }); 
    $('#alertmod').show(); 
    } 
}}; 

popup('Row saved successfully','Success'); 

pierwsze, sprawdzić, czy jest już wyświetlany messagebox poprzez sprawdzenie, czy mój #clonePopup id już istnieje. Następnie chwytam uchwyt X blisko, ponieważ zamierzam go sklonować i ukryć oryginał. Jeśli użyję oryginału, to nie zadziała, ponieważ jqGrid nasłuchuje i nie ustawiłem niezbędnych parametrów. Tworzę klona i nadaję mu identyfikator "clonePopup". Następnie ukrywam oryginał.

$('#alertcnt>div') gets me the container for the title. 
$('#alerthd>span') gets me the container for the message. 
$('#alertmod') is then shown. 

$('#clonePopup').click() then resets the HTML to its original state to not interfere with jqGrid's normal operation. 

To może nie być idealne rozwiązanie, ale może być dla niektórych. Pracuje dla mnie. Oszczędzi mi, próbując dowiedzieć się, jak działa funkcja createModal()!

Głównym punktem tego wpisu nie jest to, czy to konkretne rozwiązanie działa tak, jak jest (mam nadzieję, że tak), ale że można zastąpić ograniczenia jqGrid przez przepisanie ich kodu HTML.

Answer 3

Aktualizacja do mojego poprzedniego postu ...

dodałem modalne interfejs, który w końcu usunięto konieczność sprawdzenia mojego #clonePopoup. Oczyszczam również modal na końcu. Używam, znalezionego po #alertmod w Chrome, aby utworzyć modal. Jednak w IE, z jakiegoś powodu, to samo się nie pojawia. Tworzę go, jeśli jeszcze nie istnieje.

Mamy nadzieję, że jest to bardziej kompletne rozwiązanie.

var popup = function (msg, title) { 
    var modalcss = { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', display: 'block', opacity: 0.4, filter: 'alpha(opacity=40)', 'background-color': '#000', 'text-align': 'center', 'z-index': 101 }; 
    var popupClose = $('.ui-icon-closethick'); 
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose); 
    popupClose.hide(); 
    $('#alertcnt>div').html(msg); 
    $('#alerthd>span').html(title); 
    if ($('#tc_container').length) { 
     $('#tc_container').css(modalcss); 
    } else { 
     $('<div>', { 'id': 'tc_container' }).css(modalcss).insertAfter($('#alertmod')); 
    } 

$('#clonePopup').click(function (e) { 
    $('#alertmod').hide(); 
    $('#alertcnt>div').html(' אנא, בחר שורה'); 
    $('#alerthd>span').html('אזהרה'); 
    popupClose.removeAttr('style'); 
    $('#alertmod').css('display', ''); 
    $('#tc_container').attr('style', 'display:none;'); 
    $('#clonePopup').remove(); 
    }); 
    $('#alertmod').show(); 
}; 

popup('Row saved successfully','Success');