数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载本文基于 TinyBase 仓库中的 UI Components (Solid) 系列演示site/demos/10_ui_components_solid/index.md完整讲解ui-solid-dom模块中十个 Solid 组件从最简单的ValuesInHtmlTable表格到支持排序分页的SortedTableInHtmlTable再到EditableValueView/EditableCellView编辑控件与Inspector调试面板。读完本文你将掌握在 Solid 应用中用 TinyBase 的 Provider 上下文、响应式 hooks 与即插即用的 HTML 表格组件在几分钟内搭建出可排序、可分页、可编辑的数据界面并理解每个 props 背后的源码实现原理。ValuesInHtmlTable 组件演示效果一、这组演示讲什么这组演示共 10 个小节在同一个工程骨架上循序渐进地展示ui-solid-dom模块的组件能力先创建一个装载示例数据的 Store再用不同的组件把 Store 中的 Values、Table、Index Slice、Relationship、Query 结果渲染成标准 HTMLtable最后引入编辑控件与调试工具。演示涉及四个运行时模块分工明确模块职责tinybase核心 Store负责数据建模与响应式更新tinybase/ui-solidSolid 绑定层Provider、useCreateStore、useCell等 hooks 与响应式原语tinybase/ui-solid-domDOM 表格组件ValuesInHtmlTable、TableInHtmlTable、SortedTableInHtmlTable、SliceInHtmlTable、RelationshipInHtmlTable、ResultTableInHtmlTable、ResultSortedTableInHtmlTable、EditableValueView、EditableCellView、SortedTablePaginatortinybase/ui-solid-inspectorInspector调试面板可查看和编辑整个 Store 的内容组件清单可以从模块入口 src/ui-solid-dom/index.tsx 的导出语句中直接确认。TinyBase 当前仓库版本为 9.6.0见 package.json项目定位是 A reactive in-memory data store with persistence and synchronization for local-first JavaScript and TypeScript apps——也就是说这些 UI 组件服务于本地优先local-first应用的数据展示与编辑场景。二、工程样板ImportMap、Provider 与 Store 初始化所有演示共用一套样板Boilerplate。首先通过 ImportMap 把四个模块映射到 esm.sh 上的最新版本版本号在之后留空表示跟随最新script typeimportmap { imports: { tinybase: https://esm.sh/tinybase, tinybase/ui-solid: https://esm.sh/tinybase/ui-solid, tinybase/ui-solid-dom: https://esm.sh/tinybase/ui-solid-dom, solid-js: https://esm.sh/solid-js, solid-js/web: https://esm.sh/solid-js/web } } /script接着引入需要的 API、Solid 本身以及渲染入口import {createSignal, onMount} from solid-js; import {render} from solid-js/web; import {createStore} from tinybase; import {Provider, useCreateStore} from tinybase/ui-solid; import {ValuesInHtmlTable} from tinybase/ui-solid-dom;主容器App组件是每个演示的心脏用useCreateStore创建并记忆化一个 Store在onMount中装载数据然后用Provider把 Store 放进应用级上下文让整个组件树都能响应式地读取它const App () { const store useCreateStore(createStore); const [isLoading, setIsLoading] createSignal(true); onMount(() { loadValues(store()); setIsLoading(false); }); return ( Provider store{store()}{isLoading() ? Loading / : Body /}/Provider ); }; addEventListener(load, () render(() App /, document.body));useCreateStore的实现非常简洁——内部就是createMemo(create)见 src/ui-solid/primitives.ts保证 Store 只被创建一次且始终返回同一个引用。演示还提前准备了一个Loading旋转指示器因为后续演示会把数据装载改为异步从远程拉取 TSV先看loadValues——它用事务 API 一次性写入四条用户偏好 Valuesconst loadValues (store) { store .startTransaction() .setValue(username, John Appleseed) .setValue(email address, john.appleseedexample.com) .setValue(dark mode, true) .setValue(font size, 14) .finishTransaction(); };配合一段通用基础样式Inter 字体、盒模型、页面排版等即可开始渲染组件。三、零配置起步ValuesInHtmlTable第一个组件ValuesInHtmlTable字面意义上需要零个 props就能把 Store 里的全部 Values 渲染成表格const Body () { return ( ValuesInHtmlTable / / ); };这段代码输出的是标准 DOMtable表头包含Id列与Value列每一行对应一个 ValueId 显示在左侧。配合示例的浅色边框样式与投影即可得到干净的表格外观。ValuesInHtmlTable的行为在两个 props 上可调headerRow是否显示顶部表头行默认true与idColumn是否显示左侧 Id 列默认true。可以并排渲染第二张精简表格验证效果ValuesInHtmlTable headerRow{false} idColumn{false} /从源码 src/ui-solid-dom/ValuesInHtmlTable.tsx 可以看到它的实现套路useValueIds响应式取回全部 Value IdheaderRow false时跳过theadidColumn false时跳过 Id 单元格每个 Value 默认渲染为ValueView但如果editable为true则自动切换为EditableValueView还可以通过valueComponentprop 整体替换单元格组件、用getValueComponentProps为每个单元格生成额外 props、用extraCellsBefore/extraCellsAfter在表格两侧插入自定义列。四、渲染 Table 与自定义单元格TableInHtmlTableTableInHtmlTable与前者几乎一样简单只是多了一个必需的tableIdprop并改从远程异步装载 TSV 表格数据沿用 Movie Database 演示的装载函数仓库中同款数据文件位于 docs/assets/genres.tsvconst NUMERIC /^[\d\.]$/; const loadTable async (store, tableId) { store.startTransaction(); const rows ( await (await fetch(https://tinybase.org/assets/${tableId}.tsv)).text() ).split(\n); const cellIds rows.shift().split(\t); rows.forEach((row) { const cells row.split(\t); if (cells.length cellIds.length) { const rowId cells.shift(); cells.forEach((cell, c) { if (cell ! ) { if (NUMERIC.test(cell)) { cell parseFloat(cell); } store.setCell(tableId, rowId, cellIds[c 1], cell); } }); } }); store.finishTransaction(); };装载 genres 表后渲染两张表再次验证headerRow与idColumnTableInHtmlTable tableIdgenres / TableInHtmlTable tableIdgenres headerRow{false} idColumn{false} /TableInHtmlTable更重要的能力是自定义单元格渲染。演示用useCellhook 读取指定单元格的值把name列渲染成指向在线词典的链接const DictionaryCell ({tableId, rowId, cellId, store}) { const word useCell(tableId, rowId, cellId, store); return ( a href{https://www.merriam-webster.com/dictionary/ word()} target_blank {word()} /a ); };别忘了把useCell加进tinybase/ui-solid的导入列表然后通过customCells配置声明键为 Cell Id值为标签字符串或标签 组件对象const customCells {name: {label: Name, component: DictionaryCell}};TableInHtmlTable tableIdgenres customCells{customCells} /customCells支持三种写法详见 src/types/ui-solid-dom/docs.js 中HtmlTableProps的类型说明Cell Id 数组[name, year]按给定顺序只渲染这些列标签映射对象{name: Name, year: Year}键是 Cell Id、值是列标签CustomCell 对象{name: {label: Name, component: DictionaryCell}}可附加自定义组件与getComponentProps。所有表格类组件共享同一套HtmlTableProps底座className根元素样式类、headerRow默认true、idColumn默认true、editable是否用EditableCellView替换默认CellView不会影响自定义单元格组件、extraCellsBefore/extraCellsAfter表格主体前后插入额外列。渲染底座HtmlTable位于 src/ui-solid-dom/common/components.tsx它统一把分页器放进caption、把 Id 列与自定义列渲染进thead再用getValue(rowIds)响应式循环tbody中的行——整个表格的数据变化都会随 Solid 信号自动重渲染。五、排序、点击交互与分页SortedTableInHtmlTableSortedTableInHtmlTable是更有互动性的 Table 渲染方式适合大数据集因此演示改为装载 movies 表docs/assets/movies.tsv。它至少需要tableId其余 props 与 Store 的getSortedRowIds方法一一对应cellId按哪个 Cell 的值排序省略时按 Row Id 排序descending是否降序默认升序limit最多返回多少行offset跳过多少行与limit配合做分页sortOnClick点击列头时切换排序再次点击同一列头会反转方向paginatortrue启用内置SortedTablePaginator或传入自定义分页器组件需符合SortedTablePaginatorPropsonChange排序/偏移变化时的回调。movies 表很宽且含长描述先用标签映射把列收窄const customCells {name: Name, year: Year, rating: Rating};然后按评分降序取前 7 名并开启点击排序与分页SortedTableInHtmlTable tableIdmovies customCells{customCells} cellIdrating descending{true} limit{7} sortOnClick{true} paginator{true} /SortedTableInHtmlTable 的排序与分页效果当前排序列的高亮由HtmlHeaderCell自动完成它会给当前排序列的表头th追加sorted类并根据方向追加ascending或descending类同时渲染箭头字符升序↑、降序↓见 src/ui-solid-dom/common/components.tsx 与 src/ui-solid-dom/common/index.tsx 中的UP_ARROW/DOWN_ARROW。用 CSS 即可标记当前列th.sorted { background: #ddd; }点击列头会改变表格内容与列宽导致表格跳动演示用固定列宽缓解thead th { width: 5rem; :nth-of-type(2) { width: 28rem; } }分页逻辑集中在 src/ui-solid-dom/SortedTablePaginator.tsx 的useSortingAndPagination它以createSignal维护[cellId, descending, offset]三元组handleSort在sortOnClick开启时切换排序列与方向paginatorComponent根据paginator值选择内置SortedTablePaginator或自定义组件。内置分页器渲染←/→两个按钮和X to Y of Z rows形式的计数文本可通过singular/plural定制单位文案并做了边界处理offset 越界时自动归零。分页控件由HtmlTable放进caption元素中可用 CSS 自由定位和美化。六、展示派生数据Slice、Relationship 与查询结果SliceInHtmlTable渲染 Index 的切片SliceInHtmlTable与TableInHtmlTable用法几乎一致只是把tableId换成indexIdsliceId。演示在App中用useCreateIndexes创建记忆化的 Indexes 对象把 genres 按名字长度建索引const indexes useCreateIndexes(store, (store) createIndexes(store).setIndexDefinition( genresByNameLength, genres, (getCell) length getCell(name).length, ), );并把 Indexes 对象挂进 ProviderProvider store{store()} indexes{indexes()} {isLoading() ? Loading / : Body /} /Provider渲染时给出索引名与切片名这里展示名字长度为 6 的所有流派SliceInHtmlTable indexIdgenresByNameLength sliceIdlength 6 /源码 src/ui-solid-dom/SliceInHtmlTable.tsx 通过getIndexStoreTableId从 Indexes 解析出底层的 Store 与 Table再用useSliceRowIds取该切片的行。演示特别提醒Slice 视图上不要开启editable——一旦改名该行会被重索引到别的切片并从当前表格消失。RelationshipInHtmlTable联动两张表RelationshipInHtmlTable用于展示由 Relationships 对象关联的两张表。演示先手工创建一张metadata表注意流派 13 Music 故意缺失对应元数据再用useCreateRelationships定义genres到metadata的关系通过rowId _meta拼接实现行级关联const relationships useCreateRelationships(store, (store) createRelationships(store).setRelationshipDefinition( genresMetadata, genres, metadata, (_, rowId) rowId _meta, ), );Provider store{store()} relationships{relationships()} {isLoading() ? Loading / : Body /} /Provider渲染同样只需一个relationshipIdRelationshipInHtmlTable relationshipIdgenresMetadata /该组件会在表头同时展示本地genres与远程metadata两张表的 Id 列genres.Id/metadata.Id列名采用点对dotted pair语法。缺失远程行时对应单元格内容为空。自定义列时同样用点对语法例如把Popularity数字加粗展示const Popularity (props) ( b CellView {...props} / /b ); const customRelationshipCells { genres.name: Genre, metadata.popularity: { label: Popularity, component: Popularity, }, metadata.text: Description, };RelationshipInHtmlTable relationshipIdgenresMetadata customCells{customRelationshipCells} idColumn{false} /从源码 src/ui-solid-dom/RelationshipInHtmlTable.tsx 可见行渲染时RelationshipInHtmlRow用useRemoteRowId解析远程行 Id再按点对 Id 分发到本地或远程表格取值。ResultTableInHtmlTable 与 ResultSortedTableInHtmlTable渲染查询结果这两个组件把 Queries 对象的查询结果渲染成表格只差一个queryId。演示用useCreateQueries定义查询选出名字以 A 开头的流派及其名字长度const queries useCreateQueries(store, (store) createQueries(store).setQueryDefinition( genresStartingWithA, genres, ({select, where}) { select(name); select((getCell) getCell(name).length).as(length); where((getCell) getCell(name).startsWith(A)); }, ), );Provider store{store()} queries{queries()} {isLoading() ? Loading / : Body /} /Provider渲染ResultTableInHtmlTable queryIdgenresStartingWithA /ResultSortedTableInHtmlTable则是查询结果的排序 分页版本。演示为 2018 年后的电影建立查询并在select里直接用.as()给列起别名const queries useCreateQueries(store, (store) createQueries(store).setQueryDefinition( recentMovies, movies, ({select, where}) { select(name).as(Name); select(year).as(Year); select(rating).as(Rating); where((getCell) getCell(year) 2018); }, ), );由于列名已在查询定义中显式声明并标注不再需要customCells排序时cellId直接使用列别名ResultSortedTableInHtmlTable queryIdrecentMovies cellIdRating descending{true} limit{7} sortOnClick{true} paginator{true} /两个组件的源码实现与表格族完全同构见 src/ui-solid-dom/ResultTableInHtmlTable.tsx 与 src/ui-solid-dom/ResultSortedTableInHtmlTable.tsx只是数据源换成useResultTableCellIds/useResultRowIds/useResultSortedRowIds/useResultRowCount单元格默认用ResultCellView渲染。七、编辑数据EditableValueView 与 EditableCellViewEditableValueView编辑单个 ValueEditableValueView只需一个valueId就能渲染并编辑对应的 Value。演示用ValuesInHtmlTable装载用户偏好数据后把第二张表格替换为编辑控件const Body () { return ( ValuesInHtmlTable / div idedit Username: EditableValueView valueIdusername / /div / ); };再让原表格整体进入可编辑模式——只需一个editablepropValuesInHtmlTable editable{true}/于是表格内的所有 Value 都会自动改用EditableValueView渲染得到内部一致的编辑体验。EditableCellView编辑单个 CellEditableCellView则需要tableId、rowId、cellId三个定位参数div idedit Genre 5 name: EditableCellView tableIdgenres rowIdg05 cellIdname / /div同样TableInHtmlTable开启editable后全表单元格都可编辑TableInHtmlTable tableIdgenres editable{true}/编辑控件的底层实现两个编辑组件共享 src/ui-solid-dom/common/components.tsx 中的EditableThing渲染内核其行为值得展开类型感知的输入控件根据当前值的类型渲染不同控件——字符串/数字用文本输入框数字用typenumber、布尔用复选框、对象与数组用 JSON 文本输入框初始值分别为{}与[]类型切换按钮控件左侧有一个显示当前类型的小按钮点击后在string → number → boolean → object → array之间循环见handleTypeChange切换即把当前值按新类型转换并写回 Store。如果 Store 配置了 Tables/Values SchemahasTablesSchema/hasValuesSchema返回真类型切换会被禁用避免破坏 schema 约束JSON 输入校验对象/数组输入框在输入无法解析为合法 JSON 或类型不符时会给输入框追加invalid类演示样式input.invalid { background: #fdd; }会把输入框标红只有解析成功才写入 Store编辑组件默认的根元素类名是editableValue/editableCell演示用它给类型按钮加宽度与间距样式。八、调试利器Inspector 组件最后一节引入Inspector一个覆盖在应用之上的浮层调试工具可以查看并编辑整个 Store 的内容Tables、Values、Indexes、Metrics、Queries、Relationships 等。它来自独立的ui-solid-inspector模块需要把 ImportMap 与导入语句相应切换- tinybase/ui-solid-dom: https://esm.sh/tinybase/ui-solid-dom, tinybase/ui-solid-inspector: https://esm.sh/tinybase/ui-solid-inspector,-import {Provider, useCell, useCreateStore} from tinybase/ui-solid; import {Provider, useCreateStore, useTableIds} from tinybase/ui-solid; -import {TableInHtmlTable} from tinybase/ui-solid-dom; import {Inspector} from tinybase/ui-solid-inspector;为了让 Inspector 展示得更有内容演示一次性装载电影数据库的四张表movies、genres、people、cast对应仓库中的 docs/assets/movies.tsv、docs/assets/genres.tsv、docs/assets/people.tsv、docs/assets/cast.tsv并放在一个事务里保证装载原子性onMount(async () { store().startTransaction(); await Promise.all( [movies, genres, people, cast].map((tableId) loadTable(store(), tableId), ), ); store().finishTransaction(); setIsLoading(false); });主体部分先用useTableIds展示已装载的表名const Body () { const tableIds useTableIds(); return ( div idinfo Loaded tables: {tableIds().join(, )} /div Inspector open{true} / / ); };Inspector可以出现在组件树的任意位置渲染为浮层。其 props 见 src/types/ui-solid-inspector/docs.jsopen是否以展开状态启动、position首次出现的屏幕位置、hue界面色相默认 270。完整实现位于 src/ui-solid-inspector/index.tsx。Inspector 调试浮层九、总结与延伸从这组演示可以看到 TinyBase Solid 组件体系的设计脉络Provider提供响应式上下文useCreateXxx系列 hooks 记忆化创建 Store/Indexes/Relationships/Queriesui-solid-dom的表格组件则把这些数据对象零成本地渲染为可排序、可分页、可编辑的标准 HTML 表格而EditableValueView/EditableCellView与Inspector补齐了编辑与调试闭环。所有组件都建立在同一个HtmlTable底座之上因此headerRow、idColumn、customCells、editable、extraCellsBefore/extraCellsAfter等 props 在所有表格组件间保持一致的语义。每个演示的逐步改造成果与可运行代码都保留在仓库中site/demos/10_ui_components_solid/ 下的 0110 号文档含01_ValuesInHtmlTable.md、02_TableInHtmlTable.md、03_SortedTableInHtmlTable.md、04_SliceInHtmlTable.md、05_RelationshipInHtmlTable.md、06_ResultTableInHtmlTable.md、07_ResultSortedTableInHtmlTable.md、08_EditableValueView.md、09_EditableCellView.md、10_Inspector.md。若想继续深入对照 React 与 Svelte 版本的同一套演示site/demos/09_ui_components_react/index.md、site/demos/11_ui_components_svelte/index.md组件 API 高度对齐学习 Solid 集成的最佳实践site/guides/03_building_uis_with_solid/index.md查阅完整的 props 类型文档src/types/ui-solid-dom/docs.js以及各组件源码src/ui-solid-dom/ 目录。赞分享数据库后端前端【免费下载链接】tinybaseA reactive data store sync engine.项目地址https://gitcode.com/gh_mirrors/ti/tinybase点击查看免费下载相关推荐TinyBase Solid UI 实战用 SortedTableInHtmlTable 构建可排序、可交互、可分页的 HTML 数据表格TinyBase Solid UI 实战用 SortedTableInHtmlTable 构建可排序、可交互、可分页的 HTML 数据表格 SortedTab数据库后端前端TinyBase ValuesInHtmlTable / (Solid) 实战用 ui-solid-dom 组件把 Store Values 渲染成响应式 HTML 表格TinyBase ValuesInHtmlTable / Solid 实战用 ui solid dom 组件把 Store Values 渲染成响应式 HT数据库后端前端TinyBase Solid 组件实战用 ResultSortedTableInHtmlTable 渲染可排序、可交互的查询结果表TinyBase Solid 组件实战用 ResultSortedTableInHtmlTable 渲染可排序、可交互的查询结果表 本文基于 TinyBase数据库后端前端上一篇ZLMediaKit超强HTTP断点续传如何实现高效文件服务器与媒体流传输下一篇Angel 数据格式详解libsvm 与 dummy 输入规范、分隔符配置与标签转换指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考