tạo một bảng trong ionic

Tôi cần tạo một bảng trong Ionic. Tôi nghĩ đến việc sử dụng lưới Ionic nhưng không thể đạt được những gì tôi muốn. Tôi có thể làm cái này như thế nào? Dưới đây là hình ảnh của một cái gì đó tương tự như những gì tôi muốn:tạo một bảng trong ionic

enter image description here

tôi có thể sử dụng điều này, nhưng làm thế nào tôi có thể chia các hàng như trong hình?

<div class="list"> 

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

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

    ... 

</div>

Nguồn

2014-10-06 CraZyDroiD

http://ionicframework.com/docs/components/#grid –

Lưới cuộn nên làm những gì bạn muốn. Bạn không rõ ràng về những hạn chế mà bạn gặp phải, vì vậy thật khó để giải quyết các chi tiết cụ thể của bạn.

Dưới đây là một codepen với một mẫu làm việc mà tạo ra bảng của bạn với vài hàng đầu tiên và một tiêu đề: 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); 
    } 
});

Nguồn

2015-08-28 15:17:53 jpoveda

Điều gì sẽ được thực hiện nếu tôi chỉ cần một đường viền ngoài cho bảng? –

Bạn chỉ cần thay đổi css. Xem codepen này: http://codepen.io/anon/pen/gPGzdK – jpoveda

Cảm ơn dude !!!! Chỉ cần những gì tôi đang tìm kiếm –

Điều này có lẽ nên là nhận xét, tuy nhiên, tôi không có đủ danh tiếng để nhận xét.

Tôi đề nghị bạn thực sự sử dụng bảng (HTML) thay vì ion-row và ion-col. Mọi thứ sẽ không đẹp với một trong các nội dung của ô quá dài.

Một trường hợp tồi tệ hơn trông như thế này: | 10 | 20 | 30 | 40 | | 1 | 2 | 3100 | 41 |

cao độ chính xác ví dụ ngã ba từ @jpoveda

Nguồn

2017-03-01 08:19:05 beenotung

vấn đề nội dung quá dài @beenotung có thể được giải quyết bằng lớp css này:

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

ví dụ: ngã ba từ @jpoveda

Nguồn

2017-08-03 09:35:53 Taha

tạo một bảng trong ionic

Trả lời

Các vấn đề liên quan