当前位置:主页 > JavsScript库 > 表格 >

将溢出的表格列折叠成下拉列表 – Podtablejs
栏目分类:表格   发布日期:2021-09-06   浏览次数:

Podtablejs 是一种全新的响应式表格解决方案,当没有足够的空间时,它会自动将溢出的表格列折叠成下拉列表。

使用:

1. 安装并导入 Podtablejs 作为 ES 模块。

# NPM
$ npm i podtable --save

从“podtable”导入{ Podtable};

2. 或者下载包并在页面上包含 podtable.js。

<script src="./dist/podtable.js"></script>

3. 将空th和添加td到您的 HTML 表格中。

<table id="table" class="table" width="100%">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Gender</th>
      ...
      <th></th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td data-grid-colname="Firstname">Mark</td>
      <td data-grid-colname="Lastname">Spencer</td>
      <td data-grid-colname="Gender">Male</td>
      ...
      <td></td>
    </tr>
  </tbody>
</table>

4. 在 HTML 表上初始化 Podtablejs 并完成。

window.addEventListener('DOMContentLoaded', () => {
  new Podtable.Podtable('#table');
})

5. 指定要保留的列数组,这意味着永远不会隐藏以下列中的单元格。

window.addEventListener('DOMContentLoaded', () => {
  new Podtable.Podtable('#table',{
      keepCell: [1, 5] // column 2 and 6
  });
})

6. 如果要对优先级选项中定义的某些单元格执行操作,则为将被隐藏的单元格发出事件。

window.addEventListener('DOMContentLoaded', () => {
  new Podtable.Podtable('#table',{
      event: true,
      priority: [2,4,5],
      method: (event) => {
        let el = document.querySelector('#demo');
         
        if (event.current <= 5 && event.isCurrentShown === false) {
            el.style.display = 'block'
        } else {
            el.style.display = 'none'
        }
      }
  });
})


官方网站:https://github.com/inlogicstudio/podtable

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库