注入指定表
上一节我们介绍了导入Foxtable库,代码为:
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库,参数为即将注入此库的WebViewer控件
wv.CoreWebView2.AddHostObjectToScript("ft",
ft) '将Foxtable库注入到WebViewer脚本环境
以上代码不仅向前端js开放了Foxtable的全部功能,
还会注入所有数据表,包括未来即将加载的表。
如果你想关闭FoxLib的数据访问能力,可以将其AccessData属性设置为False。
AccessData一旦设置为False,js将无法通过FoxLib访问指定名称的DataTable和Table,全局变量MainTable和CurrentTable也会返回Nothing。
关闭FoxLib的数据访问能力后,如果希望在js中访问特定的表,可以单独
注入,例如注入订单表:
wv.CoreWebView2.AddHostObjectToScript("Orders",
Tables("订单"))
'注入Tables("订单")
wv.CoreWebView2.AddHostObjectToScript("dataOrders",
DataTables("订单"))
'注入DataTables("订单")
在前端js中,可以通过下面的代码引用单独注入的表,例如:
const Orders =
window.chrome.webview.hostObjects.sync.Orders; //
引用Tables("订单")
const dataOrders =
window.chrome.webview.hostObjects.sync.dataOrders; //
引用DataTables("订单")
提示:
1、如果你只想访问某个数据表,并不需要使用Foxtable的其他功能,那么可以不注入FoxLib库
2、需要DataTable就注入DataTable,需要Table就注入Table,系统并不要求二者都要注入。
示例
本示例可参考示例文件"CaseStudy\WebViewer\调用Foxtable对象.Table"的窗口"注入指定表"。
本示例的网页有三个按钮,分别用于锁定数量列,给客户列设置列表项目,将订单表设置为主表。
窗口的AfterOpenProject事件代码:
'''Async
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
'初始化浏览器
Dim
ft
As
New
FoxLib(wv)
'创建FoxLib库
ft.AccessData =
False
'关闭FoxLib的访问数据能力
wv.CoreWebView2.AddHostObjectToScript("ft",
ft) '注入FoxLib库
wv.CoreWebView2.AddHostObjectToScript("Orders",
Tables("订单"))
'注入Tables("订单")
wv.CoreWebView2.AddHostObjectToScript("dataOrders",
DataTables("订单"))
'注入DataTables("订单")
'定义测试页面
Dim
html
As
String
=<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注入指定表</title>
<style>
*{font-size:16px; margin:5px;}
button{padding:12px 40px; font-size:18px; margin:30px 5px;
cursor:pointer;background:#5cb85c;color:#fff;border:none;border-radius:6px;}
</style>
</head>
<body>
<h3>选择性导入</h3>
<button onclick="lockDataCol()">锁定数量列</button>
<button onclick="setComboList()">设置列表项目</button>
<button onclick="setMainTable()">设置主表</button>
<script>
const ft =
window.chrome.webview.hostObjects.ft;
//
引用FoxLib库
const Orders =
window.chrome.webview.hostObjects.sync.Orders;
//
引用Tables("订单")
const dataOrders =
window.chrome.webview.hostObjects.sync.dataOrders;
//
引用DataTables("订单")
function lockDataCol() {
const dc = dataOrders.DataCols["数量"];
dc.AllowEdit = false;
}
function setComboList() {
const tc = Orders.Cols["客户"];
tc.ComboList = "CS01|CS02|CS03|CS04|CS05";
}
function setMainTable() {
ft.MainTable = Orders;
}
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)
'加载页面