问题描述
我想将网格大小调整为固定高度，例如500px。如果说只有两个记录放置在网格中，我想将其余的行填充为空行，而不是使其可单击，因此网格将填充其可用高度的100％。是否有捷径可寻？
谢谢，
鲍勃
解决方法
1）设定高度：100％
2）可以更改jqgrid的背景色
否则你可以这样...
这是样品...
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Test </title>
<link href=\"css/jquery-ui-1.8.18.custom.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"css/ui.jqgrid.css\" rel=\"stylesheet\" type=\"text/css\" />
<script src=\"js/jquery-1.7.1.min.js\" type=\"text/javascript\"></script>
<script src=\"js/jquery-ui-1.8.18.custom.min.js\" type=\"text/javascript\"></script>
<script src=\"js/i18n/grid.locale-en.js\" type=\"text/javascript\"></script>
<script src=\"js/jquery.jqGrid.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$(function() {
var EditableID = 0;
jQuery(\"#list1\").jqGrid({
datatype: \"local\",colNames: [\'Inv No\',\'Date\',\'Client\',\'Amount\',\'Tax\',\'Total\',\'Notes\'],colModel: [
{ name: \'id\',index: \'id\',width: 75 },{ name: \'invdate\',index: \'invdate\',width: 90 },{ name: \'name\',index: \'name\',width: 100 },{ name: \'amount\',index: \'amount\',width: 80,align: \"right\" },{ name: \'tax\',index: \'tax\',{ name: \'total\',index: \'total\',{ name: \'note\',index: \'note\',width: 150,editoptions: { size: \"20\",maxlength: \"200\" },editable: true,edittype: \'text\',width: 75,sortable: true }
],rowNum: 22,height: 500,loadComplete: function(data) {
var NoOfCellAdd = Number($(\"#list1\").parent().parent().css(\'height\').split(\'px\')[0]) / 23;
for (var i = data.records; i <= NoOfCellAdd; i++) {
$(\"#list1\").addRowData(i + 1,{});
}
},onCellSelect: function(rowid,iCol,cellcontent,e) {
if (rowid <= EditableID) {
if ($(\"#lastCellId\").val() != -1)
$(\"#list1\").saveRow($(\"#lastCellId\").val(),false,\'clientArray\');
$(\'#list1\').editRow(rowid,true);
$(\"input,text\",e.target).focus();
$(\"#lastCellId\").val(rowid);
}
},autowidth: true,rowList: [10,20,30],pager: jQuery(\'#pager1\'),//sortname: \'id\',viewrecords: true,// sortorder: \"desc\",caption: \"XML Example\"
}).navGrid(\'#pager1\',{ edit: false,add: false,del: false });
var mydata = [
{ id: 1,invdate: \"2007-10-01\",name: \"test1\",note: \"note\",amount: \"200.00\",tax: \"10.00\",total: \"210.00\" },{ id: 2,invdate: \"2007-10-02\",name: \"test2\",note: \"note2\",amount: \"300.00\",tax: \"20.00\",total: \"320.00\" },{ id: 3,invdate: \"2007-09-01\",name: \"test3\",note: \"note3\",amount: \"400.00\",tax: \"30.00\",total: \"430.00\" },{ id: 4,invdate: \"2007-10-04\",name: \"test4\",note: \"note4\",{ id: 5,name: \"test5\",note: \"note5\",{id: 6,name: \"test30\",note: \"note30\",total: \"320.00\" }
];
EditableID = mydata.length;
$(\"#list1\").jqGrid(\'setGridParam\',{ datatype: \'local\',data: mydata }).trigger(\"reloadGrid\");
});
</script>
</head>
<body>
<form id=\"form1\" runat=\"server\">
<div>
<table id=\"list1\">
</table>
<div id=\"pager1\">
</div>
</div>
<input type=\"hidden\" id=\"lastCellId\" name=\"Language\" value=\"-1\">
</form>
</body>
</html>
// --------------------------------------------------------------------------------
// This is working fine...but this is not right way to do...
// **rowNum: 22,height:500px**