使用网页浏览器显示表格

网页浏览器(Webviewer)除了可以显示现成的网页之外,我们还可以用来显示表格。

本文需要简单的html+javascript+css知识。

实现的效果如下

Screenshot_20210609_200736

准备html文件

新建一个html文件,内容如下。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<style type="text/css">
			table { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333;
			border-width: 1px; border-color: #666666; border-collapse: collapse; width:100%;
			} th { border-width: 1px; padding: 8px; border-style: solid; border-color:
			#666666; } td { border-width: 1px; padding: 8px; border-style: solid; border-color:
			#666666; text-align:center; font-size:20px} tr:nth-child(even){ background:lightgreen;
			}
		</style>
				<script type="text/javascript">
			function showTable(jsonData) {

				var data = JSON.parse(jsonData);
				var head = data[0];

				var str = "<table onclick='tabClick();'>";


				for (var i = 0; i < data.length; i++) {
					str += "<tr>";
					for (var j = 0; j < data[i].length; j++) {
						str += "<td>" + data[i][j] + "</td>";
					}
					str += "</tr>";
				}
				str += "</table>";

				document.body.innerHTML = "";
				var table = document.createElement("div");
				table.innerHTML = str;
				document.body.appendChild(table);
			}
			function tabClick() {
				var td = event.srcElement;
				var str = '{"row":"' + (td.parentElement.rowIndex + 1) + '","col":"' + (td.cellIndex + 1) + '","value":"' + td.innerHTML + '"}';
				window.AppInventor.setWebViewString(str);
			} 
		</script>
	</head>
	<body>

	</body>
 </html>

点我下载文件

将html文件另存为table.html文件,并上传到项目的素材中。

如果你懂CSS,可以修改下面的css部分,比如背景色、字体大小等。

显示表格

在Screen1中添加一个按钮和一个网页浏览器。 首先,让网页浏览器打开素材中的table.html

2019-05-20_140918

准备数据,并显示:

2021-06-09_201732

这里有个关键点: 组件设计界面,Screen1的右侧的项目属性最下面,有个是否将列表转为JSON,这个必须选中。 新版wxbit已经默认选中。

2019-05-22_104913

现在,就可以在调试助手中点击按钮,就看到如下效果:

Screenshot_20210609_201808

返回选中结果

点击表格内容,可以返回选中的行、列、文本,可以使用页面交换字符串改变事件来接收数据。

这是因为在javascript中通过window.AppInventor.setWebViewString("str")设置页面交换字符串,这样就可以通过页面交换字符串改变事件来获取返回的值。

这里我们将返回子串写成了一个json字符串格式,可以通过JSON转字典和字典来分析返回结果。

2021-06-09_202642

效果如下:

Screenshot_20210609_202755

如果列很多,可以左右滚动吗?

网页浏览器放在一个水平滚动布局里面,水平滚动布局宽度充满屏幕,并给他设置一个高度(不能是自动)。然后在屏幕初始化中,把网页浏览器的宽度设为一个比屏幕宽度大的数值:

2021-06-09_203356

2021-06-09_203310


鲁ICP备18053419号-1