Package Exports
- nested-json-to-table
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nested-json-to-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
json-to-table
一个将 JSON 数据转化为表格形式的工具，支持深层次的嵌套。项目主页：
快速上手
引用
推荐使用npm或yarn安装：
npm install nested-json-to-table或者使用打包文件（查看 dist/json-to-table.min.js），放在浏览器的<script>标签：
<script src="dist/json-to-table.min.js"></script>
<script>
const { jsonToHTMLTable } = JSONToTable
</script>渲染效果
如下可以生成 HTML 的表格源码：
const { jsonToHTMLTable } = require('nested-json-to-table')
const data = [
{
name: 'Jim',
age: 18,
courses: [
{ title: 'English', score: 87 },
{ title: 'Chinese', score: 67 }
]
},
{
name: 'Lucy',
age: 17,
courses: [
{ title: 'Math', score: 97 },
{ title: 'Music', score: 77 },
{ title: 'Gym', score: 57 }
]
}
]
const tableHTML = jsonToHTMLTable(data)渲染的表格如下：
| name | age | courses | |
|---|---|---|---|
| title | score | ||
| Jim | 18 | English | 87 |
| Chinese | 67 | ||
| Lucy | 17 | Math | 97 |
| Music | 77 | ||
| Gym | 57 | ||
概念
Props
仅声明感兴趣的部分
原始的data可能会混杂大量无关的字段，而我们想要生成表格时可能只需要其中的部分字段。怎么办呢？声明props就好了：
const props = [ { key: 'a' }, { key: 'b' } ]
const data = [
{ a: 1, b: 2, c: 3, d: 4, e: 5 },
{ a: 6, b: 7, c: 8, d: 9, e: 10 }
]
const tableHTML = jsonToHTMLTable(data, props)以上代码渲染表格时，仅仅只会提取字段a、b的内容。
声明标题
声明props的另一个目的，是需要定义头部标题的显示文本。如下，如果不定义title部分，则显示的头列为a | b |c；定义title后，则头列显示为A | B | C.
const props = [
{ key: 'a', title: 'A' },
{ key: 'b', title: 'B' },
{ key: 'c', title: 'C' }
]
const data = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]
const tableHTML = jsonToHTMLTable(data, props)重排顺序
props的顺序极为表格列的排列顺序。如果不定义props，则排列顺序很难预测。
const props = [ { key: 'b' }, { key: 'c' }, { key: 'a' } ]
const data = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]
const tableHTML = jsonToHTMLTable(data, props)内部 props 声明
因为支持嵌套的表格渲染，所以可以定义内部的props:
const props = [
{ key: 'a' },
{
key: 'b',
props: [ { key: 'c' }, { key: 'd' } ]
},
{ key: 'e' }
]
const data = [
{ a: 1, b: { c: 2, d: 3 }, e: 4 },
{ a: 5, b: { c: 6, d: 7 }, e: 8 }
]
const tableHTML = jsonToHTMLTable(data, props)简单写法
如果你觉得有些写法过于繁琐，还有一种简单的写法。如下：
const props = ['a', 'b', 'c']等价于：
const props = [ { key: 'a' }, { key: 'b' }, { key: 'c' } ]API
jsonToHTMLTable
jsonToHTMLTable(data, [props], [options])options 详解：
format: 生成的格式，dom表示生成 HTML Table 元素，source表示生成字符串。 默认根据环境判定，node 环境下默认值为source，浏览器环境下默认值为dom.writeTo: 如果是一个字符串，则写入到本地文件；否则，写入到一个流。indent: 缩进宽度，默认值为 2.
返回：
- 如果
options参数省略，则会返回 HTML 表格。根据系统所在环境，如果是 Node 环境，返回 HTML 源码；如果是浏览器环境，返回 Dom 节点。 - 如果指定
options.writeTo，将会 HTML 源码写入到一个流，函数返回 undefined.
jsonToExcel
jsonToExcel(data, [props], [toPath])生成 Excel 格式的表格，并写入到toPath指定的路径；如果toPath省略，则返回表格的二进制内容。
该函数根据运行环境做出合适的响应。这意味着，指定toPath时，node 环境下写入到本地文件，浏览器环境下表现为下载文件；未指定toPath时，node 环境和浏览器环境返回相应的格式，它们都易于写入到本地文件或者构建一个 Blob 对象用于 HTML5 File API.
扩展
在完成 v1 之前，事实上存在一个 v0 版，v0 版采用了生命周期函数的方式。鉴于该方式理解起来较为复杂，所以 v1 版摒弃了该方式。
v1 的方式称之为 Context. 库提供一个 Context，扩展者使用 Context 实现自己的自由扩展。Context 提供生成 cells 的方法。虽然说样板代码更多了，但理解起来更为简单。
const { Context } = require('nested-json-to-table')
function jsonToCustomize (data, props) {
const context = new Context()
if (props) {
context.initProps(props)
} else {
context.initPropsFromData(array.slice(0, 10))
}
const headCells = context.generateHeadCells(props)
// 用你自己的方式处理 headCells
for (const item of data) {
const dataCells = context.generateDataCells(item)
// 用你自己的方式处理这一条数据 dataCells
}
}Cells: 一个数组，其中每个元素代表表格中的单元格。字段列举如下：
r: 单元格所在的行序号c: 单元格所在的行序号rs: 单元格纵跨的行数cs: 单元格横跨的列数v: 该单元格的内容stringValue:v的字符串表示。一般来说，写入到单元格的内容使用该属性。
License
LGPL-2.1