前端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点击查看免费下载Meta Information元信息是 Jspreadsheet 提供的一种“单元格隐藏数据”机制你可以在表格初始化时或运行期间为任意单元格附加任意自定义数据如内部 ID、业务状态、校验标记这些数据对用户完全不可见也不会出现在单元格显示值中却可以随时通过 API 读取和更新。阅读本文后你将掌握meta初始化参数、getMeta/setMeta方法的全部调用形态并理解其底层存储结构与单元格移动/合并时的同步逻辑可直接用于构建携带业务附属信息的交互式数据表格。一、什么是 Meta Information为何需要它在真实业务中表格单元格往往需要携带“看不见”的附加信息。例如单元格显示的是国家名称但其背后需要绑定国家代码如US、BR单元格显示的是商品名称但需要附带内部 ID、库存编号等业务字段需要在单元格上记录审核状态、来源渠道、校验标记等仅在程序中使用的数据。Jspreadsheet v4 的 Meta Information 正是为此设计的它允许你在初始化时或运行期间为单元格附加任意结构的数据这些数据对用户隐藏、不影响单元格显示但可通过 API 随时存取。正如官方文档 meta-information.md 所描述的This feature helps you keep important information about the cells hidden from users该特性帮助你保留单元格的重要信息且对用户隐藏。从数据结构上看meta 是一张以单元格坐标如A1、B2为键、以任意对象为值的映射表与单元格的值value、样式style、批注comments完全解耦互不干扰。二、初始化时定义 Metameta配置参数在初始化表格时你可以通过配置对象的meta属性一次性为多个单元格预置元信息。其结构为meta: { A1: { myMeta: this is just a test, otherMetaInformation: other test }, A2: { info: test }, }即键是 Excel 风格坐标如A1值是任意对象键值对可以自由定义数量和名称不限。官方 Quick Reference 中将其类型定义为object与style单元格样式、mergeCells合并单元格等参数并列属于表格初始化配置的组成部分。在源码层面meta 数据被存储于工作表的options.meta属性中src/utils/meta.js的所有读写都围绕obj.options.meta展开初始化时传入的对象会原样成为options.meta的初始值。测试用例 test/meta.js 中Get meta information用例验证了这一点const instance jspreadsheet(root, { worksheets: [{ data: [ /* ... */ ], meta: { A1: { myMeta: this is just a test, otherMetaInformation: other test }, D2: { info: test }, }, }], }); expect(instance[0].getMeta()).to.eql({ A1: { myMeta: this is just a test, otherMetaInformation: other test }, D2: { info: test }, });三、编程方式读写 MetasetMeta与getMeta初始化之后你可以通过工作表实例的setMeta和getMeta两个公开方法随时读写元信息。这两个方法在 worksheets.js 中被注册为工作表的公开 API因此可以直接通过table.setMeta(...)/table.getMeta(...)调用。3.1setMeta写入元信息两种调用形态setMeta支持两种调用方式形态一对象批量设置一次设置多个单元格或多个键table.setMeta({ C1: { id: 1, y: 2019 }, C2: { id: 2 } });传入一个以坐标为键、以属性对象为值的对象。从 meta.js 的setMeta实现可以看到这种形态会遍历对象的所有键并以“合并”的方式写入如果某单元格已有 meta 对象则新增/覆盖其中的属性而不是整体替换。测试用例Set meta information using an object验证了合并语义instance[0].setMeta({ B1: { id: 1, y: 2019 }, C2: { test: 2 } }); instance[0].setMeta({ C2: { something: 35 } }); // 结果C2 变为 { test: 2, something: 35 }原有属性保留形态二单个键值设置为指定单元格的指定属性赋值table.setMeta(B2, myMetaData, prompt(myMetaData:));第一个参数是单元格坐标字符串第二个是属性名第三个是属性值。对应的源码逻辑为若options.meta尚未初始化则先创建空对象若该单元格尚无 meta 对象则先创建随后执行options.meta[cell][key] value写入。两种形态在写入后都会触发onchangemeta事件详见下文第五节。3.2getMeta读取元信息三种返回值getMeta的调用形态与返回值由参数决定对应 meta.js 的getMeta实现调用方式返回值table.getMeta()返回整张表的全部 meta 对象options.meta本身table.getMeta(A1)返回A1单元格的整个 meta 对象若该单元格无 meta返回nulltable.getMeta(A1, myMeta)返回A1单元格中myMeta属性的值不存在时返回null注意getMeta还支持第二参数key源码签名getMeta(cell, key)用于直接读取某单元格的单个属性值这在 Quick Reference 中亦有体现。这一细节在原文档示例中未直接演示但属于该 API 的完整能力值得掌握。测试用例Get meta information验证了getMeta()全部、getMeta(A1)单格对象以及无 meta 单元格返回null的行为。四、源码级解析Meta 的存储、合并与联动4.1 存储结构与写入逻辑Meta 的完整实现集中在 src/utils/meta.js核心逻辑如下getMeta(cell, key)无参返回options.meta全量传入坐标且不传 key 时返回该单元格 meta 对象传入坐标和 key 时返回属性值任一环节缺失即返回null。setMeta(o, k, v)k与v同时存在时走“单键写入”分支否则走“对象批量合并”分支。批量分支中外层遍历坐标、内层遍历属性采用options.meta[cell][prop] value的合并赋值因此重复设置不会清除已有属性。updateMeta(affectedCells)这是内部维护函数用于在行/列插入、删除、移动等结构性变更后同步重排 meta 中的单元格坐标。它遍历options.meta的所有坐标键若该坐标在affectedCells映射中存在新位置则将 meta 迁移到新坐标newMeta[affectedCells[key]] meta[key]否则原样保留。updateMeta的调用点位于 src/utils/internal.js与公式更新updateFormulas在同一批内部刷新流程中执行。这意味着当你插入、删除或移动行/列时meta 信息会跟随单元格一起迁移到新位置而不是残留在旧坐标。这一点是从源码结构可以确认的实现事实src/utils/internal.js的updatePosition相关逻辑会生成affectedTokens随后交给updateMeta处理。4.2 公开 API 的注册工作表公开方法列表定义于 src/utils/worksheets.js[ getMeta, function (cell) { return getMeta.call(this, cell); }, ], [setMeta, setMeta],getMeta被包装为仅暴露第一参数cell的公开方法而setMeta直接引用meta.js中的原始实现。二者均以this绑定工作表实例因此可链式地在实例上调用。五、onchangemeta事件监听元信息变化每当setMeta写入成功都会触发onchangemeta事件见 meta.js 中的dispatch.call(obj, onchangemeta, obj, data)回调收到的参数是本次变更的 meta 数据单键写入时事件载荷为{ [cell]: { [key]: value } }批量写入时事件载荷为整个传入对象o。你可以在初始化配置中注册该事件来监听元信息变化let table jspreadsheet(document.getElementById(spreadsheet), { data: [ /* ... */ ], onchangemeta: function (instance, data) { console.log(Meta changed:, data); }, });这一点在官方 Quick Reference 的 Events 表中也有明确记载onchangemeta: When a setMeta is called。六、完整可运行示例以下为官方文档 meta-information.md 提供的完整示例集成了上述全部 API初始化时预置 meta、四个按钮分别演示“批量设置”“单键设置”“读取单格 meta”“读取全部 meta”。该示例同样可在仓库测试 test/meta.js 中找到对应的行为断言。html script srchttps://bossanova.uk/jspreadsheet/v4/jspreadsheet.js/script script srchttps://jsuites.net/v5/jsuites.js/script link relstylesheet hrefhttps://bossanova.uk/jspreadsheet/v4/jspreadsheet.css typetext/css / link relstylesheet hrefhttps://jsuites.net/v5/jsuites.css typetext/css / div idspreadsheet/div div idconsole/div script let table jspreadsheet(document.getElementById(spreadsheet), { data: [ [US, Apples, Yes, 2019-02-12], [CA;US;UK, Carrots, Yes, 2019-03-01], [CA;BR, Oranges, No, 2018-11-10], [BR, Coconuts, Yes, 2019-01-12], ], columns: [ { type: dropdown, title: Product Origin, width: 300px, url: /jspreadsheet/countries, autocomplete: true, multiple: true }, { type: text, title: Description, width: 200px }, { type: dropdown, title: Stock, width: 100px, source: [No,Yes] }, { type: calendar, title: Best before, width: 100px }, ], meta:{ A1: { myMeta: this is just a test, otherMetaInformation: other test }, A2: { info: test } } }); document.getElementById(setForMultiple).onclick () table.setMeta({ C1: { id:1, y:2019 }, C2: { id:2 } }); document.getElementById(setForB2).onclick () table.setMeta(B2, myMetaData, prompt(myMetaData:)); document.getElementById(getFromA1).onclick () document.getElementById(console).innerHTML JSON.stringify(table.getMeta(A1)); document.getElementById(getAll).onclick () document.getElementById(console).innerHTML JSON.stringify(table.getMeta()); /script br/ button typebutton idsetForMultipleSet meta data for multiple columns/button button typebutton idsetForB2Set a meta information for B2/button button typebutton idgetFromA1Get the meta information from A1/button button typebutton idgetAllGet all meta information/button /html示例要点回顾初始化预置meta: { A1: {...}, A2: {...} }在表格创建时即为A1、A2附上隐藏信息批量设置点击 “Set meta data for multiple columns” 会为C1、C2同时写入多属性 meta合并语义可反复追加单键设置点击 “Set a meta information for B2” 会弹出输入框将用户输入值写入B2的myMetaData属性读取验证点击 “Get the meta information from A1” 与 “Get all meta information” 会把对应 meta 以 JSON 形式输出到页面上的#console区域。七、进阶实践与注意事项Meta 与显示值相互独立写入 meta 不会改变单元格显示内容也不会触发onchange数据变更事件它触发的是独立的onchangemeta事件。若需要在 meta 变化时联动刷新界面请自行在onchangemeta回调中处理。与style、comments的区分style控制单元格外观CSScomments用于用户可见的批注带 UI 交互而meta是纯程序内部数据三者存储于options的不同字段互不冲突可按需组合使用对应源码src/utils/style.js、src/utils/comments.js与src/utils/meta.js。结构性操作后坐标自动迁移基于updateMeta的联动逻辑插入/删除/移动行或列后meta 会随单元格迁移到新坐标你无需手动重设。这是从 internal.js 与 meta.js 的调用关系可以确认的行为。不存在的坐标返回nullgetMeta(不存在meta的单元格)返回null而非抛错读取前可放心使用无需额外判空防御有测试用例expect(instance[0].getMeta(A2)).to.equal(null)佐证。meta 不参与导出meta 属于隐藏信息不会出现在 CSV 下载、复制粘贴等导出行为中适合存放“仅供程序内部使用”的数据。八、验证与测试仓库在 test/meta.js 中提供了完整的 Meta 功能测试覆盖三条核心行为链路Set meta information using an object验证对象批量设置的合并语义后设的属性追加到已有对象上不覆盖旧属性Set meta information using strings验证setMeta(A1, key, value)单键写入以及同一单元格多属性累积Get meta information验证初始化meta参数的读取包括全量读取、单格读取与无 meta 单元格返回null。这些测试与官方示例互为印证可作为你集成 Meta 功能时的行为契约参考。小结Jspreadsheet v4 的 Meta Information 提供了一套轻量、灵活的“单元格隐藏数据”方案通过meta初始化参数预置数据通过setMeta对象批量 / 单键两种形态动态写入通过getMeta全量或定点读取并通过onchangemeta事件感知变化。其底层实现src/utils/meta.js以options.meta为唯一数据源与单元格值、样式、批注完全解耦且在行列结构变更时会自动完成坐标迁移适合作为业务数据的隐形载体是构建复杂交互表格时的实用利器。赞分享前端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 单元格元数据Cell Meta Information完全指南隐藏数据的管理、事件与实战Jspreadsheet 单元格元数据Cell Meta Information完全指南隐藏数据的管理、事件与实战 Jspreadsheet 的单元格元数前端UI组件Jspreadsheet v3 单元格元信息Meta Information实战指南getMeta / setMeta 隐藏数据管理Jspreadsheet v3 单元格元信息Meta Information实战指南getMeta / setMeta 隐藏数据管理 Jspreadshe前端UI组件Jspreadsheet 单元格元数据Meta Information管理指南setMeta 与 getMeta 的完整实践Jspreadsheet 单元格元数据Meta Information管理指南setMeta 与 getMeta 的完整实践 本文聚焦 Jspreadsh前端UI组件上一篇KMS_VL_ALL_AIO 激活脚本上手一个免费脚本解决Windows与Office全系激活难题下一篇FerretDB 故障排查完全指南连接、兼容性、性能问题的定位与解决创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考