我多年来一直在使用免费的jqGrid。奇怪的是,今天我为同事设置了一个简单的模板,这只是一个奇怪的问题。寻呼机的渲染幅度非常大。我将我的代码发布在哪里,并看到附加的屏幕截图。
<html>
<head>
<!-- jQuery -->
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<!-- jquery-ui -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<!-- jqGrid -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/jquery.jqgrid.min.js"></script>
</head>
<body>
<!-- this is the HTML element for the grid UI -->
<div>
<table id="grid"></table>
</div>
<script type="text/javascript">
/*
* Everything inside this function is called after page is done loading
*/
jQuery(function($){
/*
* This is how we setup and configure the grid
* match the ID of the HTML element with CSS style selector
*/
$('#grid').jqGrid({
url:'/phpAJAX/Master/master_grid_v1.php', //url of data script
width: 500,
height: 300,
datatype: 'xml',
mtype: 'POST',
postData:{
'arg1':'marks_jqgrid_example' //tells the script it your database
},
colNames:[ //number of column names has to match number of colModel fields
'id',
'String field (field1)',
'Integer Field (field2)'
],
colModel:[ //this is the main setup for each field
{name: 'id', hidden: true },
{name: 'field1', editable: true },
{name: 'field2', editable:true }
],
sortname: 'field1', //the name of the sort field
sortorder: 'asc', //ascending or descending
caption: 'Flats or Plates Available',
pager: true,
gridview: true,
onSelectRow: function(id){
//do something special when you select a row
return;
},
rowNum: 10, //how many rows to show
})
})
</script>
</body>
</html>
它似乎与类ui-pg-table
的表正在获得导致问题的height: 100%
样式。如果我删除它,那么寻呼机的高度将返回到预期值。
您应该验证文档是否以
<!DOCTYPE html>
在<html>
元素之前。