行のフィルタリングの実行

フィルタ処理された行を非表示にできます。フィルタ処理が有効化された列の列ヘッダには、フィルタボタンが表示されます。ユーザーはこのボタンをクリックして、フィルタの基準とする項目を選択することで、項目リストを並べ替えることができます。

ユーザーはマウス、またはさまざまなキーボードキーを使用して、フィルタダイアログを操作できます。［Esc］キーを使用すると、ダイアログをキャンセルできます。［Tab］キーを使用すると別のセクションに移動でき、上下の矢印キーを使用すると、リストの項目間を移動できます。［Space］キーを使用すると、チェック状態を変更できます。

コード内でフィルタを作成するには、rowFilterメソッドとHideRowFilterクラスを使用します。フィルタアイコンを非表示にするには、filterButtonVisibleメソッドを使用します。

コードの使用

次のサンプルコードは、フィルタを作成します。

JavaScript	コードのコピー
var cellrange =new GC.Spread.Sheets.Range(0, 2, 5, 1); var hideRowFilter =new GC.Spread.Sheets.Filter.HideRowFilter(cellrange); activeSheet.rowFilter(hideRowFilter); //activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0,0,4,4)));

コードの使用

次のサンプルコードは、コードを使用して行をフィルタ処理します。

JavaScript	コードのコピー
$(function () { var workbook = new GC.Spread.Sheets.Workbook($("#ss")[0]); var activeSheet = workbook.getActiveSheet(); activeSheet.setRowCount(7); activeSheet.setValue(0, 0, "North"); activeSheet.setValue(1, 0, "South"); activeSheet.setValue(2, 0, "East"); activeSheet.setValue(3, 0, "South"); activeSheet.setValue(4, 0, "North"); activeSheet.setValue(5, 0, "North"); activeSheet.setValue(6, 0, "West"); activeSheet.setColumnWidth(0, 80); // 行フィルタを設定します。 activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1))); $("#button1").click(function(){ // 列1を「North」によってフィルタリングします。 var rowFilter = $("#ss").data("workbook").getActiveSheet().rowFilter(); var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.TextCondition, { compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.EqualsTo, expected: "North" }); rowFilter.addFilterItem(0, condition); rowFilter.filter(0); }); $("#button2").click(function(){ // 列1のフィルタリングを解除します。 var rowFilter = $("#ss").data("workbook").getActiveSheet().rowFilter(); if(rowFilter){ rowFilter.removeFilterItems(0); rowFilter.filter(); } }); }); // ページにコマンドボタンコントロールを追加します。 <input type="button" id="button1" value="button1"/> <input type="button" id="button2" value="button2"/>

JavaScript

コードのコピー

$(function () {
             var workbook = new GC.Spread.Sheets.Workbook($("#ss")[0]);
             var activeSheet = workbook.getActiveSheet();
             activeSheet.setRowCount(7);
             activeSheet.setValue(0, 0, "North");
             activeSheet.setValue(1, 0, "South");
             activeSheet.setValue(2, 0, "East");
             activeSheet.setValue(3, 0, "South");
             activeSheet.setValue(4, 0, "North");
             activeSheet.setValue(5, 0, "North");
             activeSheet.setValue(6, 0, "West");
             activeSheet.setColumnWidth(0, 80);
         // 行フィルタを設定します。
             activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1)));
             $("#button1").click(function(){
                // 列1を「North」によってフィルタリングします。
                 var rowFilter = $("#ss").data("workbook").getActiveSheet().rowFilter();
                 var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.TextCondition, {
                     compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.EqualsTo,
                     expected: "North"
                 });
                 rowFilter.addFilterItem(0, condition);
                 rowFilter.filter(0);
             });
             $("#button2").click(function(){
                 // 列1のフィルタリングを解除します。
                 var rowFilter = $("#ss").data("workbook").getActiveSheet().rowFilter();
                 if(rowFilter){
                     rowFilter.removeFilterItems(0);
                     rowFilter.filter();
                 }
             });

});
// ページにコマンドボタンコントロールを追加します。
<input type="button" id="button1" value="button1"/>
<input type="button" id="button2" value="button2"/>

コードの使用

次のサンプルコードは、カスタムフィルタを作成します。

JavaScript	コードのコピー
// ページにコマンドボタンコントロールを追加します。 function CustomFilter(){ GC.Spread.Sheets.ConditionalFormatting.Condition.apply(this, arguments); this.conditionType("CustomFilter"); }; CustomFilter.prototype = new GC.Spread.Sheets.ConditionalFormatting.Condition(); CustomFilter.prototype.evaluate = function (evaluator, row, col) { var value = evaluator.getValue(row, col); if (value !== null && value >= 10 && value <= 50) { // 次の条件が満たされる場合にかぎりTrueを返します。 // (1) 値が入力されている場合 // (2) 値が10以上の場合 // (3) 値が50以下の場合 return true; } else { return false; } }; $(function () { var workbook = new GC.Spread.Sheets.Workbook($("#ss")[0]); var activeSheet = workbook.getActiveSheet(); activeSheet.setValue(0, 0, 10); activeSheet.setValue(1, 0, 100); activeSheet.setValue(2, 0, 50); activeSheet.setValue(3, 0, 40); activeSheet.setValue(4, 0, 80); activeSheet.setValue(5, 0, 1); activeSheet.setValue(6, 0, 65); activeSheet.setValue(7, 0, 20); activeSheet.setValue(8, 0, 30); activeSheet.setValue(9, 0, 35); $("#button1").click(function(){ // 行フィルタを設定します var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1)); activeSheet.rowFilter(rowFilter); rowFilter.addFilterItem(0, new CustomFilter()); rowFilter.filter(0); }); }); // Add a button at the bottom of the page <input id="button1" type="button" value="Button1"/>

JavaScript

コードのコピー

// ページにコマンドボタンコントロールを追加します。
         function CustomFilter(){
             GC.Spread.Sheets.ConditionalFormatting.Condition.apply(this, arguments);
             this.conditionType("CustomFilter");
         };
         CustomFilter.prototype = new GC.Spread.Sheets.ConditionalFormatting.Condition();
         CustomFilter.prototype.evaluate = function (evaluator, row, col) {
             var value = evaluator.getValue(row, col);

            if (value !== null && value >= 10 && value <= 50) {
                  // 次の条件が満たされる場合にかぎりTrueを返します。
            // (1) 値が入力されている場合
            // (2) 値が10以上の場合
            // (3) 値が50以下の場合
                 return true;
             } else {
                 return false;
             }
         };

$(function () {
             var workbook = new GC.Spread.Sheets.Workbook($("#ss")[0]);
             var activeSheet = workbook.getActiveSheet();
             activeSheet.setValue(0, 0, 10);
             activeSheet.setValue(1, 0, 100);
             activeSheet.setValue(2, 0, 50);
             activeSheet.setValue(3, 0, 40);
             activeSheet.setValue(4, 0, 80);
             activeSheet.setValue(5, 0, 1);
             activeSheet.setValue(6, 0, 65);
             activeSheet.setValue(7, 0, 20);
             activeSheet.setValue(8, 0, 30);
             activeSheet.setValue(9, 0, 35);

            $("#button1").click(function(){
                 // 行フィルタを設定します
                 var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1));
                 activeSheet.rowFilter(rowFilter);
                 rowFilter.addFilterItem(0, new CustomFilter());
                 rowFilter.filter(0);
             });
         });
// Add a button at the bottom of the page
<input id="button1" type="button" value="Button1"/>

参照

HideRowFilter クラス