DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

明确分离 与 是实现表头固定、内容滚动及动态排序的基础，需手动写出而非依赖浏览器自动补全，确保 JavaScript 能精准操作 DOM 并保持语义化和可访问性。

通过将表格的 与 明确分离，可以实现表头固定、内容区域独立滚动，并为动态排序提供清晰的 DOM 结构基础。关键不在于标签本身有“滚动”或“排序”能力，而在于这种结构让 JavaScript 更容易精准操作数据与视图。

确保语义化结构：thead 和 tbody 必须显式存在

HTML5 允许省略 和 ，浏览器会自动补全，但动态控制时必须手动写出——否则 JS 无法可靠定位和替换内容区域。

• ✅ 正确写法：
  
    
    
  

  姓名	年龄
  张三	28

• ❌ 避免仅用

  ...

  ...

  —— 浏览器虽渲染正常，但 JS 查询 document.querySelector('tbody') 会失败或返回 null。

实现固定表头 + 滚动 tbody：CSS 控制高度与溢出

给 容器设置固定高度和垂直滚动，同时确保 不随内容滚动。

• 给 设置 display: block 或直接对 包一层
  （更推荐）；
  外层 div 设置：
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  保证
  与 列宽一致（可用 table-layout: fixed + 给 的 ， 保持不变。
  • 为每个
  内容即可；
  滚动条位置重置：每次重绘
  后，外层滚动容器的 scrollTop = 0，如需保持位置需手动记录并恢复；
  无障碍支持：为可排序列添加 aria-sort="ascending" 等属性，并在切换时更新，方便读屏软件识别；
  大数据量优化：若行数超千级，考虑虚拟滚动（只渲染可视区域行），此时仍依赖
  / 分离来固定表头。

  /	设 width），避免滚动时错位。 绑定点击事件实现列排序：只重绘 tbody，不动 thead 排序逻辑处理数据数组，然后清空并重新生成
  添加 data-sort-key="name" 属性，标识对应字段； 点击时读取当前 key 和上次排序方向（升/降），用 Array.prototype.sort() 对原始数据排序； 用 tbody.innerHTML = sortedData.map(...).join('') 或 documentFragment 批量插入新行 —— 避免逐行 appendChild 影响性能； 可选：在当前排序列的	上添加 class（如 sorted-asc）显示箭头图标。 注意事项与常见问题 不要用 innerHTML 替换整个 table：会丢失事件监听、表单状态、已聚焦元素等；只更新

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！