畫出分頁的頁面
自己剛剛到公司實習,公司的框架要求 ,在前輩后面進行學習一點心得 ,希望高手指點
步驟:
1. 準備json-rpc的JSONRPCBridge對象
<jsp:useBean id="JSONRPCBridge" scope="session"
class="com.metaparadigm.jsonrpc.JSONRPCBridge" />
2.準備好自己后臺的javabean類,可以在js中調用javabean中的方法來操作數據庫
3.如果需要call json-rpc,注冊你的javabean 到jsonbridge
JSONRPCBridge.registerObject("bean",businessBean);
JSONRPCBridge.setDebug(true);
4. 加入一些全局的jsp頁面,導入類以及校驗的js
5.寫入靜態文字,和一些錯誤提示信息。具體的在content.properties 與error.properties 中進行寫入。
6.分為兩種頁面:
6.1 分頁的查詢列表頁面:
(1)定義一個空的列表和空的列表頭:
var mainlist={
h:[ {a:'width=\"40\"},',v:'<%=MsgMgr.getContent(language,"CMAP3300.NO")%>'}
,'<%=MsgMgr.getContent(language,"CCPM1900.REFERENCE_NO")%>'
],
rs:{
a:'align=center',
v:null或者[]
}
};
(2)定義一個列表對象
Var listTableObj=new js.ListTable(windows,’mainlist’,mainlist);
(3)定義一個動態畫頁面的listpage
Var listpage=new js.ListPageBox(window,’mainlist’,
function search(pageNo) {
3.1 //顯示“正在載入”
F('shsm','<%=MsgMgr.getContentQuote(language,"message.loading")%> <img src="<%=request.getContextPath()%>/newUI/images/process_animation.gif">');
3.2//調用javabean方法從數據庫中進行查找記錄
jsonrpc.bean.listTrxCde(doneSeach,"<%=language%>",null,pageNo);
return null;
},
3.3注意:其中doneSeach 是回調方法 ,將查找出來的記錄動態的畫在頁面上。
function drawFun(ListPageForm){
var pageNum=listPageForm.page.currPageNo;
var list=listPageForm.page.DBlist.list;
var recordNo=(pageNum-1)*listPageForm.page.recordPerPage+1;
var row1;
mainlist.rs.v=[];
for(var i=0;i<list.length;i++){
row1=list[i].db;
mainlist.rs.v.push(
[
{a:'id="buttonTD'+i+'" ',v:'<input type=radio name="redioValue" value="'+row1.BK_BANK_ID+'">'
+'<img style="cursor:pointer" onclick=\"javascript:toUpdate('+i+')\" '
+'src="<%=request.getContextPath()%>/newUI/images/editicon.gif">'
},
recordNo+i,
{a:'id="inputTD1_'+i+'" ',v:row1.BK_BANK_ID},
{a:'id="inputTD2_'+i+'" ',v:row1.BK_SHORT_NAME},
{a:'id="inputTD2_'+i+'" ',v:type[row1.BK_BANK_TYPE]},
{a:'id="inputTD5_'+i+'" ',v:row1.BK_STATUS},
{a:'id="inputTD6_'+i+'" ',v:row1.BK_OUTSTD_BAL}
]
);
}
listTableObj.setJson(mainlist);
return listTableObj.html();
}
, <%=language%>
);
function doneSeach(result,e)
{
F("hdsm");
if(e!=null){
F("catchException",e);
return;
}
listPage.drawUpdate(result);
}
}
(4)畫頁面
document.write('<div id="tableLayerDIV">');
w(listPage.html(<%=CodeUtil.marshallJSON(trxCdeMgr.listTrxCde //展現列表 (language,null,pageNo,"trxcdemain"))%>));
document.write('</div>');