【发布时间】：2017-03-28 12:52:38
【问题描述】：
找不到任何使用angular2-data-table库的教程在这里：https://github.com/swimlane/angular2-data-table
文档似乎缺少简单的示例。
谁能给我一个在angular2中使用数据表的简单例子
【问题讨论】：
标签： angular angular2-template angular2-directives
【发布时间】：2017-03-28 12:52:38
【问题描述】：
出于这个确切原因，我不建议使用该库。我已经工作了几个星期，试图在一个项目中使用它，但由于缺乏文档，它几乎无法使用。
话虽如此，这里是一个相对简单的例子。这使用 Angular2 Quickstart 作为基础，我所做的只是通过 npm 添加 angular2-data-table。您需要从 Github 获取 company.json 并将其放在项目的根目录中。
package.json
{
"name": "liw-reports",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT"
}
],
"dependencies": {
"@angular/common": "~2.1.2",
"@angular/compiler": "~2.1.2",
"@angular/core": "~2.1.2",
"@angular/forms": "~2.1.2",
"@angular/http": "~2.1.2",
"@angular/platform-browser": "~2.1.2",
"@angular/platform-browser-dynamic": "~2.1.2",
"@angular/router": "~3.1.2",
"@angular/upgrade": "~2.1.2",
"angular2-data-table": "^1.4.1",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.41",
"zone.js": "^0.6.26"
},
"devDependencies": {
"@types/core-js": "^0.9.7",
"@types/node": "^6.0.46",
"concurrently": "^3.1.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.9"
}
}
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function(global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'angular2-data-table': 'npm:angular2-data-table/release/index.js',
// other libraries
'rxjs': 'npm:rxjs',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Angular2DataTableModule } from 'angular2-data-table';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, Angular2DataTableModule],
bootstrap: [AppComponent]
})
export class AppModule {}
app.component.ts
import {
Component
} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
template: `
<div>
<h3>Fluid Row Heights</h3>
<datatable
class="material"
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'">
</datatable>
</div>
`
})
export class AppComponent {
rows = [];
columns = [{
prop: 'name'
}, {
name: 'Gender'
}, {
name: 'Company'
}];
constructor() {
this.fetch((data) => {
this.rows = data;
});
}
fetch(cb) {
const req = new XMLHttpRequest();
req.open('GET', `./company.json`);
req.onload = () => {
cb(JSON.parse(req.response));
};
req.send();
}
}
index.html
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/datatable.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/angular2-data-table/release/material.css" />
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
【讨论】：
-
感谢肖恩，是的，似乎有文档，但充其量只是令人困惑。
-
混淆是轻描淡写的。命名的东西非常愚蠢。有一半的时间你正在阅读一些东西，只是为了实现它的 angular1 而不是 angular2。数据表的实现似乎有很多，有一半的时间不清楚什么是什么。当你发现它已经过时了，你需要在完成之前重新做一遍。最令人沮丧的是，图片演示只是那些无用的图片。那有什么好处？仅仅在页面上放一个链接有多难，所以如果我发现了我喜欢的东西，我可以很快很容易地弄清楚怎么做？？？？
在这个带有演示http://swimlane.github.io/ngx-datatable/ 的页面上，每个演示页面的顶部都有指向source 的链接。这帮助我稍微了解了图书馆。
似乎作者几乎不可能发现 source 链接。
【讨论】：
这是一个解决方案： 以更简单的方式实现数据表
https://www.npmjs.com/package/angular2-datatable
只需更改您的数据，替换 [mfData]="你的响应包"
这里我也分享一个例子。
数据：
{
"responsecode": "200",
"status": "Success",
"ResponseMessage": "Success",
"responsepacket": [{
"member_id": 4,
"member_name": "mehulkachhwaya",
"member_contactno": "9977828800",
"member_dob": "/Date(804623400000)/",
"member_gender": "Male",
"workouttype_id": "GYM",
"member_imagename": "user.jpg",
"member_imagepath": "user.jpg",
"joiningdate": "/Date(-62135596800000)/",
"address": "jail road",
"name_complaint": "6/6/2017 6:30:26 PM",
"contact_complaint": null,
"msg_complaint": "unlocked",
"status": null
},
{
"member_id": 7011,
"member_name": "rakeshchatur",
"member_contactno": "0000000000",
"member_dob": "/Date(1498069800000)/",
"member_gender": "Female",
"workouttype_id": "GYM+CARDIO",
"member_imagename": "Today work.png",
"member_imagepath": "work.png",
"joiningdate": "/Date(-62135596800000)/",
"address": "kachhawayamehul@gmail.com",
"name_complaint": "6/21/2017 7:40:49 PM",
"contact_complaint": null,
"msg_complaint": "unlocked",
"status": null
},
{
"member_id": 7012,
"member_name": "sadassa",
"member_contactno": "0000000000",
"member_dob": "/Date(1498156200000)/",
"member_gender": "Male",
"workouttype_id": "GYM",
"member_imagename": "logo.png",
"member_imagepath": "hi.png",
"joiningdate": "/Date(-62135596800000)/",
"address": "Jail Road",
"name_complaint": "6/21/2017 7:45:11 PM",
"contact_complaint": null,
"msg_complaint": "unlocked",
"status": null
},
{
"member_id": 7013,
"member_name": "sadassa",
"member_contactno": "0000000000",
"member_dob": "/Date(1498156200000)/",
"member_gender": "Male",
"workouttype_id": "GYM",
"member_imagename": "logo.png",
"member_imagepath": "hi.png",
"joiningdate": "/Date(-62135596800000)/",
"address": "Jail Road",
"name_complaint": "6/21/2017 7:45:13 PM",
"contact_complaint": null,
"msg_complaint": "unlocked",
"status": null
},
{
"member_id": 7014,
"member_name": "oyyds",
"member_contactno": "9090909090",
"member_dob": "/Date(1497897000000)/",
"member_gender": "Male",
"workouttype_id": "GYM",
"member_imagename": "register1.png",
"member_imagepath": "hi.png",
"joiningdate": "/Date(-62135596800000)/",
"address": "Jail Road",
"name_complaint": "6/21/2017 7:54:04 PM",
"contact_complaint": null,
"msg_complaint": "unlocked",
"status": null
}
]
}
并在您的模板中使用它：
<div>
<table class="pagination" cellspacing="0" [mfData]="responseformate.responsepacket" #mf="mfDataTable" [mfRowsOnPage]="5"
>
<thead>
<tr class="tittle">
<th><span> <mfDefaultSorter by="member_name">User Name</mfDefaultSorter></span> </th>
<th><span>Contact No</span> </th>
<th><span>WorkOut Type</span> </th>
<th><span>Image</span> </th>
<th><span>Joining Date</span> </th>
<th><span>Action</span> </th>
</tr>
</thead>
<tbody id="UserList" >
<tr *ngFor=" let todo of mf.data let i=index " >
<td>{{todo.member_name}}</td>
<td>{{todo.member_contactno}}</td>
<td>{{todo.workouttype_id}}</td>
<td style="width:125 px"><img class="img-circle" src={{todo.member_imagepath}} alt="Smiley face"></td>
<td>{{todo.name_complaint}}</td>
<td style="width:70px;"><a href="javascript:;" title="Edit User Information">
<i class="fa fa-pencil fa-fw" aria-hidden="true" style="color: #1a9ef5;padding-right: 0px"></i></a>
<a href="javascript:;" title="UnBlock this user">
<i class="fa fa-expeditedssl" aria-hidden="true" style="color: black;"></i></a>
<a href="javascript:;" title="Delete User" (click)=delete(todo.member_id)>
<i class="fa fa-trash-o" aria-hidden="true" style="color: red;"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
<!--JavaScript se ayega data-->
<div class="referenceRequestError" style="text-align: center; font-size: 18px; font-weight: bold;">
<!--No Request Recived-->
</div>
</div>
【讨论】：