1.添加分页栏的步骤。
1.1 .jsp页面 <div id="wfgs2010Pager"></div>
<div id="wfgs2010GyousyaData" class="grid-table" >
<table id="gridGyousyaData"></table>
<div id="wfgs2010Pager"></div>
</div>
1.2 .js页面 在table下方添加div,jqGrid中 pager:"wfgs2010Pager" 参数为添加分页栏的参数。该项目做了内部封装。
$("#gbox_gridGyousyaData").remove();
$("#wfgs2010GyousyaData").append("<table id='gridGyousyaData'></table>");
$("#wfgs2010GyousyaData").append("<div id='wfgs2010Pager'></div>");
$("#gridGyousyaData").jqGrid({
data: dataList,
datatype:"local",
multiboxonly:true,
cellEdit:false,
cellsubmit:'clientArray',
colNames:colNames,
colModel:colModel,
width:gridWidth,
height:gridHeight,
pager:"wfgs2010Pager",
rowNum:10,
gridview: true,
scroll:true,
regional:'ja',
onSelectRow:function(rowid, status){
var row = $("#gridGyousyaData").jqGrid('getRowData',rowid);
setRowData(row);
$("#selRow").val(rowid);
}
});
2.复制原有的jqGridS时,grid底部只出现了蓝色div区域,并未出现分页及相关控件。
原因:scroll 创建一个动态滚动的表格,当为true时,翻页栏被禁用
方法:当需要使用分页栏时,去掉jqGrid中scoll参数。
3.问题:查出多条数据,设置了分页栏但所有数据任然在一页显示。
.
原因:下图1初始化时创建了grid 图2在后台查到数据后,返回js,在给grid赋值时,
gridGyousyaData")[0].addJSONData(result.resultList);把查到的数据都赋给了第一页。
function createGyousyaDataGrid(data){
var dataList = [];
if(data && data.length > 0) {
dataList = data;
}
$("#gbox_gridGyousyaData").remove();
$("#wfgs2010GyousyaData").append("<table id='gridGyousyaData'></table>");
$("#wfgs2010GyousyaData").append("<div id='wfgs2010Pager'></div>");
$("#gridGyousyaData").jqGrid({
data: dataList,
datatype:"local",
multiboxonly:true,
cellEdit:false,
cellsubmit:'clientArray',
colNames:colNames,
colModel:colModel,
width:gridWidth,
height:gridHeight,
pager:"wfgs2010Pager",
rowNum:10,
gridview: true,
//scroll:true,
regional:'ja',
onSelectRow:function(rowid, status){
var row = $("#gridGyousyaData").jqGrid('getRowData',rowid);
setRowData(row);
$("#selRow").val(rowid);
}
});
}
function setGridData(){
var postData = {
keyword:$("#keyword").val(),
kaisiNendo:$("#kaisiNendo").val(),
gyoumu:$("#gyoumu").val(),
}
$.ajax({
url: sofia.contextPath() + "/keiyaku/wfgs2000/wfgs2010/getGyoushaGrid.do",
dataType: "json",
async:false,
type:"post",
data: postData
}).done(function(result) {
$("#gridGyousyaData").jqGrid("clearGridData");
if(result.resultList == null){
//
sofia.ui.showDialogJsMsg("E", "存在しません。");
$("#gridGyousyaData")[0].addJSONData([{}]);
}else{
$("#gridGyousyaData")[0].addJSONData(result.resultList);
//createGyousyaDataGrid(result.resultList);
for(var i=0;i<10;i++){
$("#jqgh_gridGyousyaData_nendo"+(i+1)).html(result.colum["nendo"+i]);
}
}
sofia.ui.dispLoader(false);
});
}
方法:所以如果没有分页栏赋值时,可以采用该方法赋值。
有分页栏的赋值时,需要再走一遍初始化,从而来实现将所有的查到的数据分页显示。
function setGridData(){
var postData = {
keyword:$("#keyword").val(),
kaisiNendo:$("#kaisiNendo").val(),
gyoumu:$("#gyoumu").val(),
}
$.ajax({
url: sofia.contextPath() + "/keiyaku/wfgs2000/wfgs2010/getGyoushaGrid.do",
dataType: "json",
async:false,
type:"post",
data: postData
}).done(function(result) {
$("#gridGyousyaData").jqGrid("clearGridData");
if(result.resultList == null){
//
sofia.ui.showDialogJsMsg("E", "存在しません。");
$("#gridGyousyaData")[0].addJSONData([{}]);
}else{
//$("#gridGyousyaData")[0].addJSONData(result.resultList);
createGyousyaDataGrid(result.resultList);
for(var i=0;i<10;i++){
$("#jqgh_gridGyousyaData_nendo"+(i+1)).html(result.colum["nendo"+i]);
}
}
sofia.ui.dispLoader(false);
});
}