# matable
**Repository Path**: shawroger/matable
## Basic Information
- **Project Name**: matable
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://gaokao.shawroger.com
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-12
- **Last Updated**: 2024-04-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Matable
---
`Matable`是一个高效便利的 `XLSX文件转网页` 的开源工具。
`Matable`支持自定义配置，支持各种检索模式，使用简单方便。
`Matable`是一个开源的项目，其使用了如下的开源项目
- [vue](https://vuejs.org/)
- [axios](https://github.com/axios/axios)
- [muse-ui](https://muse-ui.org/)
# 快速开始
```bash
git clone https://github.com/shawroger/Matable.git
```
或者直接在一个目录准备一个`data.xlsx`和`index.html`文件，并在`index.html`中加入如下内容
```html
Matable Demo
```
# API
所有的实例方法都支持链式操作
## init
创建一个`Matable`实例
## config
```ts
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;
meta: {
[key: string]: any;
};
}
```
`Config`是合法的`Matable`配置的数据，`Matable`用其来生成动态表单。
完整的`Config`类型比较复杂，因此一般使用`createConf`函数来创建一个`Config`类型数据。
## render
渲染到指定的节点
## createConf
```ts
export function createConf(
info: string | [string, string] | { [key: string]: string },
row: { [key: string]: RowData },
mergeConfig?: Partial | Record
): Config;
```
创建一个合法的`Matable`数据配置
```ts
const { createConf } = Matable;
const table = createConf(
["$FILE.xlsx", "Table Title"],
{
/// 在后文说明 的RowData 配置
},
{
/// 自定义排序
onSortData(key) {
if (key === "age") {
return (a, b) => a - b;
}
},
}
);
```
## createMode
```ts
export function createMode(row: {
[key: string]: RowData;
}): Partial;
```
创建合法的`Matable`数据检索模式
即生成`createConf`的第二个函数参数。
```ts
const { createMode, Select } = Matable;
const mode = createMode({
姓名X: false, // 不显示此项，其实直接删去即可
姓名0: null, // 无检索模式
姓名1: "=", // 全字匹配
姓名2: "", // 部分匹配
姓名3: ">=", // 全字匹配 + 排序
姓名4: ">", // 部分匹配 + 排序
姓名5: 0, // 排序
姓名6: ["甲", "乙"], // 数据分类
姓名7: Select.from(["甲", "乙"]), // 数据分类 + 排序
});
```
## parseMode
```ts
export function parseMode(label: string, mode: RowData): SearchConfig;
```
生成一列的数据检索模式
```ts
const { parseMode } = Matable;
// 全字匹配 + 排序
const mode = parseMode("姓名", ">=");
```
## 实例方法 resolveData
`resolveData` 是实例上的一个运行时方法，允许在页面挂载后读取从`config`获取的数据。
```ts
export type ITableData = Array<{ [p: string]: string }>;
export function resolveData(config: Config): null | ITableData;
```
```ts
const matable = Matable.init({
/*...*/
})
.config(/*config*/ [conf_1])
.render("#root");
// 必须执行 render 后才可使用 `resolveData` 方法
const data_01 = matable.resolveData(conf_1);
```
## Select
`Select` 是一个静态类，提供了两个静态函数
```ts
export type SelectMapper = (
key: string,
index: number
) => {
key: string;
val: string;
weight: number;
};
export class Select {
static defaultMap: SelectMapper;
static from(arr: Array, mapper: SelectMapper): ValidSearchMode;
static range(
fromTo: [number, number],
mapper: (n: number) => string
): ValidSearchMode;
}
```
### Select.from
将一个 `string[]` 转为一个 `ValidSearchMode`。
其最直接的应用是实现`数据分类 + 排序`的检索模式。
```ts
const { createMode, Select } = Matable;
const mode = createMode({
DEMO: Select.from(["A", "B", "C"]), // 数据分类 + 排序
});
```
### Select.range
提供一个快速生成序列的函数。
```ts
const { createMode, Select } = Matable;
const mode = createMode({
// 即为 ["1班", "2班", "3班",... ,"16班"]
班级: Select.range([1, 17], (i) => i + " 班"), // 数据分类 + 排序
});
```
# 鸣谢
## Open Source
再次感谢以下的开源项目，没有这些优秀的开源项目，也不可能有`Matable`的诞生
- [vue](https://vuejs.org/)
- [axios](https://github.com/axios/axios)
- [muse-ui](https://muse-ui.org/)
## 打赏
如果您对这个项目感兴趣的话，可以打赏来支持我，反正随缘。
