web-dev-qa-db-fra.com

créer une table en ionique

J'ai besoin de créer une table dans Ionic. Je pensais utiliser une grille ionique mais je ne pouvais pas atteindre ce que je voulais. Comment puis-je faire ceci? Voici une image de quelque chose de similaire à ce que je veux:

enter image description here

Je peux l'utiliser mais comment puis-je diviser les lignes comme sur la photo?

<div class="list">

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

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

  ...

</div>
html5angularjsionic-framework
28
CraZyDroiD

La grille de la boîte souple doit faire ce que vous voulez. Vous ne savez pas quelle limite vous avez rencontrée, il est donc difficile de répondre à vos besoins.

Voici un codepen avec un échantillon de travail qui génère votre table avec les deux premières lignes et un en-tête: 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);
    }
});
49
jpoveda

Cela devrait probablement être un commentaire, cependant, je n'ai pas assez de réputation pour commenter.

Je suggère que vous utilisiez vraiment le tableau (HTML) au lieu de ion-row et ion-col . Les choses ne sembleront pas agréables si le contenu d'une cellule est trop long.

Un cas pire ressemble à ceci:

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

Exemple de fidélité plus haute fork de @jpoveda

7
Beeno Tung

Simplement, pour moi, j’ai utilisé ion-row et ion-col pour y parvenir. Vous pouvez le rendre plus net en faisant quelques modifications par 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>
1
M Fouad Kajj

le problème du contenu trop long @beenotung peut être résolu par cette classe css:

.col{
  max-width :20% !important;
}

exemple fork de @jpoveda

1
Taha

Dans Ionic 2, il existe un moyen plus simple de le faire. Voir le Ionic Docs .

Cela ressemble plus ou moins à ce qui suit:

<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>
0
Oswald