<HTML>
<HEAD>
<TITLE>grid</TITLE>
<script src="src/prototype.js" type="text/javascript"></script>
<script src="src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
//-----------------------------------------------------------------
//init data - begin
var xmlDoc, rows, text;
var eleNum=0;
function increaseData( )
{
//tr
var tr=xmlDoc.createElement("tr");
//td1
var td1=xmlDoc.createElement("td");
tr.appendChild(td1);
var newtext=xmlDoc.createTextNode( "data" + eleNum + "1" );
td1.appendChild(newtext);
//td2
var td2=xmlDoc.createElement("td");
tr.appendChild(td2);
var newtext=xmlDoc.createTextNode( "data" + eleNum + "2" );
td2.appendChild(newtext);
xmlDoc.documentElement.appendChild(tr);
eleNum ++;
}
//-----------------------------------------------------------------
//construct data: method 1:
/*
eleNum=10;
txt = "<?xml version='1.0'?>"
+ "<rows>"
+ "<tr><td>W1</td><td>10248th</td></tr>"
+ "<tr><td>T2</td><td>10249th</td></tr>"
+ "<tr><td>H3</td><td>10250th</td></tr>"
+ "<tr><td>V4</td><td>10251th</td></tr>"
+ "<tr><td>S5</td><td>10252th</td></tr>"
+ "<tr><td>V6</td><td>10251th</td></tr>"
+ "<tr><td>S7</td><td>10252th</td></tr>"
+ "<tr><td>V8</td><td>10251th</td></tr>"
+ "<tr><td>S9</td><td>10252th</td></tr>"
+ "</rows>";
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);
rows = xmlDoc.getElementsByTagName("rows")[0];
*/
//-----------------------------------------
//construct data: method 2:
///*
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
var newPI=xmlDoc.createProcessingInstruction("xml","version='1.0' encoding='UTF-8'");
xmlDoc.appendChild(newPI);
//root Element
rows=xmlDoc.createElement("rows");
xmlDoc.appendChild(rows);
//*/
//init data - end
//-----------------------------------------------------------------
</script>
<script type="text/javascript">
Rico.loadModule('LiveGridAjax');
Rico.include('greenHdg.css');
var grid;
Rico.onLoad( function() {
var opts = { prefetchBuffer: true,
visibleRows : 6 };
var rbb = new Rico.Buffer.Base( rows );
grid=new Rico.LiveGrid ('gridTable', rbb, opts);
});
</script>
<script type="text/javascript">
function refreshData(){
grid.clearRows();
grid.buffer.clear();
grid.cancelMenu();
grid.ClearSelection();
grid.setImages();
grid.buffer.loadRowsFromTable(rows);
grid.buffer.fetch( grid.topOfLastPage() );
grid.scrollToRow( grid.topOfLastPage() );
}
</script>
</HEAD>
<body>
<button onclick="javascript:refreshData();">refresh data</button>
<button onclick="javascript:increaseData();">increase data</button>
<div id="gridDiv">
<table id="gridTable">
<colgroup>
<col style='width: 200px;'>
<col style='width: 200px;'>
</colgroup>
<tbody>
<tr>
<th>a</th>
<th>b</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
07-22