实现级联列表

本示例可参考示例文件"CaseStudy\WebViewer\调用Foxtable对象.Table"的窗口"级联列表"。

这个级联列表之前我们用Foxtable做过，参考：窗口中的动态列表项目

现在我们基于WebViewer来设计一个同样的：

Afterload事件代码如下，同样是一字未改的AI代码：

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{height:100%;width:100%;background:#fff;}
        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;}
        .button-group{display:flex;gap:10px;justify-content:flex-end;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;}
       
        /* 关闭按钮样式（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="ComboBox1" class="form-control" onchange="loadSpecifications()">
                <option value="">请选择</option>
            </select>
        </div>
        <div class="form-row">
            <label class="form-label">规格：</label>
            <select id="ComboBox2" class="form-control" onchange="loadColors()">
                <option value="">请选择</option>
            </select>
        </div>
        <div class="form-row">
            <label class="form-label">颜色：</label>
            <select id="ComboBox3" class="form-control">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <script>
        const ft = window.chrome.webview.hostObjects.sync.ft;
        // 页面加载完成后初始化型号下拉框（对应窗口的AfterLoad事件）
        window.addEventListener('load', function() {
            loadModels();
        });
        // 加载所有型号（对应步骤1）
        function loadModels() {
            const cmb = document.getElementById('ComboBox1');
            // 调用Foxtable API获取型号的唯一值列表
            const modelList = ft.DataTables["表A"].GetComboListString("型号");
            // 清空原有选项
            cmb.innerHTML = '<option value="">请选择</option>';
            // 填充下拉框
            modelList.split('|').forEach(model => {
                if (model) {
                    const option = document.createElement('option');
                    option.value = model;
                    option.textContent = model;
                    cmb.appendChild(option);
                }
            });
        }
        // 根据选中的型号加载对应的规格（对应步骤2）
        function loadSpecifications() {
            const cmb = document.getElementById('ComboBox2');
            const selectedModel = document.getElementById('ComboBox1').value;
            // 清空原有选项
            cmb.innerHTML = '<option value="">请选择</option>';
            if (selectedModel) {
                // 调用Foxtable API获取对应型号的规格列表
                const specList = ft.DataTables["表A"].GetComboListString("规格", `型号 = '${selectedModel}'`);
                specList.split('|').forEach(spec => {
                    if (spec) {
                        const option = document.createElement('option');
                        option.value = spec;
                        option.textContent = spec;
                        cmb.appendChild(option);
                    }
                });
            }
            // 清空颜色下拉框
            document.getElementById('ComboBox3').innerHTML = '<option value="">请选择</option>';
        }
        // 根据选中的规格加载对应的颜色（对应步骤3）
        function loadColors() {
            const cmb = document.getElementById('ComboBox3');
            const selectedSpec = document.getElementById('ComboBox2').value;
            // 清空原有选项
            cmb.innerHTML = '<option value="">请选择</option>';
            if (selectedSpec) {
                // 调用Foxtable API获取对应规格的颜色列表
                const colorList = ft.DataTables["表A"].GetComboListString("颜色", `规格 = '${selectedSpec}'`);
                colorList.split('|').forEach(color => {
                    if (color) {
                        const option = document.createElement('option');
                        option.value = color;
                        option.textContent = color;
                        cmb.appendChild(option);
                    }
                });
            }
        }
         // 关闭窗口
        function closeForm() {
            ft.Forms["级联列表"].CloseAsync();
        }
    </script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)

本页地址：http://www.foxtable.com/webhelp/topics/6344.htm