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

从JSON生成可过滤的数据表 - modern-table
栏目分类:表格   发布日期:2021-08-26   浏览次数:

JavaScript 库中的现代表格构建器,可帮助您在可过滤的数据表中呈现 JSON 数据。

使用:

1. 下载并加载文档中所需的 JavaScript 和 CSS 文件。

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

2. 在 JSON 文件中定义表格数据。

// data.json
[
  {
    "id": 1,
    "rpt_date": "2018-08-01",
    "new_customers": 147,
    "revenue": 27038,
    "cogs": 9833,
    "profit": 17205,
    "profit_margin": 0.636327
  },
  ...
]

3. 加载Moment.js 库以格式化日期和时间。可选的。

<script src="/path/to/moment.min.js"></script>

4. 加载format-intl-number 库来格式化数字。可选的。

<script src="/path/to/format-intl-number.js"></script>

5. 创建一个容器来保存数据表。

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

6. 根据您提供的 JSON 数据生成基本数据表。

const sampleTable = new ModernTable(
   
      // 容器 ID
      'table-container',
   
      // 表 ID
      'sample-table',
   
      // JSON URL
      '/path/to/data.json',
   
      // 配置
      {
        // 选项在这里
      }
         
);

7. 使用以下选项配置数据表。

  • tableClasses:将类作为单个字符串输入,就像在类属性中输入一样。

  • tableCaption:用于指定表格标题的字符串。

  • tableFooter:用于指定表格页脚的字符串。

  • enableSearch:布尔值以启用使用搜索框。

  • searchClasses:要在搜索元素上使用的类。

  • colConfig:列配置对象。键是列名。

  • colConfig.colName:模型中要为其设置选项的列的名称。

  • colConfig.colName.format:列格式:'date-us'、'number-grouped'、'number-ungrouped'、'currency-us'、'percent'。

  • colConfig.colName.dateSource:源数据的日期格式。

  • colConfig.colName.dateDisplay:日期显示的格式。

  • colConfig.colName.numDecimals:要显示的小数位数。

  • colConfig.colName.alignment:单元格对齐方式:左、中、右。

const sampleTable = new ModernTable(
   
      // 容器标识
      'table-container',
   
      // 表ID
      'sample-table',
   
      // JSON URL
      '/path/to/data.json',
   
      // 配置
      {
        tableClasses: 'table table-bordered table-striped table-hover table-sticky table-sm',
        tableCaption: 'Sample Sales Data',
        searchClasses: 'form-control mb-2 w-25 float-right',
        colConfig: {
          'rpt_date': {
            'format': 'date-us',
            'dateFrom': 'YYYY-MM-DD',
            'dateTo': 'MM/DD/YY',
            'colTitle': 'Report Date'
          },
          'new_customers': {
            'format': 'number-grouped',
            'alignment': 'right'
          },
          'revenue': {
            'format': 'currency-us',
            'alignment': 'right'
          },
          'cogs': {
            'format': 'currency-us',
            'alignment': 'right'
          },
          'profit': {
            'format': 'currency-us',
            'alignment': 'right'
          },
          'profit_margin': {
            'format': 'percent',
            'numDecimals': 1,
            'alignment': 'right'
          }
        }
      }
   
);


官方网站:https://github.com/simplenotsimpler/modern-table

相关热词: ModernTable数据表过滤

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