@shawroger/easytable
v1.2.8
Published
A easy and cool tool to transform a csv file into webpage
Downloads
18
Readme
EasyTable
EasyTable是一个高效便利的 CSV文件转网页的开源工具。
EasyTable支持自定义配置，支持各种检索模式，使用简单方便。
EasyTable是一个开源的项目，其使用了如下的开源项目
快速开始
git clone https://github.com/shawroger/easytable.git或者直接在一个目录准备一个data.csv和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="https://unpkg.com/@shawroger/easytable/dist/easytable.css"
rel="stylesheet"
/>
<title>EasyTable Demo</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/@shawroger/easytable/dist/easytable.js"></script>
<script>
EasyTable.init()
.add({
index: true, // 使用序号
footer: true, //显示页脚
target: "#root", //渲染的 div
data: "./data.csv", // 读取的文件路径
title: "EasyTable Demo", // 标题
config: [
{
able: true,
mode: null,
label: "列的标题",
},
// .. more columns
],
})
.render("#root");
</script>
</body>
</html>修改文件
默认的读取的CSV文件路径
开发模式
/public/data.csv部署模式
/data.csv
张三,20,北京
李四,25,上海本地运行
npm start打包部署
npm run build最新特性
EasyTable 已经支持传入数组类型配置，此时将启用数据源切换功能。
实例方法
所有的实例方法都支持链式操作
init
创建一个EasyTable实例
add
添加一个一个EasyTable的数据
render
渲染到指定的节点
数据配置
data
csv: string;配置项data为EasyTable读取的CSV文件的路径，默认为./data.csv(相对于index.html的路径)，可以为远程跨越资源。
如果传入的数据本身就是json格式，EasyTable将直接渲染出来。
<script>
EasyTable.init()
.add({
index: true, // 使用序号
footer: true, //显示页脚
target: "#root", //渲染的 div
data: "./data.csv", // 读取的文件路径
title: "EasyTable Demo", // 标题
config: [
{
able: true,
mode: null,
label: "列的标题",
sort: true,
},
],
})
.render("#root");
</script>title
title: string;title 是数据表的标题，如果不设置的话，默认为网页的标题 document.title
index
index: boolean;如果想要额外渲染一行序号，可以在配置index为true，默认为不显示序号
<script>
EasyTable.init().add({
// ...more configs
index: true
}.render("#root");
</script>target
footer: string;选择要渲染的 DIV，默认为#root标记。
footer
footer: boolean;控制是否显示默认页脚，默认为true，即显示页脚。
各列项
EasyTable还可以对每一列进行配置，关于每列的配置项在config数组中修改，切记config数组长度要与列的总数相等，除非是空数组选择默认配置，不然会报错。
able
able: boolean;如果想忽略某一列的渲染，可以在配置able项为false，如果不设置或设置为空数组，将渲染所有列。
<script>
EasyTable.init()
.add({
// ...more configs
config: [
{
able: true,
label: "我会渲染出来",
},
{
able: false,
label: "我不会被渲染",
},
],
})
.render("#root");
</script>sort
sort: boolean;如果想开启某一列的排序功能，可以在配置sort项为true。
label
label: string;label 是数据表每一列的标题，如果不配置的话，默认读取 CSV 文件的第 1 行。
<script>
EasyTable.init()
.add({
// ...more configs
config: [
{
label: "第1列的标题",
},
{
label: "第2列的标题",
},
],
})
.render("#root");
</script>mode
mode:
null | // 不检索
string | // 字符匹配模式 | 字符全等模式
Array<string> | // 列表匹配模式
Array<{ key: string; val: string }> //同上mode 规定了数据表每一列的检索方式，如果不设置的话，默认不开启检索模式。
mode的配置项看似复杂，不过每种检索方式只对应一种描述，所以操作起来并不困难。
不检索模式
<script>
EasyTable.init()
.add({
// ...more configs
config: [
{
able: true,
label: "不检索",
mode: null,
},
{
able: false,
label: "依然不检索",
mode: null,
},
],
})
.render("#root");
</script>将某一列设置为null，该列就不会开启检索功能。
字符匹配模式
<script>
EasyTable.init()
.add({
// ...more configs
config: [
{
able: true,
label: "不检索",
mode: null,
},
{
able: true,
label: "字符匹配",
mode: "",
},
],
})
.render("#root");
</script>将某一列设置为字符串格式，该列就会开启字符匹配检索模式，即该列元素包含检索内容为符合条件，这也是默认配置。
字符全等模式
<script>
EasyTable.init().add({
// ...more configs
config: [{
able: true,
label: "不检索",
mode: null
},{
able: true
label: "字符匹配",
mode: ""
}，{
able: true,
label: "字符全等",
mode: "[=]"
}]
}).render("#root");
</script>将某一列设置为字符串格式且值为[=]，该列就会开启字符全等检索模式，即该列元素全等于检索内容为符合条件。
列表匹配模式
将某一列设置为Array<string>或者Array<{ key: string; val: string }>类型，该列就会列表匹配模式，EasyTable会渲染出一个下拉列表进行检索。
如何配置下拉列表
如果您的列表显示内容和检索内容相同 ，直接在该列配置一项字符串数组即可。
<script>
EasyTable.init().add({
// ...more configs
config: [{
able: true,
label: "姓名",
mode: ""
},{
able: true,
label: "年龄",
mode: true
}，{
able: true,
label: "住址"
mode: ["北京", "上海", "广州"]
}]
}).render("#root");
</script>如果您的列表显示内容和检索内容不相同，则该列配置包含对象key和val的数组即可。
<script>
EasyTable.init().add({
// ...more configs
config: [{
able: true,
label: "姓名",
mode: ""
},{
able: true,
label: "年龄",
mode: true
}，{
able: true,
label: "住址"
mode: [
{ val: "BJ", key:"北京" },
{ val: "SH", key:"上海" },
{ val: "GZ", key: "广州" }
]
}]
}).render("#root");
</script>钩子函数
onloadData
onloadData函数钩子在数据初次加载时调用，暴露当前检索模式的数据。
onChangeSearch
onChangeSearch函数钩子在检索变动时(如切换检索、输入改变)调用，暴露当前检索模式的信息和符合检索内容的数据。
onChangePage
onChangePage函数钩子在换页翻页调用，暴露当前切换到的页数。
onChangeConfig
onChangeConfig页面表格数据变化时调用，暴露此时页面数据数组。
鸣谢
Open Source
再次感谢以下的开源项目，没有这些优秀的开源项目，也不可能有EasyTable的诞生
打赏
如果您对这个项目感兴趣的话，可以打赏来支持我，反正随缘。