jqGrid分页栏添加及相关问题

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);
	});
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值