SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Knockout.jsで、要素を選択できるテーブル

TypeScript

ちょっと必要に迫られて作ったので、コードだけメモ。

KnockoutObservableArray型の配列を、Tableタグで表示します。
また、各項目をクリックで選択できるようにしてます。
こんな感じ
f:id:minami_SC:20150522012037p:plain:w350

index.html
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Selectable Table Sample</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/knockout-3.3.0.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h2>Knockout.jsで選択可能なテーブルのサンプル</h2>

    <span>選択項目：</span>
    <span data-bind="text: selected().name"></span>
    <br />

    <table class="selectableTable">
        <thead>
            <tr>
                <th>名前</th>
                <th>年齢</th>
                <th>メモ</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: list">
            <tr data-bind="click: $parent.selected, attr: {'selected': $parent.selected() == $data}">
                <td data-bind="text: name"></td>
                <td data-bind="text: age"></td>
                <td data-bind="text: memo"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
app.ts
/// <reference path="scripts/typings/knockout/knockout.d.ts" />


class Person {
    constructor(public name: string,
                public age: number,
                public memo: string) {
    }
}

class AppViewModel {
    public list: KnockoutObservableArray<Person>;
    public selected: KnockoutObservable<Person>;

    constructor() {

        this.list = ko.observableArray<Person>();
        this.selected = ko.observable<Person>();

        for (var i = 0; i < 10; i++) {
            this.list.push(new Person("hoge" + i + "さん", i, "..."));
        }



        // 最初の要素を選択しておく
        this.selected(this.list()[0]);
    }
}

window.onload = () => {
    var viewmodel = new AppViewModel();
    ko.applyBindings(viewmodel);
};
app.css
body {
    font-family: 'Segoe UI', sans-serif;
}

span {
    font-style: italic;
}


.selectableTable {
    width: 100%;
    border-collapse: collapse;
}

    .selectableTable th {
        width: 33%;
        padding: 4px;
        text-align: center;
        vertical-align: top;
        color: #333;
        background-color: silver;
        border: 1px solid #b9b9b9;
    }

    .selectableTable tr {
    }

        .selectableTable tr:nth-child(odd) {
            background: whitesmoke;
        }

    .selectableTable td {
        padding: 3px;
        border: 1px solid darkgray;
    }

    .selectableTable tbody tr:hover {
        background: #E5E5E5;
        cursor: pointer;
    }

    .selectableTable tr[selected] {
        background: #E0E8FF;
        font-weight: bold;
    }