Allied ArchitectsAllied ArchitectsEngineer Blog

KnockoutJSを使って、カラムでソート実装する

2014/12/26 Knockout.js

初めまして、クオンと申します。
最近、ReFUEL4プロジェクトの仕事をしております。
宜しくお願い致します。

今回はKnockout.jsを使って、カラムでソート実装について書こうと思います。
この記事の内容が間違ってたら、ご指摘頂ければ、嬉しいです。

テーブルソートを実装してくれるJquery DataTableプラグインを読んだことがあって、今回はDataTableプラグインのような見た目のあるソートを作ってみようと思います。

DataTableプラグインとは

jQuery DataTablesは大量のデータも高速でフィルタリングしてくれるデータテーブルを実装するスクリプトです。
こちらで参考してください DataTable Plugin
以下は簡単なサンプルです。
ヘッダクリックでテーブルソートを実装してくれます。

ID Email Name
123456 protnc@example.com System Architect
234567 foo@example.com Accountant
788886 hoge@example.com Junior Technical Author
593456 bee@example.com Tran Ngoc Cuong

以下はLaravelとKnockoutJSを使って、上記のようなソートを作ってみてみましょう。

作り始め

今回のロジックは以下の通りです。
データベースから取得したUsersのリストをテーブルで表示します。ユーザーにつき、3つのカラムがあります(user_id,email,name).

各カラムをクリックしたら:

  • 当時のそのカラムの状態によって、カラムとソート順を取って、AJAXでサーバに値を投げます。
  • サーバにソートしてもらいます。
  • サーバから返すデータで更新します

各カラムにつき、3つの状態があります。
・waiting : ソートされません(他の項目でソート中)
・sorting_asc 降順にソート中
・sorting_desc 昇順にソート中

Knockout.jsの概要や、どんな感じなのかのサンプルは村上の記事青山の記事をご覧ください。

では、一緒にやりましょう!!!

CSS

まずは3つの状態のスタイルを作りましょう!

ViewModelを作成

ViewModel内に監視対象の値を作成します。

observableArrayを使うと、usersのリストをbindしてくれます。
テーブルのヘッダーをKnockoutに処理させます。
カラムにつきの各属性をKnockoutに値を監視させます。
仮に初期は’name’というカラムで降順にソートすれば、Knockoutのheadersの’name’カラムのsorting_desc値をtrueにして、activeSortを3にします。(3はheadersで’name’の番です。)

HTML

UserのリストとheadersをBindしてくれます。

カラムにつき、上記の3つ状態の値に応じ、CSSのクラスが確定されます。
カラムをクリックすると、sortというobservableが呼び出されます。
次はViewModelにsortとupdateのobservableを作成します。

ViewModelにsortとupdateのobservableを作成

まずはJSファイルにURLのパラメータを持っている変数を定義します。(Ajax用です)

sortのobservable

updateのobservable

PHPのフレームワークLaravelを使います

Ajaxで投げたデータを応じて、処理します。

サーバに返した処理されたデータによって、上記のupdateのobservableでusers、urlパラメータを更新して、HTMLでBindしてくれます。
それで完成になります。

では、終わりになります。
最後まで読んでいただき、ありがとうございました。
これからも宜しくお願い致します。

チャン ゴック クオン
  • チャン ゴック クオン
  • システム部で開発させて頂きます。学んだこと、気になることを書こうと思います。

RELATION ENTRY

Laravel4.2のリポジトリパターン

Laravel4.2のリポジトリパターン

2015/06/2 開発手法

こんにちは。クオンです。 夏が来て、最近は暑いですね。 今回はLaravelリポジトリパターンについて書こうと思います。 Laravel4.2のドキュメントはこちらでご参考ください。 Eloquent ORM Laravelではデータベースの接続、そしてクエリの実行に関してシンプルな解決策が...

続きを読む

チャン ゴック クオンの記事一覧へ

ページTOPへ