Rico- liveGrid 从xml中动态取得数据

本文介绍了一个使用JavaScript实现的动态表格更新案例,通过增加数据和刷新数据的方法,展示了如何操作DOM来实时更新表格内容。该方法适用于需要频繁更新展示数据的应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值