在离子中创建一个表

Posted 2023-03-05

技术标签:

【中文标题】在离子中创建一个表【英文标题】：creating a table in ionic 【发布时间】：2014-11-30 15:51:58 【问题描述】：

我需要在 Ionic 中创建一个表。我想过使用 Ionic 网格，但无法实现我想要的。我怎样才能做到这一点？这是与我想要的类似的图像：

我可以使用这个，但是如何像图片中那样划分行？

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

【问题讨论】：

ionicframework.com/docs/components/#grid 【参考方案1】：

flexbox 网格应该做你想做的。您不清楚自己遇到了什么限制，因此很难解决您的具体问题。

这是一个带有工作示例的代码笔，它可以生成带有前几行和标题的表格：http://codepen.io/anon/pen/pjzKMZ

HTML

<html ng-app="ionicApp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
 </head>

  <body ng-controller="MyCtrl as ctrl">
    <ion-header-bar class="bar-stable">
        <h1 class="title">Service Provider Details</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row header">
          <div class="col">Utility Company Name</div>
          <div class="col">Service Code</div>
          <div class="col">Pay Limit</div>
          <div class="col">Account Number to Use</div>
          <div class="col"></div>
        </div>
        <div class="row" ng-repeat="data in ctrl.data">
          <div class="col">data.name</div>
          <div class="col">data.code</div>
          <div class="col">LK data.limit</div>
          <div class="col">data.account</div>
          <div class="col"><button class="button" ng-click="ctrl.add($index)">Add</button></div>
        </div>
    </ion-content>
  </body>

</html>

CSS

body 
    cursor: url('http://ionicframework.com/img/finger.png'), auto;


.header .col 
    background-color:lightgrey;


.col 
    border: solid 1px grey;
    border-bottom-style: none;
    border-right-style: none;


.col:last-child 
    border-right: solid 1px grey;


.row:last-child .col 
    border-bottom: solid 1px grey;

Javascript

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) 

    var ctrl = this;

    ctrl.add = add;
    ctrl.data = [
        
            name: "AiA",
            code: "AI101",
            limit: 25000,
            account: "Life Insurance"
        ,
        
            name: "Cargills",
            code: "CF001",
            limit: 30000,
            account: "Food City"
        
    ]

    ////////
    function add(index) 
        window.alert("Added: " + index);
    
);

【讨论】：

如果我只需要表格的外边框怎么办？ Ion 组件在应用程序的布局中发挥着重要作用。建议您尽可能多地使用。在这种情况下，我会使用 ion-grid 来构建表格。【参考方案2】：

这应该是评论，但是，我没有足够的声誉来评论。

我建议你真的使用表格 (HTML) 而不是 ion-row 和 ion-col。当其中一个单元格的内容太长时，事情看起来会不太好。

一个更糟糕的情况是这样的：

| 10 | 20 | 30 | 40 |
| 1 | 2 | 3100 | 41 |

来自@jpoveda的更高保真度示例分叉

【讨论】：

如果是表格数据，请使用 HTML 表格。它比一堆 div 更容易访问。如果您需要在较小的断点处将其转换为列表，则可以使用真实表来完成。使用 HTML 表格不利于布局，但不利于表格数据。【参考方案3】：

这个css类可以解决@beenotung内容过长的问题：

.col
  max-width :20% !important;

来自@jpoveda的示例分叉

【讨论】：

【参考方案4】：

在 Ionic 2 中，有一种更简单的方法可以做到这一点。请参阅Ionic Docs。

差不多是这样的：

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col>
      2 of 3
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

【讨论】：

【参考方案5】：

简单地说，对我来说，我使用ion-row 和ion-col 来实现它。您可以通过 CSS 进行一些更改来使其更整洁。

<ion-row style="border-bottom: groove;">
      <ion-col col-4>
      <ion-label >header</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >header</ion-label>
    </ion-col>
      <ion-col col-4>
      <ion-label >header</ion-label>
    </ion-col>
  </ion-row>
  <ion-row style="border-bottom: groove;">
      <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >02/02/2018</ion-label>
    </ion-col>
      <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
  </ion-row>
  <ion-row style="border-bottom: groove;">
      <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >02/02/2018</ion-label>
    </ion-col>
      <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
  </ion-row>
  <ion-row >
      <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >02/02/2018</ion-label>
    </ion-col>
      <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
  </ion-row>

【讨论】：

【参考方案6】：

.html 文件

