103 lines
4.7 KiB
JSON
103 lines
4.7 KiB
JSON
{
|
|
"slug": "treetable",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生树形表格：展开集合与选中集合两个 Set，父子勾选联动靠 descendantKeys 传播。",
|
|
"usage": [
|
|
"行由 flatten 按 expanded 集合展开成一维数组后逐行拼字符串，缩进写成 padding-left: depth * 16px，不是嵌套表格。",
|
|
"展开箭头是 .tt-arrow 叠 is-open，用行内 onclick=\"toggle(key)\" 触发；无子节点的行留一个 .tt-arrow-placeholder 占位对齐。",
|
|
"父级数值不是自己的字段而是子节点合计：leafSum() 递归求和，命中时另加一个 .tt-summary 标记「(汇总)」。",
|
|
"勾选联动走递归：check() 先按 descendantKeys 收集全部后代一起增删，再由 propagate() 自底向上把父级补进或移出选中集合。",
|
|
"行本身带 role=\"row\"、tabindex=\"0\"、aria-selected 与行内 onkeydown 处理 Enter / Space，选中态另加 is-selected 类。",
|
|
"表尾合计由 treeData.reduce 求和后写进 #sumCount 与 #sumBudget 两个单元格。"
|
|
],
|
|
"bestPractices": [
|
|
"expand 与 selected 都是 Set，重渲染时全表重建，行数大时性能会明显下降。",
|
|
"缩进 16px 与列宽 48px 写死在模板与行内样式里，调整层级视觉要改这两处。",
|
|
"表头全选框 #ttAll 在 HTML 里给了节点，脚本里没有为它绑定分支，接入时需要自己接。",
|
|
"树数据是两层硬编码，超过两层的 children 也能递归处理，但示例未验证三层缩进与汇总。"
|
|
],
|
|
"a11y": [
|
|
"表格容器带 role=\"table\"、行带 role=\"row\"，行内还有 tabindex 与键盘处理（Enter / Space），方向正确。",
|
|
"没有 role=\"treegrid\" 或 aria-level / aria-expanded，层级与展开状态读屏拿不到。",
|
|
"行内 onclick 与 onkeydown 混用字符串拼接，选择框的 click 还带 event.stopPropagation()，事件责任分散。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端是类名加集合状态：.kole-tt 容器（role=\"table\"）内是原生 table，行由 flatten 生成并叠 is-selected，箭头 .tt-arrow 叠 is-open、占位 .tt-arrow-placeholder、勾选框 .tt-check、汇总标记 .tt-summary，展开与选中各存一个 Set。",
|
|
"table": [
|
|
{
|
|
"name": "align-right",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:21）。"
|
|
},
|
|
{
|
|
"name": "col-selection",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:40）。"
|
|
},
|
|
{
|
|
"name": "demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:10）。"
|
|
},
|
|
{
|
|
"name": "kole-tt",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:14）。"
|
|
},
|
|
{
|
|
"name": "sub",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:12）。"
|
|
},
|
|
{
|
|
"name": "tree-cell",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:22）。"
|
|
},
|
|
{
|
|
"name": "tt-arrow",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:23）。"
|
|
},
|
|
{
|
|
"name": "tt-arrow-placeholder",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:25）。"
|
|
},
|
|
{
|
|
"name": "tt-check",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:26）。"
|
|
},
|
|
{
|
|
"name": "tt-summary",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TreeTable.html:27）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/TreeTable.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/TreeTable.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"treetable-ex-1"
|
|
],
|
|
"notes": [
|
|
"容器与表头结构见（frameworks/TreeTable.html:36-48），全选框 #ttAll 见（frameworks/TreeTable.html:40）。",
|
|
"展开行模板与 is-open / is-selected / 缩进见（frameworks/TreeTable.html:88）与（frameworks/TreeTable.html:94-98）。",
|
|
"leafSum 汇总见（frameworks/TreeTable.html:68-71），父子联动见（frameworks/TreeTable.html:106-113），自底向上传播见（frameworks/TreeTable.html:118-122）。",
|
|
"表尾合计写入见（frameworks/TreeTable.html:101-102）。"
|
|
]
|
|
}
|