JSP & Servlet (IDE: Eclipse、データベース: Oracle10) を使用して Web アプリケーションを開発しています。
jqGrid
レコードを表形式で表示するために使用しています。header
を使用してDetails
テーブルを設計しました。テーブルjqGrid
の任意の行をクリックすると、それに応じてテーブルHeader
の行Details
が変更されます。jqGrid
forHeader
とDetails
Tableを別々に取りました。
テーブルの行をクリックすると、テーブルのHeader
関連データが表示されますjqGrid
Details
しかし、問題はNavigation Bar
ofHeader
が正常に動作しているのに、 Navigation Bar
of Details
Table が動作していないことです。[次のページ] ボタンをクリックすると、同じ結果が再び表示されます。
[注: 両方の追加、編集、および削除ボタンは正常に機能していますが、Details
テーブルのレコードのナビゲーションのみが機能していません]
Header
:
jQuery("#list10").jqGrid({
url:'ProtocolJGridServ?q=2&action=protocol',
datatype: "xml",
height: 250,
colNames:['Sr. No.','PROTOCOL_ID','DESCRIPTION','PURPOSE','PROTOCOL_TYPE','TARGET','START_DATE','END_DATE','TRIGGER_NAME'],
colModel:[{name:'srNo',index:'srNo', width:35,sortable:true},
{name:'PROTOCOL_ID',index:'PROTOCOL_ID', width:100,sortable:true,editable:true},
{name:'DESCRIPTION',index:'DESCRIPTION', width:200,sortable:false,editable:true},
{name:'PURPOSE',index:'PURPOSE', width:100,sortable:false,editable:true},
],
rowNum:5,
rowList:[3,5,10],
pager: '#pager10',
sortname: 'srNO',
loadonce:true,
viewrecords: true,
sortorder: "desc",
multiselect: false,
editurl: "ProtocolJGridServ?action=protocolEdit",
caption: "Protocol",
onSelectRow: function(ids,status)
{
if(status==true)
{
if(ids)
{
var cm = $('#list10').jqGrid('getColProp',"PROTOCOL_ID"); cm.editable=false;
var ret = jQuery("#list10").jqGrid('getRowData',ids);
protID = ret.PROTOCOL_ID;
jQuery("#list10").jqGrid('setGridParam', {editurl:'ProtocolJGridServ?action=protocolEdit&protID='+protID});
jQuery('#list10').jqGrid('restoreRow',lastsel);
jQuery('#list10').jqGrid('editRow',ids,true);
lastsel=ids;
cm = $('#list10').jqGrid('getColProp',"PROTOCOL_ID"); cm.editable=true;
}
if(ids!=null)
{
var PROTOCOL_ID = $('#list10').getCell(ids, 'PROTOCOL_ID');
//for CRM_PROTOCOL_STAGES
jQuery("#list10_d2").jqGrid('setGridParam',{url:"ProtocolJGridServChildStages?action=protStages&q=1&protID="+PROTOCOL_ID,page:1});
jQuery("#list10_d2").jqGrid('setCaption',"CRM_PROT_STAGES: "+ids)
.trigger('reloadGrid');
}
}
else //status = false = row de-selected
{
if(ids)
{
jQuery('#list10').jqGrid('restoreRow',lastsel);
}
}
}
});
Details
:
jQuery("#list10_d2").jqGrid({
height: "100%",
url:'ProtocolJGridServChildStages?q=2&action=protStages',
datatype: "xml",
colNames:['Sr. No.','PROTOCOL_ID', 'STAGE_ID', 'DESCRIPTION'],
colModel:[{name:'srNo',index:'srNo', width:50,sortable:true},
{name:'PROTOCOL_ID',index:'PROTOCOL_ID', width:100,sortable:false,editable:true,hidden:true},
{name:'STAGE_ID',index:'STAGE_ID', width:100,sortable:false,editable:true},
{name:'DESCRIPTION',index:'DESCRIPTION', width:150,sortable:false,editable:true}
],
rowNum:2,
rowList:[2,4,10],
//paging: true,
//loadonce:true,
pager: '#pager10_d2',
sortname: 'PROTOCOL_ID',
//viewrecords: true,
sortorder: "asc",
multiselect: true,
editurl: "ProtocolJGridServChildStages?action=protocolStageEdit",
caption:"CRM_PROT_STAGES",
afterInsertRow: function(ids)
{
var ret = jQuery("#list10_d2").jqGrid('getRowData',ids);
protID = ret.PROTOCOL_ID;
},
onSelectRow: function(ids,status)
{
if(status==true)
{
if(ids)
{
var cm = $('#list10_d2').jqGrid('getColProp',"PROTOCOL_ID"); cm.editable=false; var cm2 = $('#list10_d2').jqGrid('getColProp',"STAGE_ID"); cm2.editable=false;
var ret = jQuery("#list10_d2").jqGrid('getRowData',ids);
protID = ret.PROTOCOL_ID;
stageID = ret.STAGE_ID;
jQuery("#list10_d2").jqGrid('setGridParam',{editurl:'ProtocolJGridServChildStages?action=protocolStageEdit&protID='+protID+'&stageID='+stageID});
jQuery('#list10_d2').jqGrid('restoreRow',lastsel);
jQuery('#list10_d2').jqGrid('editRow',ids,true);
lastsel=ids;
var cm = $('#list10_d2').jqGrid('getColProp',"PROTOCOL_ID"); cm.editable=true; var cm2 = $('#list10_d2').jqGrid('getColProp',"STAGE_ID"); cm2.editable=true;
}
}
else
{
if(ids)
{
jQuery('#list10_d2').jqGrid('restoreRow',lastsel);
}
}
}
});
更新 1: --- サーブレット コード:
int page = Integer.parseInt(request.getParameter("page")); // get the requested page
int limit = Integer.parseInt(request.getParameter("rows")); // get how many rows we want to have into the grid
String sidx = request.getParameter("sidx"); // get index row - i.e. user click to sort
String sord = request.getParameter("sord"); // get the direction
int start = (limit* page) - limit;
String rows = request.getParameter("rows");
String param = request.getParameter("protID");
//get the data
String query = "select * from CRM_PROT_STAGES where PROTOCOL_ID ='"+param+"'";
//String query = "select * from( select * from CRM_PROT_STAGES where PROTOCOL_ID = '"+param +"' order by PROTOCOL_ID desc) where ROWNUM <= "+limit;
//String query = "select * from ( select a.*, ROWNUM rnum from ( select * from CRM_PROT_STAGES where PROTOCOL_ID = '"+param +"' ) a where ROWNUM <= "+ limit +")where rnum >="+start;
data = select.getData(query); //getData() return 2D array of data
columnNames = select.getColumnNames(); //getColumnNames() returns array of column names
int totalCount = data.length;
int totalPages = 0;
if (totalCount > 0)
{
if (totalCount % Integer.parseInt(rows) == 0)
{
totalPages = totalCount / Integer.parseInt(rows);
}
else
{
totalPages = (totalCount / Integer.parseInt(rows)) + 1;
}
}
else
{
totalPages = 0;
}
out.print("<?xml version='1.0' encoding='utf-8'?>\n");
out.print("<rows>");
out.print("<page>" + request.getParameter("page") + "</page>");
out.print("<total>" + totalPages + "</total>");
out.print("<records>" + totalCount + "</records>");
int srNo = 1;
limit = limit+start;
//for(int i=0;i<data.length;i++)
if(totalCount>0)
for(int i=start;i<limit;i++)
{
if(i<data.length)
{
out.print("<row id='" + i + "'>");
out.print("<cell>" + srNo + "</cell>");
for(int a=0;a<columnNames.length;a++)
{
out.print("<cell>"+ data[i][a] +"</cell>");
}
out.print("</row>");
srNo++;
}
}
out.print("</rows>");
data=null;
columnNames=null;
}
何か問題がある場合はお知らせください。