在離子中創建表格

我需要在離子中創建表格。我想過使用離子網格，但無法達到我想要的效果。我怎樣才能做到這一點？下面是一些圖像相似，我想：在離子中創建表格

enter image description here

我可以利用這一點，但我怎麼能在圖片分割像行？

<div class="list"> 

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

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

    ... 

</div>

來源

2014-10-06 CraZyDroiD

http://ionicframework.com/docs/components/#grid – 2014-10-07 11:46:34

flexbox網格應該做你想做的。你不清楚你遇到了什麼限制，所以很難解決你的具體問題。

這裏有一個工作樣本codepen與第一對夫婦行頭生成你的表：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); 
    } 
});

來源

2015-08-28 15:17:53 jpoveda

如果我只需要表格的外邊框，應該做什麼？ – 2016-01-16 18:49:43

您只需更改css。看到這個codepen：http://codepen.io/anon/pen/gPGzdK – jpoveda 2016-01-16 18:53:21

謝謝老兄！只是我在找什麼 – 2017-10-28 21:24:35

這應該可能是一個評論，但是，我沒有足夠的評論聲望。

我建議你真的用表格（HTML）代替離子行和離子列。單元格的內容太長，看起來不太好。

一個最壞的情況是這樣的： | 10 | 20 | 30 | 40 | | 1 | 2 | 3100 | 41 |

更高的保真度例如叉從@jpoveda

來源

2017-03-01 08:19:05 beenotung

太久內容問題@beenotung可以通過這個CSS類來解決：

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

示例叉從@jpoveda

來源

2017-08-03 09:35:53 Taha

在離子中創建表格

回答

相關問題