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>
内容概要:本文以电商仓储物流机器人为案例,深度解析机器人开发全流程,涵盖ROS系统搭建、SLAM建图、路径规划、机械臂控制、多机调度等核心技术。首先介绍了分层模块化架构和核心硬件选型,如主控制器、激光雷达、深度相机、驱动底盘和协作机械臂。接着详细讲述了ROS系统开发的核心实战,包括环境感知与SLAM建图、自主导航与动态避障等技术,提供了代码示例和技术关键点。然后探讨了机械臂抓取任务开发,涉及视觉定位系统、运动规划与力控制。随后介绍了多机器人集群调度系统的任务分配模型和通信架构设计。还讨论了安全与可靠性保障措施,包括硬件级安全设计和软件容错机制。最后总结了实战问题与解决方案,以及性能优化成果,并推荐了四大核心代码库和仿真训练平台。 适合人群:对机器人开发感兴趣的研发人员,尤其是有一定编程基础并希望深入了解仓储机器人开发的技术人员。 使用场景及目标:①学习仓储机器人从系统集成到底层硬件部署的全流程;②掌握ROS系统开发的核心技术,如SLAM建图、路径规划、机械臂控制等;③理解多机器人集群调度和安全可靠性设计;④解决实际开发中的常见问题并优化系统性能。 阅读建议:本文内容详实,涵盖了从硬件选型到软件开发的各个方面,建议读者结合实际项目需求,逐步深入学习,并通过实践操作加深理解。同时,利用提供的开源项目和仿真训练平台进行实验和验证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值