Matable NPM | npm.io

Matable

Matable是一个高效便利的 XLSX文件转网页 的开源工具。

Matable支持自定义配置，支持各种检索模式，使用简单方便。

Matable是一个开源的项目，其使用了如下的开源项目

demo

快速开始

git clone https://github.com/shawroger/Matable.git

或者直接在一个目录准备一个data.xlsx和index.html文件，并在index.html中加入如下内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link href="/matable.css" rel="stylesheet" />
		<title>Matable Demo</title>
	</head>
	<body>
		<div id="root"></div>
		<script src="/matable.js"></script>
		<script>
			const Matable = window.Matable;
			const { createConf } = Matable;

			const table01 = createConf(["data-01.xlsx", "Table 01"], {
				name: "",
				age: 0,
			});

			Matable.init({ copyright: true, title: "My Demo" })
				.add(table01)
				.render("#root");
		</script>
	</body>
</html>

API

所有的实例方法都支持链式操作

init

创建一个Matable实例

config

type ValidSearchMode = { key: string; val: string; weight: number }[];

type SearchConfig = {
	mode: string | null | ValidSearchMode | string[];
	able: boolean;
	label: string;
	$$val?: string;
	sort: boolean;
};

interface Config {
	data: string;
	title: string;
	index: boolean;
	footer: boolean;
	config: SearchConfig[];
	removeFirstLine: boolean;

	onLoadData: (data: Array<{ [p: string]: string }>) => void;
	onChangePage: (page: number) => void;
	onSortData: (
		key?: string,
		order?: 1 | -1
	) => void | ((a: string, b: string) => number);
	injectJson: (config: Config) => Record<string, string | number>;
	meta: {
		[key: string]: any;
	};
}

Config是合法的Matable配置的数据，Matable用其来生成动态表单。

完整的Config类型比较复杂，因此一般使用createConf函数来创建一个Config类型数据。

render

渲染到指定的节点

createConf

export function createConf(
	info: string | [string, string] | { [key: string]: string },
	row: { [key: string]: RowData },
	mergeConfig?: Partial<Config> | Record<string, number | string>
): Config;

创建一个合法的Matable数据配置

const { createConf } = Matable;
const table = createConf(
	["$FILE.xlsx", "Table Title"],
	{
		/// 在后文说明 的RowData 配置
	},
	{
		/// 自定义排序
		onSortData(key) {
			if (key === "age") {
				return (a, b) => a - b;
			}
		},
	}
);

createMode

export function createMode(row: {
	[key: string]: RowData;
}): Partial<GlobalConfig>;

创建合法的Matable数据检索模式

即生成createConf的第二个函数参数。

const { createMode, Select } = Matable;
const mode = createMode({
	姓名X: false, // 不显示此项，其实直接删去即可
	姓名0: null, // 无检索模式
	姓名1: "=", // 全字匹配
	姓名2: "", // 部分匹配
	姓名3: ">=", // 全字匹配 + 排序
	姓名4: ">", // 部分匹配 + 排序
	姓名5: 0, // 排序
	姓名6: ["甲", "乙"], // 数据分类
	姓名7: Select.from(["甲", "乙"]), // 数据分类 + 排序
});

parseMode

export function parseMode(label: string, mode: RowData): SearchConfig;

生成一列的数据检索模式

const { parseMode } = Matable;
// 全字匹配 + 排序
const mode = parseMode("姓名", ">=");

实例方法 resolveData

resolveData 是实例上的一个运行时方法，允许在页面挂载后读取从config获取的数据。

export type ITableData = Array<{ [p: string]: string }>;
export function resolveData(config: Config): null | ITableData;

const matable = Matable.init({
	/*...*/
})
	.config(/*config*/ [conf_1])
	.render("#root");

// 必须执行 render 后才可使用 `resolveData` 方法

const data_01 = matable.resolveData(conf_1);

Select

Select 是一个静态类，提供了两个静态函数

export type SelectMapper = (
	key: string,
	index: number
) => {
	key: string;
	val: string;
	weight: number;
};

export class Select {
	static defaultMap: SelectMapper;

	static from(arr: Array<string>, mapper: SelectMapper): ValidSearchMode;

	static range(
		fromTo: [number, number],
		mapper: (n: number) => string
	): ValidSearchMode;
}

Select.from

将一个 string[] 转为一个 ValidSearchMode。

其最直接的应用是实现数据分类 + 排序的检索模式。

const { createMode, Select } = Matable;
const mode = createMode({
	DEMO: Select.from(["A", "B", "C"]), // 数据分类 + 排序
});

Select.range

提供一个快速生成序列的函数。

const { createMode, Select } = Matable;
const mode = createMode({
	// 即为 ["1班", "2班", "3班",... ,"16班"]
	班级: Select.range([1, 17], (i) => i + " 班"), // 数据分类 + 排序
});