JQueryモーダルダイアログとJQGridモーダルダイアログが異なるのはなぜですか？

Question

削除のためのJqueryモーダルダイアログでJQGridを作成しました。私はそれを空白のままにして、それがポップアップメッセージを送信する場合はインライン編集と1つのフィールドを持つJqgridが必要です。名前は入力してください。問題はInbuiltポップアップメッセージと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のUIウィジェットjQueryプラグインとではありません。したがって、jQueryのUIダイアログではありません。代わりに、$.jgrid.createModal,$.jgrid.viewModalおよび$.jgrid.hideModalメソッドを使用します。状況によっては、簡略版$.jgrid.info_dialogが使用されます。多くの人々（私を含む）は、次のバージョンのjqGridがjQuery UIコントロールを内部的に使用し、おそらくjQuery UIウィジェットを使用することを望みますが、jqGridスタイルでダイアログを作成する場合は、上記に列挙した。

私はthe following exampleを使用して、delGridRowメソッドでjqGrid doと同じダイアログを作成することを提案します。デモに「削除」ナビゲーションボタンを表示して、ダイアログを作成して「削除」ナビゲーションボタンを使用する「選択した行を削除」ボタンを最初に使用すると、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が既に存在するかどうかをチェックすることによって表示されているかどうかをテストします。私はそれをクローンしてオリジナルを隠すつもりだから、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の後にあるaを使用して、モーダルを作成します。しかし、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');