如何居中jqGrid的弹出模式窗口

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

昼梦童话诗
2016-03-04 · TA获得超过3224个赞

知道小有建树答主

回答量：1586

采纳率：60%

帮助的人：237万

我也去答题访问个人页

关注

展开全部

下面的代码到中心窗口。奥列格示例代码的。如果表格高度的变化，它不居中。测试用例重现不居中的表单问题。重现的步骤：下面在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>