App Inventor 那档事

常见问题 | 源码市场 | 教程案例 | 扩展插件 | 常用链接 | 联系方式


使用网页浏览器显示表格

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

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

网页浏览器与html如何交互

在网页浏览器组件中,我们可以通过设置网页浏览框.页面交换字符串为块和执行javascript块来向html文件发送数据。

在html文件中使用javascript来设置页面交换字符串window.AppInventor.setWebViewString("str"), 或者设置页面标题document.title = "str"。这样就可以通过页面浏览器.页面交换字符串块或者当前页标题来获取返回的值。

在wxbit中内置了执行javascipt块,

2019-05-20_135826

对于其他服务器没有这个内置块,可以自定义过程如下:

2019-05-20_125200

准备html文件

新建一个html文件,在body中插入以下代码

<head></head>之间插入以下css片段,可以让表格显示的更加美观:

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

显示表格

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

假设我们要用表格显示的数据如下:

姓名性别年龄
张三23
李四34
王五45

我们就可以这样调用JS:

2019-05-22_104502

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

2019-05-22_104913

现在,就可以在手机伴侣中点击按钮,就看到如下效果:

2019-05-21_130414

返回选中结果

怎么才能让AppInventor获取我们点中的某行某列呢? 只要在html中添加以下js代码:

将showTable函数的第三行改为:

记得要把html文件重新上传到素材

在ai中添加一个计时器,计时间隔设为100 然后,配合计时器就可以获取到选中的行和列了

2019-05-20_143417

点击表格,会返回行号、列号和单元格的值。

2019-05-21_130450

这个返回值是个json格式,可以配合Http客户端.解码JSON文本和列表的在键值列表...中查找来取得行号、列号等。

 

相关下载:

右键另存为table.html

(完)


评论