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

JavaScript 中的简易电子表格式数据表 – spreadsheet.js
栏目分类:表格   发布日期:2021-10-22   浏览次数:

只是另一个电子表格 JavaScript 库,可用于在数据表中添加/删除/编辑/显示数据,就像电子表格一样。

更多功能:

  • 使用 Web 存储在页面或访问之间保留数据。

  • 使用现有数据填充电子表格。

  • 回调函数。

使用:

1. 下载 zip 并在页面上包含电子表格.js JavaScript 库。

<script src="Spreadsheet.js"></script>

2. 为电子表格创建一个容器。

<div id="example"></div>

3. 创建一个新的电子表格并定义表格标题如下:

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    // configs here
  }
);

4. 向电子表格添加数据。

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    data: [
      ['TD', '10000', '1000000', '34535', 'Toronto', '2021-04-06'],
      ['RBC', '50000', '325345', '76868', 'Markham', '2020-06-22'],
      ['AmEx', '10000000', '5644', '76054', 'New York City', '2020-07-06'],
    ],
  }
);

5. 指定行数。默认值:1。

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    rowCount: 4
  }
);

6. 确定是否使用本地存储在页面或访问之间持久化数据。默认值:false。

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    persistent: true
  }
);

7. 当用户按下“提交”按钮时执行回调函数。

const example = Spreadsheet('#example');
example.createSpreadsheet(
  {
    bank: 'text',
    'cash ($)': 'number',
    'credit debt ($)': 'number',
    'investment portfolio ($)': 'number',
    city: 'text',
    'dated opened': 'date',
  },
  {
    submitCallback: (tableArray) =>
      alert(`Your table is currently ${tableArray.length} rows long!`),
    }
);

8. 为单元格值添加自定义颜色。

example.addCellStyle(cellValue, color);
// or
example.addCellStyleSheet({
  cellValue1: color1,
  cellValue2: color2,
  // ...
})


官方网站:https://github.com/HuIsJason/spreadsheet.js

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