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>