如何使用angular2数据表

Question

无法找到如何使用angular2-data-table库的教程是在这里：https://github.com/swimlane/angular2-data-table

文档似乎缺乏简单的例子。

任何一个可以给我使用的数据表中angular2

Answer 1

我不使用该库为确切原因建议更换一个简单的例子。我已经工作了几个星期，试图在一个项目中使用它，缺乏文档使它几乎不可能使用。

这里说的是一个相对简单的例子。这使用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> 

Answer 2

在有演示http://swimlane.github.io/ngx-datatable/此页面有链接到每个演示页面的顶部source链接。这有助于我了解图书馆。

看来作者几乎不可能发现source链接。

Answer 3

这是一个解决方案： 上更简单的方法实现数据表

https://www.npmjs.com/package/angular2-datatable

只要改变你的数据，替代 [mfData] = “您responsepacket”

我在这里分享一个例子以及。

数据：

{ 
    "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", 
      "joinningdate": "/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", 
      "joinningdate": "/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", 
      "joinningdate": "/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", 
      "joinningdate": "/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", 
      "joinningdate": "/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>&nbsp; 
       <a href="javascript:;" title="UnBlock this user"> 
       <i class="fa fa-expeditedssl" aria-hidden="true" style="color: black;"></i></a>&nbsp; 
       <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>