html表格嵌套插件,nested-json-to-table

nested-json-to-table

支持任意嵌套格式的JSON数据转化为表格显示，嵌套的JSON会以合并的单元格形式展示。

为了这个项目，特地做了个线上的JSON数据导出工具，可以导入JSON文件，预览导出效果以及导出为EXCEL。案例链接：

线上导出工具请认准域名：

0.1. 快速使用

安装

npm install nested-json-to-table --save

引入

const { jsonToHTML } = require('nested-json-to-table')

const data = [

{

a: 1,

b: {

c: 2,

d: 3

}

},

{

a: 4,

b: {

c: 5,

d: 6

}

}

]

const html = jsonToHTML(data)

console.log(html)

显示效果

a

b

c

d

1

2

3

4

5

6

点击查看生成的源码

abcd

123456

0.2. 更多的JSON格式

0.2.1. 简单格式

const data = [

{

a: 1,

b: 2

},

{

a: 3,

b: 4

}

]

显示效果

a

b

1

2

3

4

点击查看生成源码

ab

1234

0.2.2. 嵌套格式

const data = [

{

a: 1,

b: {

c: 2,

d: 3

}

},

{

a: 4,

b: {

c: 5,

d: 6

}

}

]

显示效果

a

b

c

d

1

2

3

4

5

6

点击查看生成源码

abcd

123456

0.2.3. 更复杂的嵌套数组的格式

const data = [

{

a: 1,

b: [

{

d: 2,

e: 3

},

{

d: 4,

e: 5

}

],

c: [

{

f: 6,

g: 7

},

{

f: 8,

g: 9

},

{

f: 10,

g: 11

}

]

}

]

显示效果

a

b

c

d

e

f

g

1

2

3

6

7

4

5

8

9

10

11

点击查看生成源码

abcdefg

1236745891011

0.3. 定义Meta

我们可以规定Meta的格式来收获我们想要的格式。如简单的格式：

const { jsonToHTML } = require('nestd-json-to-table')

const meta = {

order: ['a', 'b'],

mapping: {

a: {

title: 'A'

},

b: {

title: 'B'

}

}

}

const data = [

{

a: 1,

b: 2

},

{

a: 3,

b: 4

}

]

const html = jsonToHTML(meta, data)

console.log(html)

显示效果

A

B

1

2

3

4

点击查看生成源码

AB

1234

再如嵌套的格式：

const { jsonToHTML } = require('nested-json-to-table')

const meta = {

order: ['a', 'b'],

mapping: {

a: {

title: 'A'

},

b: {

title: 'B',

meta: {

order: ['c', 'd'],

mapping: {

c: {

title: 'C'

},

d: {

title: 'D'

}

}

}

}

}

}

const data = [

{

a: 1,

b: {

c: 2,

d: 3

}

},

{

a: 4,

b: {

c: 5,

d: 6

}

}

]

const html = jsonToHTML(meta, data)

console.log(html)

显示效果

A

B

C

D

1

2

3

4

5

6

点击查看生成源码

ABCD

123456

0.3.1. Meta简写格式

如果只有一个title属性，则Meta可以简写为：

const meta = {

order: ['a', 'b'],

mapping: {

a: 'A',

b: 'B'

}

}

order可以省略，这时列顺序不可保证，一般来讲是写入的顺序：

const meta = {

mapping: {

a: {

title: 'A'

}

b: {

title: 'B'

}

}

}

省略mapping的写法也是支持的，下面两者等价：

const meta1 = {

order: ['a', 'b']

}

const meta2 = {

order: ['a', 'b'],

mapping: {

a: 'a',

b: 'b'

}

}

0.3.2. 自定义Builder

输出HTML源码只是工具提供的最基本的格式。实际上，可以通过编写Builder支持更多的输出格式，如Excel等等。下面是一个简单的示例，它输出

const { jsonToTable } = require('nested-json-to-table')

class Builder {

constructor () {

this.indent = 0

}

table (next) {

this._wrap('table', next)

}

head (next) {

this._wrap('table', next)

}

body (next) {

this._wrap('table', next)

}

row (next) {

this._wrap('row', next)

}

cell (data, at) {

this._writeLine(`

${data}`)

}

_wrap (tag, next) {

this._writeLine(``)

this.indent++

next()

this.indent--

this._writeLine(`${tag}>`)

}

_writeLine (line) {

const spaces = new Array(this.indent * 2).fill('').join('')

console.log(spaces + line)

}

}

const data = [

{

a: 1,

b: 2

},

{

a: 3,

b: 4

}

]

const builder = new Builder()

jsonToTable(data, builder)

输出

一个Builder是一个对象，其中要定义table、head、body、row、cell五个方法，分别对应表格的表格、表头、表体、行和单元格的处理段。

table(next)：进入table的处理段，调用next方法才会进入到下一层的处理段。

head(next)：进入head的处理段，调用next方法才会进入到下一层的处理段。

body(next)：进入body的处理段，调用next方法才会进入到下一层的处理段。

row(next)：进入row的处理段，调用next方法才会进入到下一层的处理段。

cell(data, at)：进入单元格的处理段，data是该单元格的数据，at包含三个参数：

rowSpan: 该单元格纵跨的行数

colSpan：该单元格横跨的列数

isHead：该单元格是否位于表头，否则就在表体内

1. 函数列表

1.1. jsonToHTML

function jsonToTable(data)

将data转化为HTML表格源码。

function jsonToTable(meta, data)

将data转化为HTML表格源码，其中表头的部分通过meta定义。

function jsonToTable(meta, data, rootAttrs)

将data转化为HTML表格源码，其中表头的部分通过meta定义。该调用可以附加一个根元素(即table)的属性列表。如下调用，最终生成的源码会是：

jsonToTable(meta, data, { class: 'class1 class2' })

// generate

//

// ...

1.2. jsonToTable

function jsonToTable(data, builder)

利用自定义Builder，将data转化为table格式。关于自定义Builder的部分，可参考相关章节。

function jsonToTable(meta, data, builder)

利用自定义Builder，将data转化为table格式。其中表头的部分通过meta定义。关于meta和自定义Builder的部分，可参考相关章节。

1.3. 依赖

1.3.1. Node版本

v8.11.1

1.3.2. 生成文档

pip install MarkdownPP

1.4. License

LGPL-2.1