efw 框架输出测试示例
概述
输出测试示例 是 efw 框架中展示数据输出功能的完整示例，演示了如何将 JSON 数据动态填充到各种 HTML 表单元素中。本示例包含前端 JSP 页面和后端 JavaScript 事件处理逻辑。
核心文件
1. JSP 页面 (OutputTest.jsp)
2. JavaScript 事件处理 (OutputTest_display.js)
功能实现
1. 数据源定义
- 下拉选项数据 (
#txtOptions): JSON 数组定义下拉选项 - 表格数据 (
#txtTables): JSON 数组定义表格行数据 - 表单值数据 (
#txtValues): JSON 对象定义各表单元素的值
2. 数据处理流程
- 用户点击”批量显示”按钮触发
Efw('OutputTest_display')事件 - 后端 JavaScript 解析三个文本区域的 JSON 数据
- 使用链式操作填充页面元素：
- 下拉列表：清空现有选项 → 添加新选项
- 表格：保留表头 → 添加数据行
- 其他元素：根据选择器设置值
3. 支持的输入类型
| 类型 | 示例元素 | 数据处理方式 |
|---|---|---|
| 文本输入 | #item1 |
直接设置 value |
| 隐藏字段 | #item2 |
设置 value 但不显示 |
| 特殊输入 | #item5 (电话) |
格式验证 |
| 日期时间 | #item9 |
特定格式处理 |
| 数字范围 | #item16 |
数值转换 |
| 颜色选择 | #item17 |
十六进制值处理 |
| 复选框 | #item18 |
根据值设置 checked 状态 |
| 单选按钮 | [name=item19] |
根据值选择对应选项 |
| 下拉列表 | #item20 |
设置选中项 |
| 多选列表 | #item21 |
设置多个选中项 |
| 文本区域 | #item22 |
设置文本内容 |
| 数据表格 | #item23 |
动态生成行数据 |
技术亮点
1. 声明式数据映射
- 通过
paramsFormat定义前端元素与后端参数的映射关系 - 使用 CSS 选择器精准定位元素
2. 模板驱动渲染
- 下拉选项模板：
<option value='{value}'>{text}</option> - 表格行模板：
<tr><td>{fd1}</td><td>{fd2}</td><td>{fd3}</td></tr>
3. 链式操作 API
new Result()
.runat(selector)
.remove(elements)
.append(template)
.withdata(data)
4. 批量操作支持
- 同时处理多个同类元素（如多个下拉列表）
- 统一处理不同表单元素类型
5. JSON 数据驱动
- 所有数据源使用 JSON 格式
- 前后端通过 JSON 交换数据
使用场景
此示例适用于：
- 动态表单填充
- 数据驱动的用户界面
- 报表数据展示
- 配置管理界面
- 数据编辑表单初始化
通过此示例，开发者可以学习 efw 框架如何高效地将 JSON 数据动态填充到各种 HTML 表单元素中，实现数据与视图的分离。