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

前端之家收集整理的这篇文章主要介绍了为什么JQuery模态对话框和JQGrid模态对话框看起来有所不同?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我用Jquery模式对话框为Delete创建了JQGrid.如果我把它留空并且按下提交它将弹出消息请输入名字但是问题是Inbuilt Popup消息和我的jquery模式对话框看起来太不同了,需要内联编辑和一个字段的Jqgrid.

内置JQGrid模态对话框:

JQuery模态对话框

码:

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模态对话框?

谢谢,
Imdadhusen

最佳答案
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; });

猜你在找的jQuery相关文章