代码之家 › 专栏 › 技术社区 › black sensei

如何将jqGrid弹出式模式窗口居中?[副本]

jqgrid jquery-ui jquery

9

black sensei · 技术社区 · 15 年前

可能重复:
jqGrid Reposition Delete Confirmation Box

当你点击 NavGrid 在不选择行的情况下,它会显示一个居中的模式弹出窗口,通知没有选择行。

我想找个方法把它居中。

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

谢谢你看这个

4 回复 | 直到 8 年前

1

21

Oleg 15 年前

在我看来,最简单的方法是更改 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

2

5

Community Mohan Dere 8 年前

出于某种原因,列出的Oleg代码并不完全适合我(尽管如果没有它,我也不会走到今天)。

两个问题:
1.)如果你只是粘贴在那里,你将移动你的编辑模式,但不是你的添加模式。我只有一个add模态,所以有一段时间很混乱。你基本上只是 double the code (见下文)。

{ 
    beforeShowForm: function(form) {
        alert('beforeShowForm FOR EDIT MODAL ONLY');
        // cut and paste code below to use for edit modal too.
    }
},
// options for add new modal here:
{
    beforeShowForm: function(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";

    }
}

3

1

Andrus 14 年前

下面的代码可以用来将窗口居中。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>

4

-1

Jarek Krochmalski 14 年前

或者只是使用

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

其中grid ID是网格的ID,然后在css中如下:

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

}

干杯