Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

「Wijmo(ウィジモ) 5」のExcelライクスプレッドシートFlexSheet

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第6回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

ソートとフィルタ

 以下ではFlexSheetに表示したデータを、特定条件でソート/フィルタする方法を紹介します。ここでは図4のようなサンプルで説明していきます。

図4 データをソート/フィルタするサンプル(004_wijmo_flexsheet4.html)
図4 データをソート/フィルタするサンプル(004_wijmo_flexsheet4.html)

FlexSheetのSortManager

 SortManagerはFlexSheetに表示されているデータのソートを制御するオブジェクトです。図4でデータをふりがな(C列)の昇順で並び替える処理をリスト4に示します。

リスト4 ふりがな(C列)の昇順でソートする処理(004_wijmo_flexsheet4.html)
// SortManagerを取得 ...(1)
var sortManager = $scope.flexSheet1.sortManager;

// ふりがなの昇順を設定 ...(2)
var desc = new wijmo.grid.sheet.ColumnSortDescription(2, true);
var cv = new wijmo.collections.CollectionView([desc]);

// ソート実行 ...(3)
sortManager.sortDescriptions = cv;
sortManager.commit();

 (1)でFlexSheetのsortManagerプロパティからSortManagerオブジェクトを取得しています。(2)ではソート順を表すColumnSortDescriptionオブジェクトを生成して、CollectionViewに格納しています。ColumnSortDescriptionコンストラクタの第1引数は列のインデックス(0始まりなのでインデックス2=C列)、第2引数は昇順/降順の別(trueは昇順)を表すので、全体としてC列=ふりがなの昇順になります。(3)でソート条件を格納したCollectionViewオブジェクトをsortManagerに設定して、commitメソッドでソートを実行しています。

 CollectionViewに複数のソート条件を指定すると、その順で複数のソート条件が設定されます。リスト5のようにCollectionViewを作ると「身長が高く、体重が少ない順」のソートができます。

リスト5 複数のソート条件を設定(004_wijmo_flexsheet4.html)
// 「身長が高い順」のソート条件
var desc1 = new wijmo.grid.sheet.ColumnSortDescription(3, false);
// 「体重が少ない順」のソート条件
var desc2 = new wijmo.grid.sheet.ColumnSortDescription(4, true);
// 「身長が高い順で、身長が同じ場合は体重が少ない順」を設定
var cv = new wijmo.collections.CollectionView([desc1, desc2]);

 004_wijmo_flexsheet4.htmlのサンプルでは、リスト4、5の処理でデータをソートできます。

図5 リスト5の条件でソートを実行(004_wijmo_flexsheet4.html)
図5 リスト5の条件でソートを実行(004_wijmo_flexsheet4.html)

フィルタを容易に実現するshowColumnFilterメソッド

 FlexSheetのフィルタ機能は、親クラスであるFlexSheetの機能を利用します。リスト6のようにshowColumnFilterメソッドを実行すると、フィルタ条件を設定できるダイアログが表示されます。

リスト6 シートにデータを初期設定(004_wijmo_flexsheet4.html)
$scope.flexSheet1.showColumnFilter();

 ダイアログで条件を設定するとデータがフィルタされます。フィルタは値を直接指定する値フィルタと、抽出条件を細かく指定できる条件フィルタが利用できます。

図6 フィルタ設定ダイアログの表示(004_wijmo_flexsheet4.html)
図6 フィルタ設定ダイアログの表示(004_wijmo_flexsheet4.html)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5