前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载本篇指南聚焦 Jspreadsheet CE 的 Create from an HTML Table 能力只需把一个静态的table元素交给jspreadsheet()工厂函数就能在 v4 版本中将其原地升级为具备表头、嵌套表头、公式、合并单元格与页脚等完整控件的数据网格。读完本文你将掌握纯 JavaScript、React、Vue 三种场景下的表格转换方法并能基于源码理解转换过程中的列类型、列宽、样式与公式等配置是如何被自动提取的。功能概述静态 HTML 表格的原地升级在传统页面中数据通常以静态table的形式渲染用户只能看而不能改。Jspreadsheet 从 v4 开始提供了一条零配置的升级路径直接把 HTMLTableElement 作为jspreadsheet()的第一个参数组件会读取表格的语义结构thead、tbody、tfoot、colgroup、colspan、rowspan、行内样式与自定义属性自动生成等价的电子表格配置并完成渲染。jspreadsheet(document.getElementById(spreadsheet));这一调用方式与常规用法传入div加worksheets配置的区别在于表格本身既是数据源也是配置源无需手写columns、data等选项。入口的识别逻辑位于 src/utils/factory.js当传入元素的tagName为TABLE时工厂函数会调用createFromTable解析表格生成配置并新建一个div插入原表格位置、移除原表格随后按常规流程构建工作表。快速上手纯 JavaScript 从 HTML 表格创建电子表格以下示例完整展示了 Jspreadsheet 官方文档给出的2019 年度 Top 40 专辑榜表格转换场景来源docs/jspreadsheet/docs/examples/create-from-table.mdhtml script srchttps://bossanova.uk/jspreadsheet/v5/jspreadsheet.js/script script srchttps://jsuites.net/v5/jsuites.js/script link relstylesheet hrefhttps://bossanova.uk/jspreadsheet/v5/jspreadsheet.css typetext/css / link relstylesheet hrefhttps://jsuites.net/v5/jsuites.css typetext/css / h4The Official Top 40 biggest albums of 2019/h4 table idspreadsheet thead tr td colspan4General/td /tr tr td colspan3Info/td td colspan1Stats/td /tr tr td idposPOS/td td idtitleTITLE/td td idartistARTIST/td td idpeakPEAK/td /tr /thead tbody tr td1/td tdDIVINELY UNINSPIRED TO A HELLISH EXTENT/td tdLEWIS CAPALDI/td td1/td /tr tr td2/td tdNO 6 COLLABORATIONS PROJECT/td tdED SHEERAN/td td1/td /tr tr td3/td tdTHE GREATEST SHOWMAN/td tdMOTION PICTURE CAST RECORDING/td td1/td /tr tr td4/td tdWHEN WE ALL FALL ASLEEP WHERE DO WE GO/td tdBILLIE EILISH/td td1/td /tr tr td5/td tdSTAYING AT TAMARAS/td tdGEORGE EZRA/td td1/td /tr tr td6/td tdBOHEMIAN RHAPSODY - OST/td tdQUEEN/td td3/td /tr tr td7/td tdTHANK U NEXT/td tdARIANA GRANDE/td td1/td /tr tr td8/td tdWHAT A TIME TO BE ALIVE/td tdTOM WALKER/td td1/td /tr tr td9/td tdA STAR IS BORN/td tdMOTION PICTURE CAST RECORDING/td td1/td /tr tr td10/td tdYOURE IN MY HEART/td tdROD STEWART/td td1/td /tr /tbody tfoot tr td/td td/td td/td tdSUM(B1,B2,B3)/td /tr /tfoot /table br script jspreadsheet(document.getElementById(spreadsheet)); /script /html这个示例同时覆盖了 HTML 表格的三种关键结构转换后的效果如下thead多行结构前两行General、Info / Stats通过colspan形成分组表头会被解析为nestedHeaders嵌套表头最后一行POS / TITLE / ARTIST / PEAK则被识别为真正的列定义其id如pos与文本内容会映射到列的id与titletbody数据行10 行专辑数据成为工作表的datatfoot表尾SUM(B1,B2,B3)会被作为工作表页脚公式保留并随单元格编辑实时重算关于页脚与公式的更多细节可参考 footers.md 与 formulas.md。底层原理createFromTable 如何解析table转换的核心实现位于 src/utils/helpers.js 的createFromTable(el, options)函数。它会遍历表格 DOM把解析结果写回options.columns、options.data并根据探测到的特性附加nestedHeaders、mergeCells、style、rows、classes、footers等配置项。入口工厂函数对 TABLE 元素的识别在 src/utils/factory.js 中factory.spreadsheet首先判断el.tagName TABLE随后执行const tableOptions createFromTable(el, options.worksheets[0]); options.worksheets[0] tableOptions;即把解析出的配置作为第一个工作表的选项然后新建div替换原表格节点el.remove()。如果传入元素不是表格createFromTable会在控制台输出Element is not a table提示。列定义colgroup 与表头单元格的解析createFromTable会优先读取colgroupcol的宽度依次检查每个col的style.width若为空再回退读取width属性helpers.js有值的列宽会写入options.columns[i].width。随后进入表头解析helpers.js对thead最后一行真正的列头的每个单元格执行parseHeaderHTML 属性 / 内容生成的列配置说明单元格文本innerHTMLcolumns[i].title列标题getBoundingClientRect()宽度columns[i].width实测宽度大于 50px 时取实测值否则兜底为 50pxdata-celltype属性columns[i].type指定列类型缺省为text行内text-aligncolumns[i].align对齐方式name属性columns[i].name列名供公式引用id属性columns[i].id列 iddata-mask属性columns[i].mask输入掩码如日期、货币格式嵌套表头thead 多行结构helpers.js 会通过:scope thead tr选取表头所有行把除最后一行外的每一行解析为分组节点记录title与colspan累积成nested数组当存在分组时写入options.nestedHeaders。这正好对应示例中的 General 与 Info / Stats 两行分组。更完整的嵌套表头用法可参考 headers.md。数据行公式、样式与合并单元格内容行通过:scope tr, :scope tbody tr选取helpers.js对每个单元格依次处理公式读取data-formula属性兼容 WickedGrid 约定若值不以开头会自动补齐从而把静态单元格升级为动态公式没有该属性时取innerHTML作为普通文本样式类读取class属性写入options.classes[cellName]合并单元格读取colspan/rowspan写入options.mergeCells[cellName]详见 merged-cells.md行内样式读取style属性写入options.style[cellName]若单元格同时带有styleBold类则追加font-weight:bold;隐藏单元格若单元格display:none会先重置为可见避免转换后数据缺失行高读取tr的style.height写入options.rows[j].height。表尾tfoot 转页脚tfoot tr的每个单元格文本会被收集为数组写入options.footershelpers.js因此示例中的SUM(B1,B2,B3)会作为工作表页脚公式保留。可选开关进一步控制解析行为createFromTable还支持两个需要在options中显式开启的开关默认关闭parseTableFirstRowAsHeader: true当表格没有thead时把tbody的第一行解析为表头helpers.jsparseTableAutoCellType: true根据数据自动推断列类型helpers.js推断规则包括所有值长度不超过 25 且存在超过一行的重复值时该列被推断为dropdown并把去重后的取值写入columns[i].source当值恰好为 10 位且符合yyyy-mm-dd第 4、7 位为-格式时推断为calendar日期列。用法示例jspreadsheet(document.getElementById(spreadsheet), { worksheets: [{ parseTableFirstRowAsHeader: true, parseTableAutoCellType: true, }] });HTML 表格特性到 Jspreadsheet 配置的映射对照表HTML 表格特性转换后的 Jspreadsheet 配置源码位置thead多行分组colspannestedHeadershelpers.jsthead最后一行单元格columnstitle / width / type / align / name / id / maskhelpers.jstbody/ 直接子级tr单元格data二维数组helpers.js单元格data-formula属性动态公式自动补helpers.js单元格colspan/rowspanmergeCellshelpers.js单元格style/styleBold类style含加粗helpers.js单元格class属性classeshelpers.js行内style.heightrows行高helpers.jstfoot单元格文本footers可含公式helpers.jscolgroup col宽度columns[i].widthhelpers.js无theadparseTableFirstRowAsHeader首行提升为表头helpers.jsparseTableAutoCellType自动推断 dropdown / calendar 列类型helpers.js在 React 中使用对于 React 项目可借助useRef持有表格 DOM并在组件挂载后调用jspreadsheet()对应官方包jspreadsheet-ce/react。完整示例来源create-from-table.mdimport React, { useRef, useEffect } from react; import { jspreadsheet } from jspreadsheet-ce/react; import jsuites/dist/jsuites.css; import jspreadsheet-ce/dist/jspreadsheet.css; export default function App() { // Spreadsheet array of worksheets const spreadsheet useRef(); useEffect(() { if (spreadsheet.current) { jspreadsheet(spreadsheet.current); } }, []) // Render component return ( table ref{spreadsheet} thead tr td colspan4General/td /tr tr td colspan3Info/td td colspan1Stats/td /tr tr td idposPOS/td td idtitleTITLE/td td idartistARTIST/td td idpeakPEAK/td /tr /thead tbody tr td1/td tdDIVINELY UNINSPIRED TO A HELLISH EXTENT/td tdLEWIS CAPALDI/td td1/td /tr tr td2/td tdNO 6 COLLABORATIONS PROJECT/td tdED SHEERAN/td td1/td /tr tr td3/td tdTHE GREATEST SHOWMAN/td tdMOTION PICTURE CAST RECORDING/td td1/td /tr tr td4/td tdWHEN WE ALL FALL ASLEEP WHERE DO WE GO/td tdBILLIE EILISH/td td1/td /tr tr td5/td tdSTAYING AT TAMARAS/td tdGEORGE EZRA/td td1/td /tr tr td6/td tdBOHEMIAN RHAPSODY - OST/td tdQUEEN/td td3/td /tr tr td7/td tdTHANK U NEXT/td tdARIANA GRANDE/td td1/td /tr tr td8/td tdWHAT A TIME TO BE ALIVE/td tdTOM WALKER/td td1/td /tr tr td9/td tdA STAR IS BORN/td tdMOTION PICTURE CAST RECORDING/td td1/td /tr tr td10/td tdYOURE IN MY HEART/td tdROD STEWART/td td1/td /tr /tbody tfoot tr td/td td/td td/td tdSUM(B1,B2,B3)/td /tr /tfoot /table / ); }两个需要留意的 React 细节useEffect中的if (spreadsheet.current)守卫确保只对已挂载的真实 DOM 初始化jspreadsheet()会把table原地替换为内部 div因此不要在渲染阶段直接依赖该表格节点的引用而应在副作用中访问 ref。在 Vue 中使用Vue 3 场景下用ref绑定表格元素并在onMounted中初始化对应官方包jspreadsheet-ce/vue。完整示例来源create-from-table.mdtemplate table refspreadsheetRef thead tr td colspan4General/td /tr tr td colspan3Info/td td colspan1Stats/td /tr tr td idposPOS/td td idtitleTITLE/td td idartistARTIST/td td idpeakPEAK/td /tr /thead tbody tr td1/td tdDIVINELY UNINSPIRED TO A HELLISH EXTENT/td tdLEWIS CAPALDI/td td1/td /tr tr td2/td tdNO 6 COLLABORATIONS PROJECT/td tdED SHEERAN/td td1/td /tr tr td3/td tdTHE GREATEST SHOWMAN/td tdMOTION PICTURE CAST RECORDING/td td1/td /tr tr td4/td tdWHEN WE ALL FALL ASLEEP WHERE DO WE GO/td tdBILLIE EILISH/td td1/td /tr tr td5/td tdSTAYING AT TAMARAS/td tdGEORGE EZRA/td td1/td /tr tr td6/td tdBOHEMIAN RHAPSODY - OST/td tdQUEEN/td td3/td /tr tr td7/td tdTHANK U NEXT/td tdARIANA GRANDE/td td1/td /tr tr td8/td tdWHAT A TIME TO BE ALIVE/td tdTOM WALKER/td td1/td /tr tr td9/td tdA STAR IS BORN/td tdMOTION PICTURE CAST RECORDING/td td1/td /tr tr td10/td tdYOURE IN MY HEART/td tdROD STEWART/td td1/td /tr /tbody tfoot tr td/td td/td td/td tdSUM(B1,B2,B3)/td /tr /tfoot /table /template script setup import { ref, onMounted } from vue; import { jspreadsheet } from jspreadsheet-ce/vue; import jsuites/dist/jsuites.css; import jspreadsheet-ce/dist/jspreadsheet.css; // Spreadsheet ref const spreadsheetRef ref(null); onMounted(() { if (spreadsheetRef.value) { jspreadsheet(spreadsheetRef.value); } }); /script与 React 版本同理初始化必须放在onMounted中确保spreadsheetRef.value已指向真实 DOM 节点jspreadsheet()会替换该表格节点因此后续不要再依赖模板中的原table。注意事项与边界基于源码行为使用该功能时需要注意以下几点表格节点会被替换转换完成后原table从 DOM 中移除工厂函数新建div承载工作表factory.js如需保留原表格请先备份 DOM 或数据非 TABLE 元素会告警createFromTable对非表格元素仅在控制台输出Element is not a table不会抛出异常中断helpers.js表头宽度兜底规则表头实测宽度小于等于 50px 时按 50px 处理避免极窄表头导致列宽异常嵌套表头仅识别thead直接子行分组行必须放在thead内且位于最后一行之前最后一行才被当作列定义可选开关默认关闭parseTableFirstRowAsHeader与parseTableAutoCellType需要显式传入true才会生效data-celltype优先显式声明的列类型优先级高于parseTableAutoCellType的自动推断转换得到的是与手写配置等价的工作表选项之后仍可继续通过getConfig()/setConfig()或工作表实例方法做二次调整参考 getting-started.md 与 config.md。延伸阅读官方示例原文docs/jspreadsheet/docs/examples/create-from-table.md转换核心实现src/utils/helpers.jscreateFromTable工厂入口与 TABLE 识别src/utils/factory.js相关功能文档headers.md嵌套表头、merged-cells.md合并单元格、footers.md页脚、formulas.md公式、columns.md列配置快速上手与全局方法getting-started.md赞分享前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载相关推荐DeepChat 技能库实战使用 docx 库在 JavaScript/TypeScript 中生成专业 Word 文档DeepChat 技能库实战使用 docx 库在 JavaScript/TypeScript 中生成专业 Word 文档 导读 本文是 DeepChat 仓库前端UI组件Blueprint Table 组件实战指南构建高性能可交互的 React 表格与电子表格Blueprint Table 组件实战指南构建高性能可交互的 React 表格与电子表格 导读 本文围绕 Blueprint React UI 工具包中的前端UI组件设计系统Univer 表格 UI 插件指南使用 univerjs/sheets-table-ui 为电子表格接入结构化表格交互Univer 表格 UI 插件指南使用 univerjs/sheets table ui 为电子表格接入结构化表格交互 univerjs/sheets t前端企业应用上一篇WPF UI 图标体系完全指南在 WPF 中集成 Fluent System Icons 与 SymbolIcon 图标下一篇react-native-worklets Babel Plugin 完全指南worklet 化编译原理、自动 worklet 化与边界条件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考