Создание таблицы в ионной
Мне нужно создать таблицу в Ionic. Я думал об использовании ионической сетки, но не мог добиться того, чего хотел. Как я могу это сделать? Вот изображение чего-то похожего на то, что я хочу:
![enter image description here]()
Я могу использовать это, но как я могу разделить строки, как на картинке?
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
Ответы
Ответ 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);
}
});
Ответ 2
Вероятно, это должен быть комментарий, однако у меня недостаточно репутации, чтобы комментировать.
Я предлагаю вам действительно использовать таблицу (HTML) вместо ion-row и ion-col. Вещи не будут выглядеть хорошо, когда один из содержимого ячейки слишком длинный.
Один худший случай выглядит так:
| 10 | 20 | 30 | 40 |
| 1 | 2 | 3100 | 41 |
Пример с более высокой точностью воспроизведения от @jpoveda
Ответ 3
В Ionic 2 есть более простой способ сделать это. Смотрите Ионные Документы.
Это более или менее похоже на следующее:
<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>
Ответ 4
Просто для себя я использовал 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>
Ответ 5
проблема слишком длинного контента @beenotung может быть разрешена этим классом css:
.col{
max-width :20% !important;
}
пример fork из @jpoveda
Ответ 6
![enter image description here]()
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;
}
Ответ 7
Вам следует подумать об использовании angular подключаемого модуля, чтобы справиться с тяжелой работой, если вам не особенно нравится набирать сотни строк кода, подверженного ошибкам, с ионно-сеточным кодом. У Саймона Гримма есть пошаговое руководство по взлому, которым может следовать любой:
https://devdactic.com/ionic-datatable-ngx-datatable/. Это показывает, как использовать ngx-datatable. Но есть много других вариантов (ng2-таблица хороша).
Мёртвый простой пример выглядит так:
<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>
И тс:
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
}
];
Поскольку первоначальный плакат выразил разочарование по поводу того, насколько трудно добиться этого с помощью ионной сетки, я думаю, что правильный ответ не должен ограничиваться этим в качестве предварительного условия. Вы были бы сумасшедшими, чтобы свернуть свое собственное, учитывая, насколько это хорошо!
Ответ 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>
