如何固定表格元素的位置

How to fix the positions of table elements Angular.js

本文关键字：位置 元素 表格 何固定      更新时间：2023-09-26

我正在使用Angular.js将JSON数据绑定到ng-table。

如果任何值为null，则打乱所有列的位置。我如何修复与列标题的数据?

参见此Plunker: http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

Description应该是null，但是所有的值都向左移动。

或者，如果任何属性的所有值都为空，则隐藏该特定列

为了确定列是否为空，您需要通过迭代数据来创建某种列配置，以查看是否所有行都包含任何标题(对象键)的数据。

然后您可以使用该列配置数组作为<th>和<td>的中继器。

示例配置:

[
  {
    "heading": "Id",
    "display": true
  },
  {
    "heading": "Title",
    "display": true
  },
  {
    "heading": "Description",
    "display": true
  },
  {
    "heading": "Test",
    "display": false
  }
]
HTML 

<thead>
    <tr>
      <th ng-repeat="col in colConfig" ng-if="col.display">{{col.heading}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td   ng-repeat="col in colConfig"  ng-if="col.display">
        {{item[col.heading]}}
      </td>
    </tr>
  </tbody>

config create

  var keys = Object.keys(data[0]);
  function createConfig() {
      var validKeyCounts = {};
      var colConfig;
      keys.forEach(function (key) {
          validKeyCounts[key] = 0;
      })
      data.forEach(function (row, idx) {
          keys.forEach(function (key) {
              if (row.hasOwnProperty(key) && row[key] !== null) {
                  validKeyCounts[key]++;
              }
          })
      });
      colConfig = keys.map(function (key) {
          return {
              heading: key,
              display: validKeyCounts[key] > 0
          }
      });
      return colConfig
  }

我相信这是可以优化的，但这只是一种开始使用所需功能的方式

演示

相关文章：