Html 在离子中创建一个表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26215355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
creating a table in ionic
提问by CraZyDroiD
I am in need of creating a table in Ionic. I thought of using Ionic grid but could not achieve what I wanted. How can I do this? Here is an image of something similar to what i want:
我需要在 Ionic 中创建一个表。我想过使用 Ionic 网格，但无法实现我想要的。我怎样才能做到这一点？这是类似于我想要的东西的图像：
I can use this but how can I divide the rows like in the picture?
我可以使用它，但是如何像图片中那样划分行？
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
回答by jpoveda
The flexbox grid should do what you want. You're not clear as to what limitation you ran into, so it's hard to address your specifics.
弹性盒网格应该做你想做的。您不清楚遇到了什么限制，因此很难解决您的具体问题。
Here's a codepen with a working sample that generates your table with the first couple rows and a header: http://codepen.io/anon/pen/pjzKMZ
这是一个带有工作示例的代码笔，它生成带有前几行和标题的表格：http: //codepen.io/anon/pen/pjzKMZ
HTML
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
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
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);
}
});
回答by Beeno Tung
This should probably be a comment, however, I don't have enough reputation to comment.
这可能应该是评论，但是，我没有足够的声誉发表评论。
I suggest you really use the table (HTML) instead of ion-row and ion-col. Things will not look nice when one of the cell's content is too long.
我建议你真正使用表格（HTML）而不是 ion-row 和 ion-col。当单元格的内容之一太长时，事情看起来不太好。
One worse case looks like this:
一种更糟糕的情况如下所示：
| 10 | 20 | 30 | 40 |
| 1 | 2 | 3100 | 41 |
Higher fidelity example fork from @jpoveda
来自@jpoveda 的更高保真度示例 fork
回答by M Fuat NURO?LU
Simply, for me, I used ion-rowand ion-colto achieve it. You can make it more neater by doing some changes by CSS.
简而言之，对我来说，我使用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>
回答by Oswald
In Ionic 2 there's a easier way to do that. See the Ionic Docs.
在 Ionic 2 中有一种更简单的方法来做到这一点。请参阅离子文档。
It is more or less like the following:
它或多或少类似于以下内容：
<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>
回答by Taha
the issue of too long content @beenotung can be resolved by this css class :
@beenotung 内容太长的问题可以通过这个 css 类来解决：
.col{
max-width :20% !important;
}
example fork from @jpoveda
来自@jpoveda 的示例分支
回答by bunny
.html file
.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 file
.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;
}回答by monkey
You should consider using an angular plug-in to handle the heavy lifting for you, unless you particularly enjoy typing hundreds of lines of knarly error prone ion-grid code. Simon Grimm has a cracking step by step tutorial that anyone can follow: https://devdactic.com/ionic-datatable-ngx-datatable/. This shows how to use ngx-datatable. But there are many other options (ng2-table is good).
您应该考虑使用 angular 插件来为您处理繁重的工作，除非您特别喜欢键入数百行容易出错的离子网格代码。Simon Grimm 有一个任何人都可以遵循的破解分步教程：https: //devdactic.com/ionic-datatable-ngx-datatable/。这显示了如何使用 ngx-datatable。但是还有很多其他选择（ng2-table 很好）。
The dead simple example goes like this:
死的简单例子是这样的：
<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>
And the ts:
和 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
}
];
Since the original poster expressed their frustration of how difficult it is to achieve this with ion-grid, I think the correct answer should not be constrained by this as a prerequisite. You would be nuts to roll your own, given how good this is!
由于原发帖者表达了他们对使用 ion-grid 实现这一目标的困难程度感到沮丧，我认为正确答案不应受此限制作为先决条件。考虑到这有多好，你会疯狂地推出自己的！
回答by zahid mohammed
css
css
.table:nth-child(2n+1) {
background-color: whatever color !important;
}
html
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>
row 2
第 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>
