Comment utiliser angular2-table de données

Ne pouvez pas trouver un tutoriel sur la façon d'utiliser angular2-data-table bibliothèque est ici: https://github.com/swimlane/angular2-data-table

La documentation semble manquer d'exemples simples.

Quelqu'un peut-il me donner un exemple simple de l'utilisation de la datatable dans angular2

OriginalL'auteur CommonSenseCode | 2016-11-14

  1. 2

    Je ne recommandons pas l'aide de la bibliothèque pour cette raison exacte. J'ai travaillé pour un couple de semaines à essayer de l'utiliser dans un projet et le manque de documentation a fait qu'il est presque impossible de l'utiliser.

    Avec qui est dit ici est en un exemple simple. Il utilise la Angular2 Démarrage rapide comme une base et que je n'ai fait ajouter angular2-table de données via npm. Vous aurez besoin de saisir la de l'entreprise.json à partir de Github et le placer à la racine de votre projet.

    paquet.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.le 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.composante.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  type="text/css" href="/node_modules/angular2-data-table/release/datatable.css" />
    <link  type="text/css" href="/node_modules/angular2-data-table/release/material.css" />
    <link  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>
    merci Shawn ouais il semble y avoir de la documentation, mais son confuse au possible.
    Déroutant, c'est un euphémisme. Le nommage des choses est incroyablement STUPIDE. La moitié du temps que vous lisez quelque chose seulement pour réaliser ses angular1 pas angular2. Il semble y avoir de nombreuses implémentations du tableau de données et la moitié du temps clairement ce qui va avec quoi. Le temps de comprendre ses toutes obsolètes et que vous devez faire sur une fois de plus avant de la terminer. Le plus frustrant, la photo démos ne sont que des images inutilisables. A quoi bon le faire ? Comment vraiment difficile serait-il juste de mettre un lien sur la page, donc Si j'aperçois quelque chose que j'aime, je peux rapidement facilement comprendre comment le faire????

    OriginalL'auteur Shawn

  2. 0

    Sur cette page, avec les démos http://swimlane.github.io/ngx-datatable/ il existe un lien de source lien en haut de chaque page de démonstration. Qui m'a aidé à comprendre la bibliothèque un peu.

    Il semble que les auteurs, il était presque impossible de repérer que source lien.

    OriginalL'auteur Xquick

  3. 0

    Ces est une solution :
    La mise en œuvre de tableau de données sur voie plus facile

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

    Il suffit de changer vos données, de les remplacer
    [mfData]="Votre responsepacket"

    Ici, je vais partager un exemple.

    De données:

    {
    "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": "[email protected]",
            "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
        }
    ]
}

    Et de le consommer dans votre template:

       <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>

    OriginalL'auteur mehul