本文的重点是HTMLayout表格和表格数据的组合应用。

程序效果框架如下：

程序效果

一、需求和设计

需求如下：

服务器端有一张数据表，含图片地址信息、IP地址和状态信息。客户端读取数据列表后，用表格展示出来，同时要实现三个功能：

一是浏览图片；

二是读取IP地址后，远程登录IP；

三是修改状态信息。

概要设计：

一、浏览图片。设计一个按钮，按钮里设计一个属性存放图片地址，点击按钮后，按图片地址展示图片。

二、远程登录。设计一个按钮，按钮里设计一个属性存放IP地址，点击按钮后，调用远程登录函数，参数为IP地址。

三、状态编辑。获取主键，采用弹出菜单方式，update状态信息。

关键需求分析：

一、读取服务端数据，按行逐条展示。html使用table、tr、td组件，循环读取数据并填充。

二、程序需要定位和读取当前行数据。

三、程序需要获取按钮点击事件，同时能读取当前行的属性。

二、程序实现

2.1 程序框架和效果

设计一个aardio窗体文件，引入web.layout，该文件用于aardio代码功能实现。如下图：

wbLayout.go(path,{date=day;id=1},true);

aadio调用html文件，可以传递参数。

窗体文件

同时设计一个存放html的aardio文件，该文件设计html布局

html文件

程序运行效果，如下图

程序效果图

2.2 浏览图片功能实现

浏览图片使用HTMLayout的css扩展功能，在html中button组件实现如下图：

按钮组件 CSS扩展功能

程序不用额外代码，img组件读取按钮的图片地址属性即可。

功能实现效果图

2.3 远程调用和效果

远程调用的功能需要使用aardio编程，不能在html文件中实现。在html中可以使用button组件，也可以使用input组件，如下图：

html中button组件

在aardio窗体程序中，需要读取button或者inupt组件，并读到IP地址参数。读到参数后，可以实现远程登录功能。代码如下：

获得组件信息

点击“远程”按钮，获得IP地址。

button点击实现效果

input组件，可以把IP地址显示在按钮上，点击即可。

input组件点击实现效果

2.4 状态编辑和效果

状态编辑使用弹出菜单，可以选择多种状态，获得当前行信息后，可以update状态。html实现如下图：

td组件绑定菜单 弹出菜单 当前行

获取表格的当前行，右键弹出菜单，选择菜单后能读取到当前行

获得当前行信息

当前行显示，右键菜单的效果图如下：

弹出菜单效果图

点击菜单后，可以获取当前的信息，数据读取后，即可进行update功能，如下图

获得当前行的数据

三、总结

利用aardio开发HTMLayout应用，有几大优点：

1、HTMLayout有丰富的应用功能和案例，容易上手。

2、HTMLayout的css功能和css扩展功能，具有类似vue的一些操作方法。

3、aardio的模板语法，可以与html完美结合，实现两个语法体系的混合应用。

4、behavior事件，为使用html元素进行编程开辟了光明大道。