0.1.0 • Published 21 days ago
@aurouscia/table-label-enhance v0.1.0
sorting, searching on existing html table elements without any dependency.
向html页面上已有的table元素添加排序,搜索,求和,平均数功能,无依赖项。
English: see README.en.md
用法
npm install @aurouscia/table-label-enhance
//引入本模块
import { TableLabelEnhancer } from '@aurouscia/table-label-enhance';
//获取表格dom对象
const target = document.getElementById('target');
//启动
const obj = new TableLabelEnhancer(target,{noSortCols:[2],areaToBottom:1});
// 第二参数为设置对象
// areaToTop: 数据是从第几行开始的(0为第一行,1为第二行) (默认为1)
// areaToBottom: 数据是在倒数第几行结束的(0为最后一行,1为倒数第二行) (默认为0)
// useSort: 使用排序功能 (默认为true)
// useSearch: 使用搜索功能 (默认为true)
// noSortCols: 哪些列不要排序功能 (默认为[])
// noSearchCols: 哪些列不要搜索功能 (默认为[])
// 关于启用求和、平均数的更多设置见源代码/demo/index.html文件
//引入自带样式(可选)
import '@aurouscia/table-label-enhance/styles.css'
会发生什么?
当 TableLabelEnhancer
对象被构造时,表格的数据部分(由构造函数第二参数设置)的上方会新出现行,里面有排序按钮和搜索输入框。
数据部分必须每行的单元格数量一致,不能有单元格合并,否则模块将拒绝执行。
试用
- 克隆本项目
- npm install (稍微有点大,有dom单元测试)
- npm run preview
- 访问显示的url
关于搜索
如果启用搜索功能:
- 单元格为字符串
检查搜索词在不在单元格的值中(大小写不敏感) - 单元格为数字
- 准确值
直接搜索12
,=12
,==12
将准确匹配 - 大于小于
搜索>12
,<12
,将找出所有该列>12 或 <12的行 - 大于等于,小于等于
搜索>=12
,<=12
- 模糊搜索
搜索~=12
,~12
,将找出所有>11且<13的数(与目标距离<1)
- 准确值