标签：
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";
}
});
你可以看到生活的例子在这里。
2. 对于原因Oleg的代码，如上市，以前并不工作（虽然我不会曾经得到这个远没有它）。 两个问题： 1）如果你只是贴在那里的东西，你会移动你的编辑模态，但不是你的附加模态。我只有一个附加的模态，所以这是一段时间。基本上，您只需双击代码（见下文）。 2）作为写入的码是加了平均顶部和左侧相对于整个页面，而不是父div。我敢肯定，我失去（或者也许这就是在TODO是什么？什么），但这个工作
{
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:
// CodeGo.net
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. 下面的代码到中心窗口。奥列格示例代码的。 如果表格高度的变化，它不居中。测试用例重现不居中的形式问题。 重现的步骤： 下面在IE9中打开页面 对于第一行打开查看 单击视图窗口下排按钮，打开第二排。 Observerd： 视图窗口不集中，底部内容是不可见和不可访问。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " CodeGo.net
<html xmlns=" CodeGo.net
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href=" CodeGo.net />
<link rel="stylesheet" type="text/css" href=" CodeGo.net />
<link rel="stylesheet" type="text/css" href=" CodeGo.net />
<link rel="stylesheet" type="text/css" href=" CodeGo.net />
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<script type="text/javascript" src=" CodeGo.net
<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(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(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. 或
beforeShowForm: function(form) {$("#editmod" + gridId).addClass("centered"); }
其中gridId是网格的ID，然后在CSS是这样的：
div.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
标签：
原文地址：http://www.cnblogs.com/wendyhome/p/4195778.html
