データのフィルタリング
次はDataGridのデータをキーワードなどを入力してフィルタリングする機能を実装してみましょう。フィルタリングはDataGridに表示されるデータの数が多い場合に、すばやく望みのデータにアクセスする手法として有効です。DataGridはfilterメソッドを提供していますので、ユーザーの入力を受け付けるテキスト・ボックスを用意して、このメソッドを呼び出すだけで、フィルタリング機能が実現できます。filterメソッドには、DataGridが利用しているデータAPIを呼び出すためのクエリ情報を指定します。このクエリ情報の指定方法はデータAPIを提供するデータ・ストアによって異なりますが、ここで利用しているItemFileReadStoreではフィルタリングに使うフィールド名とワイルドカード（"*"）を含む値を指定したオブジェクトを渡すことができます。
function setupTextBox(){
var myDataGrid = dijit.byId("myDataGrid");
dojo.connect(dijit.byId("myTextBox"), "onChange", function(value){
var query = {email: value + "*"};
myDataGrid.filter(query);
});
};
dojo.addOnLoad(setupTextBox);
上記のコードは、入力した文字で始まるメールアドレスが含まれるデータを表示するためコールバックをテキスト・ボックスに追加しています。このコールバックを追加したテキスト・ボックスを作成して表示してみます。
テキスト・ボックスに"t"とすると、"t"で始まるメールアドレスを持つデータのみが表示されます。
セルに他のウィジェットを表示
これまでサンプル・コードで実装してきたformatter関数は、テキスト文字列やHTMLマークアップを生成して、セルにHTMLの要素やテキストを表示するものでしたが、セルの中にボタンなど他のウィジェットを表示したい場合もあります。Dojo 1.4からはformatter関数が文字列の変わりにウィジェットを生成することも可能になったので、簡単にウィジェットをセルの中に埋め込むことができます。以下のコードはボタンのウィジェットを生成するformatterの例です。
function myButtonFormatter(value){
var button = new dijit.form.Button({label: value});
button.connect(button, "onClick", function(){
// アプリケーションの処理
});
return button;
};
例えば、このformatter関数をメールアドレスのセルの定義に指定して実行すると、メールアドレスをラベルに指定したボタンが表示されます。
