css - 如何制作如图所示的表格？

Question

我正在尝试在 ionic 框架中制作表格或 GridView 。我能够制作该表格，但它看起来与我需要的不一样，请检查图像中的表格 View 。

这是我的代码。实际上我还有标题“Invoice#”和“account Name”，它们应该变成背景灰色。实际上我看到如果我们在行中使用两列，它占用窗口宽度的 50% 50%。但是当有 3 列列占用 33.33% 宽度但在我的情况下，它们无法占据我做错的地方实际上我正在动态生成列现在它是两个但以后可能是五个。我需要它们占用总宽度相等的空间.是否可以在最后一列中添加“+”？

这是代码

<div class="row">
 <div ng-repeat="d in data | filter:{checked: true}">
     <div class="col">{{d.label}}</div>
     <div  class="row" ng-repeat="column in displayData">
      <div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
    </div>
 </div>
 </div>

http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview

Answer 1

这是您的 Plunker 的工作版本。要查看添加和删除的列，请单击标题右侧的齿轮图标。

Plunker

要使网格布局正确，您不能嵌套重复。这意味着您必须稍微更改 ng-show 才能直接观察数据模型上的检查值。

在最基本的形式中，它看起来像这样:

<div class="row">
  <div class="col" ng-repeat="d in data | filter:{checked: true}">{{d.label}}</div>
</div>
<div class="row" ng-repeat="column in displayData | filter: query">
  <div class="col" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
</div>

您会注意到 Ionic 会自动处理使网格全宽，并且在正确布局时，它会自动均匀地间隔您的列。那是因为它使用了 flexbox。这也允许您告诉特定的列他们应该使用多少空间。其余的列自然会均匀分布以占据剩余的空间。在演示中，我为齿轮和详细信息按钮添加了一列，并为它们提供了 col-10 类。这将强制这些列占据屏幕宽度的 10%。有关网格在 Ionic 中如何工作的更多信息，请阅读文档 here .

我还注意到您似乎有很多功能，您可以在这些功能中尝试执行一些操作，例如管理检查值的更新方式。别那样做。 这就是 AngularJS 和 ng-model 指令的美妙之处。如果范围内不存在该属性，Angular 会为您创建它，如果它确实存在，它只会更新它。例如，请注意我通过设置 ng-model 使您的搜索工作变得多么简单值并将其传递给过滤器。我不必创建 $scope.query，因为 ngModel 会帮我做。同样，我从您的 Controller 中删除了所有函数和对“已检查”值的引用，并且一切正常，因为 ngModel 会自动将已检查属性添加到数据模型中。