<ion-card-content>
<div class='summary_row'>
      <div  class='summarycell'>Header 1</div>
      <div  class='summarycell'>Header 2</div>
      <div  class='summarycell'>Header 3</div>
      <div  class='summarycell'>Header 4</div>
      <div  class='summarycell'>Header 5</div>
      <div  class='summarycell'>Header 6</div>
      <div  class='summarycell'>Header 7</div>

    </div>
    <div  class='summary_row'>
      <div  class='summarycell'>
        Cell1
      </div>
      <div  class='summarycell'>
          Cell2
      </div>
        <div  class='summarycell'>
            Cell3
          </div>

      <div  class='summarycell'>
        Cell5
      </div>
      <div  class='summarycell'>
          Cell6
        </div>
        <div  class='summarycell'>
            Cell7
          </div>
          <div  class='summarycell'>
              Cell8
            </div>
    </div>

.scss 文件

.row
    display: flex;
    flex-wrap: wrap;
    width: max-content;

.row:first-child .summarycell
    font-weight: bold;
    text-align: center;

.cell
    overflow: auto;
    word-wrap: break-word;
    width: 27vw;
    border: 1px solid #b3b3b3;
    padding: 10px;
    text-align: right;

.cell:nth-child(2)

.cell:first-child
    width:41vw;
    text-align: left;

【讨论】：

html 和 scss 类完全不匹配。而且 sn-p 不工作【参考方案7】：

您应该考虑使用 Angular 插件来为您处理繁重的工作，除非您特别喜欢输入数百行易出错的离子网格代码。 Simon Grimm 有一个任何人都可以学习的分步教程： https://devdactic.com/ionic-datatable-ngx-datatable/。这显示了如何使用 ngx-datatable。但是还有很多其他的选择（ng2-table 很好）。

死的简单例子是这样的：

<ion-content>
  <ngx-datatable class="fullscreen" [ngClass]="tablestyle" [rows]="rows" [columnMode]="'force'" [sortType]="'multi'" [reorderable]="false">
    <ngx-datatable-column name="Name"></ngx-datatable-column>
    <ngx-datatable-column name="Gender"></ngx-datatable-column>
    <ngx-datatable-column name="Age"></ngx-datatable-column>
  </ngx-datatable>
</ion-content>

还有 ts：

rows = [
    
      "name": "Ethel Price",
      "gender": "female",
      "age": 22
    ,
    
      "name": "Claudine Neal",
      "gender": "female",
      "age": 55
    ,
    
      "name": "Beryl Rice",
      "gender": "female",
      "age": 67
    ,
    
      "name": "Simon Grimm",
      "gender": "male",
      "age": 28
    
  ];

由于原发帖人表达了他们对使用 ion-grid 实现这一目标的难度感到沮丧，我认为正确答案不应该以此为先决条件。考虑到这有多好，你会疯了！

【讨论】：

【参考方案8】：

css

.table:nth-child(2n+1) 
    background-color: whatever color !important;

html

    <ion-row class="nameClass" justify-content-center align-items-center style='height: 100%'>

   <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div text-center>
                <strong>name</strong>
            </div>
        </ion-col>
    </ion-row>

第 2 行

        <ion-col >
            <div>
            name
            </div>

        </ion-col>
        <ion-col >
            <div>
            name
            </div>

        </ion-col>
        <ion-col >
            <div>
               name
            </div>

        </ion-col>
        <ion-col>
            <div>
               name
            </div>

        </ion-col>
        <ion-col>
            <div>
                <button>name</button>
            </div>

        </ion-col>

【讨论】：

【参考方案9】：

这就是我使用它的方式。这很简单，而且效果很好.. 离子html：

  <ion-content>
 

  <ion-grid class="ion-text-center">

    <ion-row class="ion-margin">
      <ion-col>
        <ion-title>
          <ion-text color="default">
            Your title remove if don't want use
          </ion-text>
        </ion-title>
      </ion-col>
    </ion-row>

    <ion-row class="header-row">
      <ion-col>
        <ion-text>Data</ion-text>
      </ion-col>

      <ion-col>
        <ion-text>Cliente</ion-text>
      </ion-col>

      <ion-col>
        <ion-text>Pagamento</ion-text>
      </ion-col>
    </ion-row>


    <ion-row>
      <ion-col>
        <ion-text>
            19/10/2020
        </ion-text>
      </ion-col>

        <ion-col>
          <ion-text>
            Nome
          </ion-text>
        </ion-col>
  
        <ion-col>
          <ion-text>
            R$ 200
          </ion-text>
        </ion-col>
    </ion-row>

  </ion-grid>
</ion-content>

CSS：

.header-row 
  background: #7163AA;
  color: #fff;
  font-size: 18px;


ion-col 
  border: 1px solid #ECEEEF;

Result of the code

【讨论】：

以上是关于在离子中创建一个表的主要内容，如果未能解决你的问题，请参考以下文章

如何在打开游标之前在存储过程中创建一个临时表？