web-dev-qa-db-ja.com

angle2-data-tableの使用方法

angular2-data-tableライブラリの使用方法のチュートリアルが見つかりません： https://github.com/swimlane/angular2-data-table

ドキュメントには簡単な例が欠けているようです。

誰かがangular2でdatatableを使用する簡単な例を教えてもらえますか

angularangular2-templateangular2-directives
5
CommonSenseCode

その正確な理由から、そのライブラリを使用することはお勧めしません。私はプロジェクトでそれを使用しようとして数週間働いていますが、ドキュメントが不足しているため、ほとんど使用できません。

それがここで言われているのは、比較的単純な例です。これは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>
2
Shawn

これらは解決策です：より簡単な方法でデータテーブルを実装する

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

データを変更するだけで、[mfData] = "Yourresponsepacket"を置き換えます

ここでも例を共有しています。

データ：

{
    "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
        }
    ]
}

そしてそれをあなたのテンプレートで消費してください：

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

デモのあるこのページ http://swimlane.github.io/ngx-datatable/ すべてのデモページの上部にsourceリンクへのリンクがあります。それは私がライブラリを少し理解するのに役立ちました。

作者はそのsourceリンクを見つけることをほとんど不可能にしたようです。

0
Xquick