84 lines
3.5 KiB
JSON
84 lines
3.5 KiB
JSON
{
|
|
"slug": "mergedcelltable",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生合并单元格表格：先按相邻同值算 rowspan，只在首行输出合并格。",
|
|
"usage": [
|
|
"合并范围是数据里连续相同的字段值，脚本用 while 循环扫一遍 data 算出 spans[dept] = 连续行数。",
|
|
"输出时只有每组第一行带合并格：index 为 0 或当前行与上一行 dept 不同才写 <td class=\"kole-merged\" rowspan=\"N\">。",
|
|
"只有 .kole-mergetable 每组首行输出 .kole-merged 格，后续行跳过该格并由 rowspan 占位，列数不会错位。",
|
|
"整表一次性写入 #mergetable tbody，没有事件绑定，也不支持点击展开。"
|
|
],
|
|
"bestPractices": [
|
|
"合并算法只认「相邻且相同」，数据若未按合并字段排序，同一部门会被拆成多组，接真实数据前先排序。",
|
|
"算 rowspan 的 while 循环假设 data 有序，改数据源时这条前提不能破。",
|
|
"要支持多字段合并需为每列各算一次 spans，当前实现只覆盖一列。"
|
|
],
|
|
"a11y": [
|
|
"合并格里的 <td> 没有 id / headers 关联，读屏读到后续行时无法知道它属于哪个部门。",
|
|
"表格没有 <caption>，也没有 th 的 scope，报表语义不完整。",
|
|
"rowspan 改变的是视觉与逻辑行数，读屏的行列计数会与视觉格数不一致，这是原生合并的固有限制。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端的契约是类名加原生表格：.kole-mergetable 承载 <table>，合并格用 .kole-merged 配 rowspan 属性，合并范围由页内脚本按相邻相同值计算。",
|
|
"table": [
|
|
{
|
|
"name": "kole-demo",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/MergedCellTable.html:15）。"
|
|
},
|
|
{
|
|
"name": "kole-demo__title",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/MergedCellTable.html:16）。"
|
|
},
|
|
{
|
|
"name": "kole-desc",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/MergedCellTable.html:13）。"
|
|
},
|
|
{
|
|
"name": "kole-h2",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/MergedCellTable.html:12）。"
|
|
},
|
|
{
|
|
"name": "kole-merged",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/MergedCellTable.html:49）。"
|
|
},
|
|
{
|
|
"name": "kole-mergetable",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/MergedCellTable.html:17）。"
|
|
},
|
|
{
|
|
"name": "kole-page",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/MergedCellTable.html:11）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/MergedCellTable.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/MergedCellTable.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"mergedcelltable-ex-1"
|
|
],
|
|
"notes": [
|
|
"表体与表头结构见（frameworks/MergedCellTable.html:17-18）。",
|
|
"rowspan 计算循环见（frameworks/MergedCellTable.html:38-43），首行判定与输出见（frameworks/MergedCellTable.html:47-49）。",
|
|
"样式依据：合并格类名 .kole-merged 的用法见（frameworks/MergedCellTable.html:49）。"
|
|
]
|
|
}
|