爲什麼JQuery模態對話框和JQGrid模態對話框看起來不一樣？

Question

我用Jquery模式對話框創建了JQGrid用於刪除。 Jqgrid內聯編輯和一個字段是必需的，如果我把它留空，並按下提交它會彈出消息請輸入名字，但問題是內置彈出消息和我的jQuery模式對話看起來太不同了。

內置的jqGrid模態對話框：

JQuery的模態對話框

CODE：

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

如何爲JQGrid內置的對話框皮膚應用Jquery模式對話框？

感謝， Imdadhusen

Answer 1

的jqGrid是jQuery插件，而不是一個jQuery UI控件。所以它不使用jQuery UI對話框。而不是它使用$.jgrid.createModal,$.jgrid.viewModal和$.jgrid.hideModal方法。在某些情況下，使用簡化版本$.jgrid.info_dialog。許多人（包括我）希望在下一個版本中的jqGrid在內部使用更多的jQuery UI控件，並且可能會是一個jQuery UI小部件，但是現在，如果您想用jqGrid樣式創建對話框，則應該使用下列方法以上所列。

作爲功能使用的一個例子，我建議the following example創建與jqGrid相同的對話框與delGridRow方法。我在演示中包含了「刪除」導航按鈕來顯示，如果您首先使用「刪除選定行」按鈕創建對話框，然後使用「刪除」導航按鈕，則jqGrid不會創建新對話框。而不是我們的自定義對話框將被使用。

相應的代碼如下：

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

我也發現了內置的jqGrid模式對話框難以實施。嘗試使用它的所有參數調用createModal（）方法太複雜了。我看到的解決方法也非常複雜。我決定通過重寫HTML並顯示它來解決問題。

jqGrid已經在加載時爲其模態彈出窗口寫入HTML。我劫持了它，寫下了我自己的'X'關閉鏈接的監聽器，而且我瞧瞧，我有一個完全皮膚的對話框。我不是模態的，但你可以通過修改解決方案的CSS來輕鬆創建你自己的模型。一旦你明白如何操縱HTML，你可以添加任何你想要的元素/屬性/類。關閉後，只需刪除已添加的內容即可。

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

首先，我通過檢查我的#clonePopup id是否已經存在來測試messagebox是否已經顯示。然後我抓住X關閉鏈接上的一個句柄，因爲我要克隆它並隱藏原件。如果我使用原始格式，它將無法工作，因爲jqGrid正在監聽它，而我沒有設置必要的參數。我創建一個克隆並給它一個「clonePopup」的ID。然後我隱藏原文。

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

它可能不是一個完美的解決方案，但可能是一些。適用於我。試圖弄清楚createModal（）是如何工作的。

這篇文章的主要觀點並不在於這個特定的解決方案是否適合你（希望它可以），但是你可以通過重寫他們的HTML來覆蓋jqGrid的限制。

Answer 3

更新到我以前的帖子...

我在其中刪除需要檢查我的#clonePopoup年底增加了一個模態接口。我最後也清理了模態。我使用了一個在Chrome中的#alertmod後創建的模式。但是，在IE中，出於某種原因，這一點不會出現。如果它不存在，我創建它。

希望這是一個更完整的解決方案。

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