纯HTML窗口
本示例可参考示例文件"CaseStudy\WebViewer\调用Foxtable对象.Table"的窗口"纯HTML窗口"。
这个筛选窗口之前我们用Foxtable做过，参考：设计查询窗口
现在我们基于WebViewer来设计一个同样的:
首先我们要去掉窗口边框代码为：
e.Form.BaseForm.FormBorderStyle =
System.Windows.Forms.FormBorderStyle.None
'去掉窗口边框
剩下的就可以交给AI了吗，这是该窗口的AfterLoad事件代码，都是AI生成的：
'''Async
e.Form.BaseForm.FormBorderStyle =
System.Windows.Forms.FormBorderStyle.None
'去掉窗口边框
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库
wv.CoreWebView2.AddHostObjectToScript("ft",
ft) '注入Foxtable库
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>订单筛选窗口</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:微软雅黑;}
/*
关键修改：让html和body充满整个窗口
*/
html, body{height:100%;width:100%;background:#fff;}
/* 移除body的多余内边距，让容器直接贴边
*/
body{padding:0;}
/*
关键修改：容器充满整个窗口，仅保留内边距
*/
.filter-container{width:100%;height:100%;background:#fff;padding:20px;
position: relative;
}
.filter-title{font-size:16px;font-weight:bold;margin-bottom:20px;color:#333;border-bottom:1px
solid #eee;padding-bottom:10px;}
.form-row{display:flex;align-items:center;margin-bottom:15px;}
.form-label{width:80px;text-align:right;margin-right:10px;color:#666;font-size:14px;}
.form-control{flex:1;padding:8px;border:1px solid
#ddd;border-radius:4px;font-size:14px;}
.radio-group{display:flex;gap:15px;margin-left:90px;}
.radio-item{display:flex;align-items:center;gap:3px;color:#666;font-size:14px;}
.button-group{display:flex;gap:10px;justify-content:center;margin-top:30px;}
button{padding:8px
16px;border:none;border-radius:4px;background:#0078d7;color:#fff;cursor:pointer;font-size:14px;}
button:hover{background:#005a9e;}
.start-filter-btn{background:#28a745;}
.start-filter-btn:hover{background:#218838;}
.cancel-filter-btn{background:#dc3545;}
.cancel-filter-btn:hover{background:#c82333;}
/*
关闭按钮样式（X型）
*/
.close-btn{position: absolute;top: 15px;right: 15px;width: 24px;height:
24px;
border: none;background: transparent;cursor: pointer;padding: 0;
display: flex;align-items: center;justify-content: center;
}
.close-btn::before, .close-btn::after{content: '';position:
absolute;width: 2px;height: 18px;
background-color: #999;transition: background-color 0.2s;
}
.close-btn::before{transform: rotate(45deg);}
.close-btn::after{transform: rotate(-45deg);}
.close-btn:hover::before, .close-btn:hover::after{background-color:
#dc3545;}
</style>
</head>
<body>
<div class="filter-container">
<button class="close-btn" onclick="closeForm()" title="关闭窗口"></button>
<div class="filter-title">筛选</div>
<div class="form-row">
<label class="form-label">产品：</label>
<select id="cmbProduct" class="form-control">
<option value="">请选择</option>
<option value="PD01">PD01</option>
<option value="PD02">PD02</option>
<option value="PD03">PD03</option>
<option value="PD04">PD04</option>
<option value="PD05">PD05</option>
</select>
</div>
<div class="form-row">
<label class="form-label">客户：</label>
<select id="cmbCustomer" class="form-control">
<option value="">请选择</option>
<option value="CS01">CS01</option>
<option value="CS02">CS02</option>
<option value="CS03">CS03</option>
<option value="CS04">CS04</option>
<option value="CS05">CS05</option>
</select>
</div>
<div class="form-row">
<label class="form-label">雇员：</label>
<select id="cmbEmployee" class="form-control">
<option value="">请选择</option>
<option value="EP01">EP01</option>
<option value="EP02">EP02</option>
<option value="EP03">EP03</option>
<option value="EP04">EP04</option>
<option value="EP05">EP05</option>
</select>
</div>
<div class="form-row">
<label class="form-label">起始日期：</label>
<input type="date" id="StartDate" class="form-control">
</div>
<div class="form-row">
<label class="form-label">结束日期：</label>
<input type="date" id="EndDate" class="form-control">
</div>
<div class="form-row">
<label class="form-label">付款状态：</label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="rdoAll" name="paymentStatus"
checked>
<label for="rdoAll">全部</label>
</div>
<div class="radio-item">
<input type="radio" id="rdoYifu" name="paymentStatus">
<label for="rdoYifu">已付</label>
</div>
<div class="radio-item">
<input type="radio" id="rdoWeifu" name="paymentStatus">
<label for="rdoWeifu">未付</label>
</div>
</div>
</div>
<div class="button-group">
<button class="start-filter-btn" onclick="startFilter()">开始筛选</button>
<button class="cancel-filter-btn" onclick="cancelFilter()">撤销筛选</button>
<button onclick="clearConditions()">清除条件</button>
</div>
</div>
<script>
const ft =
window.chrome.webview.hostObjects.sync.ft;
function closeForm() {
ft.Forms["纯HTML窗口"].CloseAsync();
}
function clearConditions() {
document.getElementById("cmbProduct").value = "";
document.getElementById("cmbCustomer").value = "";
document.getElementById("cmbEmployee").value = "";
document.getElementById("StartDate").value = "";
document.getElementById("EndDate").value = "";
document.getElementById("rdoAll").checked = true;
}
function cancelFilter() {
ft.Tables["订单"].ApplyFilter
= false;
}
function startFilter() {
let filter = "";
const cmbProduct = document.getElementById("cmbProduct");
const cmbCustomer = document.getElementById("cmbCustomer");
const cmbEmployee = document.getElementById("cmbEmployee");
const StartDate = document.getElementById("StartDate");
const EndDate = document.getElementById("EndDate");
const rdoYifu = document.getElementById("rdoYifu");
const rdoWeifu = document.getElementById("rdoWeifu");
if (cmbProduct.value) {
filter = `产品
= '${cmbProduct.value}'`;
}
if (cmbCustomer.value) {
filter = filter ? `${filter} And ` : "";
filter += `客户
= '${cmbCustomer.value}'`;
}
if (cmbEmployee.value) {
filter = filter ? `${filter} And ` : "";
filter += `雇员
= '${cmbEmployee.value}'`;
}
if (StartDate.value) {
filter = filter ? `${filter} And ` : "";
filter += `日期
>= #${StartDate.value}#`;
}
if (EndDate.value) {
filter = filter ? `${filter} And ` : "";
filter += `日期
<= #${EndDate.value}#`;
}
if (rdoYifu.checked) {
filter = filter ? `${filter} And ` : "";
filter += "已付款
= True";
} else if (rdoWeifu.checked) {
filter = filter ? `${filter} And ` : "";
filter += "已付款
= False Or 已付款
Is Null";
}
if (filter) {
ft.Tables["订单"].Filter
= filter;
}
}
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)