0.1.0 • Published 21 days ago

@aurouscia/table-label-enhance v0.1.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
21 days ago

sorting, searching on existing html table elements without any dependency.
向html页面上已有的table元素添加排序,搜索,求和,平均数功能,无依赖项。

English: see README.en.md

preview.png

用法

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 对象被构造时,表格的数据部分(由构造函数第二参数设置)的上方会新出现行,里面有排序按钮和搜索输入框。
数据部分必须每行的单元格数量一致,不能有单元格合并,否则模块将拒绝执行。

试用

  1. 克隆本项目
  2. npm install (稍微有点大,有dom单元测试)
  3. npm run preview
  4. 访问显示的url

关于搜索

如果启用搜索功能:

  • 单元格为字符串
    检查搜索词在不在单元格的值中(大小写不敏感)
  • 单元格为数字
    • 准确值
      直接搜索12=12==12将准确匹配
    • 大于小于
      搜索>12<12,将找出所有该列>12 或 <12的行
    • 大于等于,小于等于
      搜索>=12<=12
    • 模糊搜索
      搜索~=12~12,将找出所有>11且<13的数(与目标距离<1)
0.1.0

21 days ago

0.0.3

2 months ago

0.0.2

2 months ago

0.0.1

2 months ago

0.0.0

2 months ago