值得一试的表格（DataTables)，图表（Chart.js）组件

<!--[if IE]><script src='http://lib./datatables/1.10.21/js/jquery.dataTables.min.js'></script> <link rel='stylesheet' href='http://lib./datatables/1.10.21/css/jquery.dataTables.min.css'/><![endif]-->
<!--[if !IE]><!--><script src='http://cdn./1.11.3/js/jquery.dataTables.min.js'></script> <link rel='stylesheet' href='http://cdn./1.11.3/css/jquery.dataTables.min.css'/> <!--<![endif]-->

这里为了方便演示，用的是公共 CDN 服务器提供的 JS，对于桌面软件，应当提前下载到本地再加载会更快。

WinXP / IE6 已经基本被淘汰，市场份额已经可以被忽略，Win7 上 IE 最低版本为 IE8 - 实际上 Win7 的市场份额也在快速萎缩，而 Win10，Win11 自带的是 IE11 控件（ 虽然 IE11浏览器被 Edge 替代，但 IE11 控件仍然属于 Win10,Win11 系统组件  ）。

首先我们拖一个 static 控件到界面上 —— 用来显示网页：

然后切换到代码视图，添加以下代码：

import web.form; var wb = web.form(winform.static);

上面代码在 winform.static 控件窗口内创建浏览器对象 wb。

添加下面的 aardio 代码导出网页可以调用的 aardio 函数 external.getData()

import web.json;wb.external = { getData = function(){ var data = { { 'id': '001', 'name': '张三', 'birthday': '2015-12-31' }, { 'id': '002', 'name': '李四', 'birthday': '2001-11-31' }, { 'id': '003', 'name': '王五', 'birthday': '2011-12-31' } } return web.json.stringifyArray(data); };}

这里我们要将返回的数据转换为 JSON，在 JavaScript 里再转换回来：

网页 JavaScript 里这样写：

<script>  $(document).ready(function() {       window.datatable = $('#example').DataTable({         data: eval(external.getData()),         columns: [            { data: 'id'},            { data: 'name'},            { data: 'birthday'}          ]      });  });    reloadData = function(json){    window.datatable.clear();    window.datatable.rows.add(eval(json)).draw();  } </script>

如果要考虑兼容旧版 IE，JavaScript 也可以用 eval(json) 解析 JSON。

上面还定义了一个 reloadData 函数。在 aardio 代码里可以这样调用网页中的 JavaScript 函数：

winform.button.oncommand = function(id,event){ wb.script.reloadData(web.json.stringifyArray({ { 'id':'110', 'name':'余得水', 'birthday':'2000-11-23' }, { 'id':'111', 'name':'曹得旺', 'birthday':'2001-11-23' }, }));}

DataTables 非常强大，还可以自定义界面语言，实现很多高级功能（例如单击编辑，自定义数据呈现样式等 ）。完整范例请参考 aardio 自带范例：

上图第 2 个箭头指向的是 Chart.js 示例，Chart.js 与 aardio 交互的方法和上面介绍的 DataTables  差不多，这里就不再细讲。Chart.js  其实也可以兼容 IE9 / IE8 ，但比较啰嗦也没有意义，建议直接调用 IE11 组件，这样写就可以了：

import web.form; var wb = web.form.ie11(winform.static);

web.form.ie11 与 web.form 的作用一样，但是会检测系统的 IE是否低于 IE11，如果低于 IE11 就自动安装 IE11 —— 简单、粗暴、省事。