为什么JQuery模态对话框和JQGrid模态对话框看起来有所不同？

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,editable: true,editrules: { required: true} },{ name: 'LastName',index: 'LastName',{ 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",gridComplete: function () {
                var ids = jQuery("#list").getDataIDs();
                for (var i = 0; i < ids.length;="" i++)="" {="" var="" id="ids[i];" be="

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 =
            "
<><>
Box: "#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,onClose: null});
                hideDialog();
            });
            $("#eData","#"+IDs.scrollelm+"_2").click(function(){
                // "Cancel" button is clicked
                //$.jgrid.hideModal("#"+IDs.themodal,onClose: null});
                hideDialog();
                //return false;
            });
        }

        $.jgrid.viewModal("#"+IDs.themodal,{gBox:"#gBox_"+gID,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;
});