<!--[if IE]>
<script src='http://lib.baomitu.com/datatables/1.10.21/js/jquery.dataTables.min.js'></script>
<link rel='stylesheet' href='http://lib.baomitu.com/datatables/1.10.21/css/jquery.dataTables.min.css'/>
<![endif]-->
<!--[if !IE]><!-->
<script src='http://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js'></script>
<link rel='stylesheet' href='http://cdn.datatables.net/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 自带范例:
import web.form;
var wb = web.form.ie11(winform.static);
web.form.ie11 与 web.form 的作用一样,但是会检测系统的 IE是否低于 IE11,如果低于 IE11 就自动安装 IE11 —— 简单、粗暴、省事。
联系客服