?? index.jsp
字號:
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>大量數(shù)據(jù)動態(tài)瀏覽查詢</title>
<style>
/* 固定表格樣式 */
.fixedTable {
table-layout:fixed;
}
/* 單元格樣式 */
td.cell {
padding:2px 0px 2px 3px;
margin:0px;
border-bottom:1px solid #B8B8B8;
border-right:1px solid #B8B8B8;
height:22px;
overflow:hidden;
font-size:12px;
font-family:Arial;
line-height:12px;
}
/* 列頭樣式 */
.first {
border-left:1px solid #B8B8B8;
}
/* 表頭樣式 */
.tableCellHeader {
padding:2px 0px 2px 3px;
text-align:left;
font-size:12px;
border-top:1px solid #B8B8B8;
border-right:1px solid #B8B8B8;
background-color:#003366;
color:#FFF;
font-family:Arail;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript">
function init() {
//設(shè)置預取參數(shù)為true，數(shù)據(jù)滾動響應函數(shù)為updateTip
var opts = {
prefetchBuffer:true,
onscroll:updateTip
}
//新建Rico.LiveGrid對象
new Rico.LiveGrid("data_grid", 10, 100, "live_grid.jsp", opts);
}
//更新提示信息
function updateTip( liveGrid, offset ) {
$('tip').innerHTML = "瀏覽產(chǎn)品 " + (offset+1) + " - " +
(offset+liveGrid.metaData.getPageSize()) +
" of " + liveGrid.metaData.getTotalRows();
}
</script>
</head>
<body onload="init()">
<h1>大量數(shù)據(jù)動態(tài)瀏覽查詢</h1>
<div id="tip" style="font-size:12px">瀏覽產(chǎn)品</div>
<div id="container">
<!-- 數(shù)據(jù)表頭 -->
<table id="data_grid_header" class="fixedTable" cellspacing="0" cellpadding="0" style="width:400px">
<tr>
<th class="first tableCellHeader" style="width:40px;text-align:center">NO.</th>
<th class="tableCellHeader" style="width:280px">名稱</th>
<th class="tableCellHeader" style="width:80px">價格</th>
</tr>
</table>
<!-- 數(shù)據(jù)容器 -->
<div id="data_grid_container" style="width:430px">
<div id="viewPort" style="float:left">
<table id="data_grid"
class="fixedTable"
cellspacing="0"
cellpadding="0"
style="width:400px; border-left:1px solid #ababab" >
<!-- 循環(huán)顯示20行供存放數(shù)據(jù) -->
<% for (int i=0; i<20; i++) { %>
<tr>
<td class="cell" style="width:40px;text-align:center"></td>
<td class="cell" style="width:280px"></td>
<td class="cell" style="width:80px"></td>
</tr>
<% } %>
</table>
</div>
</div>
</div>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -