¿Por qué JQuery Modal Dialog y JQGrid Modal Dialog se ven diferentes?

Question

He creado JQGrid con el diálogo modal Jquery para Eliminar. Se requiere Jqgrid con edición en línea y un campo si lo dejo en blanco y la prensa lo envía aparecerá un mensaje emergente. Introduzca el nombre pero el problema es un mensaje emergente incorporado y mi cuadro de diálogo modal de jquery parece demasiado diferente.

Inbuilt jqGrid diálogo modal:

JQuery diálogo modal

CÓDIGO:

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 }); 
    } 

¿Cómo puedo aplicar Jquery Modal Dialog para la máscara de diálogo incorporada JQGrid?

Gracias, Imdadhusen

Answer 1

jqGrid es jQuery plugin y no es un widget jQuery UI. Por lo tanto, no use el diálogo de jQuery UI. En lugar de eso, usa $.jgrid.createModal, $.jgrid.viewModal y $.jgrid.hideModal método. En alguna situación, se utilizan versiones simplificadas $.jgrid.info_dialog. Muchas personas (incluido yo) desean que jqGrid en una de las próximas versiones use más controles jQuery UI internamente y probablemente sea un widget jQuery UI, pero ahora si desea crear un diálogo en el estilo jqGrid debe usar los métodos que yo uso. listados arriba.

Como ejemplo de uso de las funciones sugiero the following example que crean el mismo cuadro de diálogo que jqGrid do con el método delGridRow. Incluí en la demostración el botón de navegación "Eliminar" para mostrar, que si primero usas el botón "Eliminar la fila seleccionada" que crea el diálogo y luego utilizas el botón de navegación "Eliminar", jqGrid no creará ningún diálogo nuevo. En lugar de eso, se usará nuestro diálogo personalizado.

El código correspondiente es el siguiente:

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

también he encontrado el diálogo modal integrado jqGrid difícil de implementar. Intentar llamar a createModal(), con todos sus parámetros, era demasiado complicado. Las soluciones que vi publicadas también fueron muy complejas. Decidí hacer un análisis final del problema reescribiendo el HTML y luego mostrándolo.

jqGrid ya escribe el HTML para su ventana emergente modal en la carga. Lo secuestré, escribí mi propio oyente para el enlace cercano a la "X" y, mira, he tenido un cuadro de diálogo completamente despellejado. El mío no es modal, pero puedes crear fácilmente el tuyo modificando el CSS de la solución. Una vez que comprenda cómo manipular el HTML, puede agregar los elementos/atributos/clases que desee. Al cerrar, simplemente eliminas lo que has agregado.

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'); 

En primer lugar, comprobar si el cuadro de mensaje ya se visualiza mediante la comprobación de si mi #clonePopup ID ya existe. Luego tomo un control sobre el enlace X Cerrar porque voy a clonarlo y ocultar el original. Si utilizo el original, no funcionará, porque jqGrid lo está escuchando y no he establecido los parámetros necesarios. Creo un clon y le doy un ID de 'clonePopup'. Luego escondo el original.

$('#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. 

Puede que no sea una solución perfecta pero puede ser para algunos. Funciona para mi. ¡Me evita tratar de descubrir cómo funciona createModal()!

El punto principal de esta publicación no es si esta solución en particular funciona para usted como es (con suerte lo es), sino que puede anular las limitaciones de jqGrid reescribiendo su HTML.

Answer 3

actualización de mi anterior post ...

he añadido una interfaz modal en el extremo que elimina la necesidad de comprobar por mi #clonePopoup. Limpio el modal al final también. Utilizo a, encontrado después de #alertmod en Chrome, para crear el modal. Sin embargo, en IE, por alguna razón, este no aparece. Lo creo si aún no existe.

Afortunadamente, esta es una solución más completa.

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');