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

可选择和可排序的JSON到表生成器​​ - Tidy Table
栏目分类:表格   发布日期:2021-09-13   浏览次数:

一个小巧而快速的 JavaScript 插件,可从您提供的 JS/JSON 数据生成 HTML 表格,并支持 Sortable 和 Checkable。

使用:

1. 在文档中加载 Tidy Table 插件的文件。

<link rel="stylesheet" href="tidy-table.min.css" />
<script src="tidy-table.min.js"></script>

2. 创建一个容器来存放桌子。

<div id="container"></div>

3. 初始化 Tidy Table 并定义您的表格数据,如下所示:

document.getElementById('container')
  .TidyTable({
    // 选项
  },
  {
    columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'],
    columnValues: [
      ['1', 'Java', '17.479%', '-0.29%', 'A'],
      ['2', 'C', '16.976%', '+1.15%', 'A'],
      ['3', 'C#', '8.781%', '+2.55%', 'A'],
      ['4', 'C++', '8.063%', '-0.72%', 'A'],
      ['5', 'Objective-C', '6.919%', '+3.91%','A']
    ],
});

4. 向表格行添加复选框。默认值:false

document.getElementById('container')
  .TidyTable({
    enableCheckbox: true
  });

5. 启用操作菜单。默认值:false

document.getElementById('container')
  .TidyTable({
    enableMenu: true,
  },
  {
    columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'],
    columnValues: [
      ['1', 'Java', '17.479%', '-0.29%', 'A'],
      ['2', 'C', '16.976%', '+1.15%', 'A'],
      ['3', 'C#', '8.781%', '+2.55%', 'A'],
      ['4', 'C++', '8.063%', '-0.72%', 'A'],
      ['5', 'Objective-C', '6.919%', '+3.91%','A']
    ],
    menuOptions: [
      ['- Action -', null],
      ['Callback 1', { callback: doSomething1 }],
      ['Callback 2', { callback: doSomething2 }]
    ],
});

6. 启用响应式布局。默认值:false

document.getElementById('container')
  .TidyTable({
    responsive: true
  });

7. 确定是否反转排序方向。默认值:false。

document.getElementById('container')
  .TidyTable({
    reverseSortDir: true
  });

8. 后处理表格数据。

document.getElementById('container')
  .TidyTable({
    enableCheckbox: true,
    enableMenu:     true,
    reverseSortDir: true,
    responsive:     true
  },
  {
    columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'],
    columnValues: [
      ['1', 'Java', '17.479%', '-0.29%', 'A'],
      ['2', 'C', '16.976%', '+1.15%', 'A'],
      ['3', 'C#', '8.781%', '+2.55%', 'A'],
      ['4', 'C++', '8.063%', '-0.72%', 'A'],
      ['5', 'Objective-C', '6.919%', '+3.91%','A']
    ],
    menuOptions: [
      ['- Action -', null],
      ['Callback 1', { callback: doSomething1 }],
      ['Callback 2', { callback: doSomething2 }]
    ],
    postProcess: {
      table:  doSomething3,
      column: doSomething4,
      menu:   doSomething5
    }
});
function doSomething1(rows) {
  alert('callback1(rows=' + rows.length + ')');
}
function doSomething2(rows) {
  alert('callback2(rows=' + rows.length + ')');
}
// 后处理 DOM 元素。
function doSomething3(table) {
  table.addEventListener('hover', function() {
    alert('post-process(table)');
  });
}
function doSomething4(col) {
  col.addEventListener('click', function() {
    alert('post-process(value=' + this.textContent + ')');
  });
}
function doSomething5(menu) {
  menu.addEventListener('change', function() {
    //alert('post-process(menu)');
  });
}

官方网站:https://github.com/nuxy/Tidy-Table

相关热词: 表格表格生成器

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