如何使 jqGrid 弹出模式窗口居中？ [复制]答案

【问题标题】：how to center jqGrid popup modal window? [duplicate]如何使 jqGrid 弹出模式窗口居中？ [复制]
【发布时间】：2011-04-27 10:03:17
【问题描述】：

可能重复：
jqGrid Reposition Delete Confirmation Box

我已经开始使用 jqGrid 几天了，一切都很好。到目前为止一切都很好。让我感到惊讶的是，当您单击NavGrid 中的编辑按钮而不选择行时，它会显示一个居中的模式弹出窗口，通知您没有选择任何行。但是，当您单击添加或编辑（带有选定行）时，它会在网格的左侧显示一个模式。根本没有居中。

我想找到一种方法来居中。

这是怎么做到的？还是不能开箱即用？

感谢阅读本文

【问题讨论】：

标签： jquery jquery-ui jqgrid

【解决方案1】：

在我看来，最简单的方法是更改beforeShowForm 事件内的对话框位置：

var grid = $("#list");    
grid.jqGrid('navGrid','#pager',
            {add:false,del:false,search:false,refresh:false},
            { beforeShowForm: function(form) {
                  // "editmodlist"
                  var dlgDiv = $("#editmod" + grid[0].id);
                  var parentDiv = dlgDiv.parent(); // div#gbox_list
                  var dlgWidth = dlgDiv.width();
                  var parentWidth = parentDiv.width();
                  var dlgHeight = dlgDiv.height();
                  var parentHeight = parentDiv.height();
                  // TODO: change parentWidth and parentHeight in case of the grid
                  //       is larger as the browser window
                  dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                  dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
              }
            });

您可以实时查看示例here。

【讨论】：

感谢老兄，这很酷！仅适用于与我处于相同情况的任何人。请注意，编辑模式弹出窗口的名称是“editmod”+ name_of_your_grid”。您可以使用 firefox 中的 firebug 或任何基于 firefox 的浏览器进行验证
@black 老师：好建议！我忘了提这个。为了清楚起见，我稍微更改了代码。
再次感谢您的宝贵时间和帮助
@Oleg：如果窗口高度增加，此处的答案将不起作用。垂直居中仅适用于第一个记录。如果按下下一个记录按钮，窗口高度可能会增加，因为 textarea 包含更多行。表格未居中，底部移出屏幕。居中代码应该针对每条记录运行，而不仅仅是第一条记录。如何解决这个问题？
@Andrus：效果很好，但网格不大。我之前给你写过，你应该做一些改变以在你的情况下取得好的结果。在上面的演示中，dlgDiv.parent() ("div#gbox_list") 被使用，hight 和width 如果父用于居中。在您的情况下，您可以使用window、$(window).height() 或类似的innerWidth 和innerHeight。

【解决方案2】：

或者直接使用

beforeShowForm: function(form) {$("#editmod" + gridId).addClass("centered"); }

其中 gridId 是您的网格 ID，然后在 css 中是这样的：

div.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;

}

干杯贾雷克

【讨论】：

此解决方案仅适用于居中的 div 为 100px 高度和 200px 宽度。

【解决方案3】：

出于某种原因，列出的 Oleg 的代码并不能完全为我工作（尽管如果没有它，我永远不会走到这一步）。

两个问题：

1.) 如果您只是粘贴该答案中的内容，您将移动您的编辑模式，但不是您的添加模式。我只有一个添加模式，所以这让我困惑了一段时间。你基本上只是double the code（见下文）。

2.) Oleg 编写的代码是添加相对于整个页面而不是父 div 的平均顶部和左侧。我确定我遗漏了一些明显的东西（或者这可能就是 TODO 的内容？），但这对我有用......

注意：我进行了编辑以将该功能分解出来以在添加和编辑模式中重复使用，并且尚未实际测试更改。如果这不起作用，请参阅previous revision。

var grid = $("#list");    

function centerDialog(form)  {
  //alert('adding' + "#editmod" + grdNames[0].id);
  var dlgDiv = $("#editmod" + grdNames[0].id);
  var parentDiv = dlgDiv.parent(); // div#gbox_list
  var dlgWidth = dlgDiv.width();
  var parentWidth = parentDiv.width();
  var dlgHeight = dlgDiv.height();
  var parentHeight = parentDiv.height();

  // Grabbed jQuery for grabbing offsets from here:
  //https://stackoverflow.com/questions/3170902/select-text-and-then-calculate-its-distance-from-top-with-javascript
  var parentTop = parentDiv.offset().top;
  var parentLeft = parentDiv.offset().left;


  // HINT: change parentWidth and parentHeight in case of the grid
  //       is larger as the browser window
  dlgDiv[0].style.top  = Math.round( 
    parentTop  + (parentHeight-dlgHeight)/2  
  ) + "px";

  dlgDiv[0].style.left = Math.round( 
    parentLeft + (parentWidth-dlgWidth  )/2 
  )  + "px";
}

// Now it's easy to reuse that function to center stuff.
grid.jqGrid(
  'navGrid','#pager',
  {add:false,del:false,search:false,refresh:false},
  { beforeShowForm: centerDialog }, // edit modal
  { beforeShowForm: centerDialog }  // add modal
);

【讨论】：

【解决方案4】：

下面的代码可以用来居中窗口。使用 Oleg 示例代码。

如果表格高度发生变化，它不会居中。重现表单的测试用例未居中问题。

重现步骤：

在 IE9 中打开下面的页面
打开第一行视图
单击视图窗口中的下一行按钮打开第二行。

观察者：

视图窗口不居中，底部内容不可见且不可访问。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

        jQuery.extend(jQuery.jgrid.view, {
           recreateForm: true,
           closeOnEscape: true,

            width: 0.96*screen.width,

           beforeShowForm: function ($form) {
             $form.css({"max-height": 0.72*screen.height+"px"});
             $form.find("td.DataTD").each(function () {
               var $this = $(this), html = $this.html();  // &nbsp;<span>&nbsp;</span>
               if (html.substr(0, 6) === "&nbsp;") {
                 $(this).html(html.substr(6));
                 }
                $this.children("span").css({
                                overflow: "auto",
                                "text-align": "inherit", // overwrite 'text-align: "right"'
                                display: "inline-block"/*,
                                "max-height": "100px"*/
                            });
                        });

                        // "editmodlist" 
                  var dlgDiv = $("#viewmod" + $('#list')[0].id); 
                  var parentDiv = dlgDiv.parent(); // div#gbox_list 
                  //var dlgWidth = dlgDiv.width(); 
                  //var parentWidth = parentDiv.width(); 
                  var dlgHeight = dlgDiv.height(); 
                  var parentHeight = parentDiv.height(); 
                  // TODO: change parentWidth and parentHeight in case of the grid 
                  //       is larger as the browser window 
                  dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px"; 
                  // dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px"; 



                    }


         });

            var mydata = [
                {id:"1",invdate:"2007-10-02",name:"row1",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"2",invdate:"2007-10-02",name:"clicking\n me\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nincreases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
            ];
            var grid = $("#list");
            grid.jqGrid({
                data: mydata,
                datatype: "local",
                colModel:[
                    {name:'id',index:'id', key: true, width:70, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
                    {name:'name',index:'name', style:'width:"20px"', editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: {                  wrap : "on",
                                style : "width:30px"
}
},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                pager:'#pager',
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                height: "100%",
                caption: "Custom Navigation to Top Toolbar"
            });
            grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true});
        });
    </script>
</head>

<body style="overflow:hidden">

<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>

</body>
</html>

【讨论】：