DataGridに絞込み機能を追加したサンプルこのサンプルは、親ウィンドウのDataGridに表示されているレコードを絞り込むことができます。検索ボタンをクリックすると、子ウィンドウが表示されます。カラムに対して設定することができます。都道府県に検索条件を設定するには、都道府県のドロップダウンリストから条件式(比較演算子)を選択します。ドロップダウンリストに表示される条件式は、カラムのデータ型により異なります。Betweenを選択したときは、範囲(開始値/終了値)を入力します。Inを選択したときは、「埼玉県,千葉県」のようにコンマで区切って入力します。Likeを選択したときは、「%課長%」のようにワイルドカード(%)を使用します。文字型のカラムに条件式の値を入力するとき、値を引用符で囲む必要がありません。引用符は、システムが自動的に付加します。検索条件から複数のカラムを選択したときは、ドロップダウンリストから論理演算子(OR/AND条件)を選択します。デフォルトでは、OR条件で検索します。OR条件のときは、いずれかの条件を満足したときにレコードが抽出されます。AND条件のときは、すべての条件を満足したときにレコードが抽出されます。検索条件を選択したら、最後に[検索]ボタンをクリックすると、親ウィンドウのDataGridに検索結果が表示されます。検索条件をリセットするときは、[クリア]ボタンをクリックします。検索条件によってTextBoxの個数を変えるにはこのサンプルでは、検索条件のDropDownListから選択した比較演算子によって1個、または2個のTextBoxを表示します。条件によって異なる個数のTextBoxを表示するにはPanelを使用すると便利です。Panel1には1個のTextBox、Panel2には2個のTextBoxを定義します。1個のTextBoxを表示するときは、Panel1のVisibleプロパティをTrueに設定します。2個のTextBoxを表示するときは、Panel2のVisibleプロパティをTrueに設定して切り替えます。DropDownListに異なるアイテムを表示するにはこのサンプルでは、得意先ID、都道府県などの条件式(比較演算子)をDropDownListに表示しています。条件式は、カラムのデータ型によって異なります。DropDownListに異なるアイテムを表示するには、DropDownListのDataSourceプロパティにデータ連結タグを記述します。データ連結タグからは、関数を呼び出してアイテムをバインドします。ページ間でデータを渡すにはこのサンプルでは、子ウィンドウから選択した検索条件を親ウィンドウに渡すのに、TextBoxを経由しています。子ウィンドウから選択した検索条件を親ウィンドウのTextBoxに渡すには、JavaScriptで記述したコードをブラウザから実行させます。親ウィンドウのTextBoxが書き換えられると、WebページがポストバックされてDataGridに検索結果が表示されます。TextBoxが書き換えられたときにWebページをポストバックさせるには、TextBoxにクライアント側で動作するonPropertyChangeイベントを登録します。このイベントでは、Page.GetPostBackEventReference()メソッドが生成したJavaScriptを実行させてWebページをポストバックします。◆メインプログラムDataGridFiltering.aspxの解説(HTML編)DataGridFiltering.aspxのプレゼンテーションコンテンツの部分について解説します。行150-156のImageButtonでは、検索ボタンを定義しています。行157-163のLabelとTextBoxでは、件数を表示しています。行176-229では、DataGridを定義しています。このDataGridには、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。行190-228の<Columns>...</Columns>では、TemplateColumnとBoundColumnを定義しています。行191-202のTemplateColumnでは、ItemTemplateに<a>タグとLinkButtonを定義しています。<a>は、ブックマークとして使用します。LinkButtonは、レコードセレクターとして使用します。行203-207のBoundColumnでは、得意先テーブルの得意先IDをバインドしています。行238-243では、メッセージを表示するTextBoxを定義しています。このTextBoxのReadOnlyプロパティには、Trueを設定して読み込み専用にしています。行248-251では、Buttonを定義しています。このButtonのVisibleプロパティには、Falseを設定して非可視状態にしています。このButtonには、OnClickイベントが登録されています。OnClickイベントは、子ウィンドウから親ウィンドウをポストバックさせたときに実行されます。</html>◆メインプログラムDataGridFiltering.aspxの解説(コード編)DataGridFiltering.aspxは、子ウィンドウから検索条件を取得してDataGridに検索結果を表示します。Page_Load()イベントの処理このイベントは、DataGridFiltering.aspxがロードされたときに実行されます。このイベントでは、クライアント側で動作するイベントの登録と、DataGridに得意先テーブルをバインドします。行9では、メッセージを表示するTextBoxにクライアント側で動作する、onPropertyChangeイベントを登録しています。onPropertyChangeイベントでは、Webページをポストバックします。GetPostBackEventReference()メソッドは、WebページをポストバックするJavaScriptを生成します。Webページがポストバックされると、btnRefreshイベントが実行されます。Ifでは、ページが最初にロードされたか調べています。ページが最初にロードされたときは、BindDataGrid()を呼び出してDataGridに得意先テーブルをバインドします。dgrdCustomers_ItemDataBound()イベントの処理このイベントは、DataGridのDataBind()メソッドが実行されたときに発生します。このイベントでは、DataGridのアイテム(DataGridItem)にクライアント側で動作するonClickイベントを登録します。dgrdCustomers_ItemCommand()イベントの処理このイベントは、DataGridから行を選択したときに発生します。このイベントでは、InsertBookmarkScript()を呼び出してクライアント側で動作するJavaScriptを登録します。InsertBookmarkScriptの引数には、DataGridから選択したアイテムのインデックス番号を指定します。ibtnSearch_Command()イベントの処理このイベントは、Webページから検索ボタンをクリックしたときに発生します。このイベントでは、InsertScriptBlock()を呼び出して、子ウィンドウを開きます。btnRefresh_Click()イベントの処理このイベントは、クライアント側からメッセージを表示するTextBoxを書き換えたときに発生します。このサンプルでは、子ウィンドウから親ウィンドウのTextBoxにメッセージを設定して書き換えます。子ウィンドウから親ウィンドウをポストバックさせています。btnRefresh_Clickイベントでは、DataGridに検索結果を表示します。行17では、TextBoxに格納されている検索条件を取得しています。行19-26では、検索条件の有無を調べています。検索条件がないときは、SELECTステートメントにWHERE句を追加しません。Customers検索条件があるときは、SELECTステートメントにWHERE句を追加します。Criteria行22-24のIf...EndIfでは、検索条件にティルダ(~)が含まれているか調べています。ティルダが含まれているときは、ティルダを引用符に置換します。行29では、CreateDataSet()関数を呼び出して得意先テーブルのDataSetを作成します。CreateDataSetの引数には、SQLのSELECTステートメントを指定します。Withでは、DataGridに得意先テーブルのDataViewをバインドしています。行40では、TextBoxに得意先テーブルのレコード件数を設定しています。レコード件数は、DataTableのRowsコレクションのCountプロパティから取得します。BindDataGrid()の処理このサブプロシージャでは、DataGridに得意先テーブルをバインドして表示します。BindDataGridは、Page_Loadイベントから呼ばれます。InsertScriptBlock()の処理このサブプロシージャでは、子ウィンドウを開くJavaScriptを生成して登録します。InsertScriptBlockは、検索ボタンをクリックしたときに、ボタンのOnCommandイベントから呼ばれます。行82-84では、JavaScriptのwindow.open()メソッドの引数に指定するオプションを生成しています。Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。language='javascript'>window.open('PopupSearch.aspx','_blank','features');</script>JavaScriptのwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、url、target、featuresを指定します。urlには、新規ウィンドウに表示するファイルPopupSearch.aspxを指定します。行91では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録します。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザから実行されます。InsertBookmarkScript()の処理このサブプロシージャでは、DataGridから選択した行が自動的に画面に表示されるように位置情報を保持します。DataGridがページ内に収まらないときは、ウィンドウに垂直型のスクロールバーが表示されてスクロールできるようになっています。DataGridをスクロールした状態で、Webページがポストバックされるとカレントの位置情報が失われて常に先頭行から表示されます。このサブプロシージャでは、ブックマーク機能を応用してWebページがポストバックされたときの位置を自動的に保持します。InsertBookmarkScriptは、DataGridのOnItemCommandイベントから呼ばれます。OnItemCommandイベントは、DataGridから行を選択したときに発生します。Withでは、StringBuilderのAppend()メソッドで、以下のようなJavaScriptを生成しています。language='javascript'>location.href='#999';</script>JavaScriptのlocation.href=では、hrefにブックマークID(#999)を設定してその位置に移動させます。このサンプルでは、DataGridの選択行のブックマークIDを設定して、その行に移動させます。選択した行が画面に表示されるようにしています。行101では、Page.RegisterStartupScript()メソッドでJavaScriptを登録しています。RegisterStartupScriptで登録されたJavaScriptは、Webページの最後に挿入されます。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザから実行されます。GetBookMarkID()関数の処理この関数は、ブックマークのIDを生成して返します。GetBookMarkIDは、DataGridのTemplateColumnがバインドされるときに呼ばれます。</asp:TemplateColumn>GetBookMarkIDは、0から始まるブックマークIDを生成して返します。CreateDataSet()関数の処理この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()とbtnRefresh_Click()から呼ばれます。CreateDataSetのの引数には、strSQLとstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。DropDownListとTextBoxを作成しています。Betweenの条件式を選択したときは、範囲(開始値/終了値)を入力する2個のTextBoxを表示します。DroDownListからその他の条件式を選択したときは、1個のTextBoxを表示します。TextBoxを1個と2個のケースに切り替えるには、Panelを使用しています。行294-317では、得意先IDのLabel、DropDownList、TextBoxを定義しています。TextBoxは、Panel内に1個のケースと2個のケースを定義しています。行294では、Labelで「ID」を表示します。行297-301では、DropDownListに条件式を表示します。行298では、DropDownListのAutoPostBackプロパティにTrueを設定してアイテムを選択したときにWebページをポストバックさせています。行299では、OnSelectedIndexChangedイベントを登録しています。このイベントは、DropDownListからアイテムを選択したときに発生します。行301では、DataSourceプロパティにデータ連結式を記述しています。GetLogicalOperator()関数の引数には、int/stringを指定します。intは、得意先テーブルのカラムが数値型のときに指定します。stringは、得意先テーブルのカラムが文字型のときに指定します。DropDownListには、得意先テーブルのデータ型によって異なる条件式を表示します。/>行305-310では、Panelに1個のTextBoxを定義しています。Between以外の条件式を選択したときに表示します。行311-317では、Panelに2個のTextBoxを定義しています。Betweenの条件式を選択したときに表示します。Label、DropDownList、TextBoxを定義しています。行418-420では、「クリア」のButtonを定義しています。このButtonは、検索条件をリセットするときに使用します。行421-424では、論理演算子(OR/AND条件)を選択するDropDownListを定義しています。</asp:DropDownList>行425-429では、「検索」と「閉じる」のButtonを定義しています。検索ボタンをクリックしたときは、検索条件を親ウィンドウに渡してDataGridに検索結果を表示します。閉じるボタンをクリックしたときは、子ウィンドウを閉じます。</html>◆サブプログラムPopupSearch.aspxの解説(コード編)PopupSearch.aspxは、Webフォームから選択した検索条件を親ウィンドウに渡します。カラムに対して設定することができます。複数のカラムの検索条件を設定するときは、論理演算子(OR/AND条件)を適用することができます。Page_Load()イベントの処理このイベントは、ページがロードされたときに発生します。このイベントでは、ページの初期化を行います。Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、「閉じる」ボタンにクライアント側で動作するonClickイベントを登録します。onClickイベントでは、JavaScriptのwindow.close()メソッドを実行して子ウィンドウを閉じます。行7のPage.DataBind()メソッドでは、DropDownListのDataSourceプロパティに設定されているGetLogicalOperator()関数を実行させて条件式をバインドします。dropID_SelectedIndexChanged()イベントの処理このイベントは、得意先IDのDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて、表示するTextBoxの個数を切り替えます。Betweenを選択したときは、2個のTextBoxが定義されているPanelを可視状態にします。Between以外を選択したときは、1個のTextBoxが定義されているPanelを可視状態にします。行12では、DropDownListのSelectedItem.Textプロパティから、選択した条件式を取得しています。Ifでは、PanelのVisibleプロパティを書き換えて可視/非可視状態に切り替えます。DropDownListからBetween以外を選択したときは、1個のTextBoxが定義されているPanelを可視状態にします。DropDownListからBetweenを選択したときは、2個のTextBoxが定義されているPanelを可視状態にします。dropCompanyName_SelectedIndexChanged()イベントの処理このイベントは、得意先名のDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて表示するTextBoxの個数を切り替えます。dropContactTitle_SelectedIndexChanged()イベントの処理このイベントは、役職のDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて表示するTextBoxの個数を切り替えます。dropKen_SelectedIndexChanged()イベントの処理このイベントは、都道府県のDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて表示するTextBoxの個数を切り替えます。btnClear_Click()イベントの処理このイベントは、Webフォームから「クリア」ボタンをクリックしたときに発生します。このイベントでは、検索条件をリセットします。btnSearch_Click()イベントの処理このイベントは、Webフォームから「検索」ボタンをクリックしたときに発生します。このイベントでは、Webフォームから選択した検索条件を取得して親ウィンドウに渡します。行90では、論理演算子(OR/AND条件)のDropDownListから選択した値(and/or)を取得しています。行93-103では、得意先IDの検索条件を取得しています。行93では、DropDownListから条件式を取得しています。than、Between・・・などの比較演算子が格納されています。Ifでは、DropDownListから比較演算子を選択したか調べています。行95-97では、StringBuilderのAppend()メソッドで論理演算子(Or/And)を追加しています。'埼玉県')行98-102では、条件式の比較演算子にBetweenが含まれるか調べています。Betweenが含まれるときは、GenIntCriteria()関数の引数に開始値/終了値を指定して呼び出します。Betweenが含まれないときは、GetIntCriteria()関数の引数に値を指定して呼び出します。GetIntCriteria()からは、SQLのWHERE句が返されます。検索条件を取得します。これらのカラムのWHERE句を生成するときは、GetStrCriteria()関数を使用します。Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。Criteria)を設定しています。ここで設定した検索条件は、親ウィンドウのDataGridに検索結果を表示するときに使用します。行148では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録しています。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザがら実行されます。GenIntCriteria()関数の処理この関数は、SQLのWHERE句を生成して返します。この関数は、検索ボタンをクリックしたときにbtnSearch_Click()イベントから呼ばれます。GenIntCriteria()は、数値型のカラムのWHERE句を生成するときに使用します。Ifでは、比較演算子を調べて以下のようなWHERE句を生成します。Null行187では、SQLのWHERE句を返します。GenStrCriteria()関数の処理この関数は、SQLのWHERE句を生成して返します。この関数は、検索ボタンをクリックしたときにbtnSearch_Click()イベントから呼ばれます。GenStrCriteria()は、文字型のカラムのWHERE句を生成するときに使用します。Ifでは、比較演算子を調べて以下のようなWHERE句を生成します。Null文字型のWHERE句を生成するときは、値を引用符(シングルクオテーション、ダブルクオテーション)で囲む必要があります。このサンプルでは、WHERE句を子ウィンドウから親ウィンドウに渡すときにJavaScriptを使用します。JavaScriptでWHERE句を渡すときに引用符が含まれるとエラーになるため、引用符をティルダ(~)で代用します。親ウィンドウでSQLのWHERE句を生成するときに、ティルダを引用符に置換します。'埼玉県'行222では、SQLのWHERE句を返します。SplitValue()関数の処理この関数は、コンマ区切りの文字列を分割してティルダで囲って返します。この関数は、GenStrCriteria()から比較演算子In()の値を取得するときに呼ばれます。行226では、コンマ区切りの文字列を分割して配列変数に格納します。行230-235のFor...Nextでは、分割された文字列にティルダを付加して囲みます。行236では、分割した文字列を結合して返します。GetLogicalOperator()関数の処理この関数は、検索条件の比較演算子をArrayListに格納して返します。この関数は、DropDownListのDataSourceプロパティにデータ連結式として記述されています。GetLogicalOperator()は、Page.DataBind()メソッドが実行されたときに呼ばれます。この関数からは、数値型と文字型の2種類のArrayListを返します。行244-256では、ArrayListのAdd()メソッドで数値型のアイテムを追加しています。Add()メソッドの引数には、ListItemを指定します。ListItemの引数には、Text/Valueプロパティを指定します。このサンプルでは、Textプロパティに比較演算子、Valueプロパティに比較演算子の省略形を指定しています。行258-268では、ArrayListに文字型のアイテムを追加しています。行271では、ArrayListを返しています。</script>Tip引用符が含まれるデータを渡すにはこのサンプルでは、引用符が含まれるデータをJavaScriptで渡すときに引用符をティルダに置換してエラーとなるのを回避しています。JavaScriptで引用符を渡すには、「\'」のように記述するとエラーを回避することができます。データの内容が不明なときは、Session変数にデータを格納して渡すとエラーを回避することができます。DataGrid2のホームへ戻る。