SpreadJS製品ヘルプ
データの並べ替え
SpreadJS > 開発者の手引き > 機能 > データの管理 > データの並べ替え

ウィジェット内のデータを並べ替えることができます。また、並べ替えに使用する列/行インデックスを指定したり、並べ替え条件を指定することもできます。 複数の並べ替えキーを指定することもできます(特定の列または行を最初に並べ替え、次に2番目の列または行を並べ替え、以下同様に行います)。

データを並べ替えるには、sortRangeメソッドを使用します。並べ替えキー、昇順/降順を指定するには、sortRangeメソッドでsortInfoオブジェクトを使用します。

コードの使用

次のサンプルコードでは、いずれかのボタンを選択すると、最初の列が並べ替えられます。

JavaScript
コードのコピー

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
 var activeSheet = spread.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(){
      //ボタンをクリックするたびに、列1を昇順で並べ替えます。
     activeSheet.sortRange(-1, 0, -1, 1, true, [{index:0, ascending:true}]);
    });

 $("#button2").click(function(){
     // ボタンをクリックするたびに、列1を降順で並べ替えます。
      activeSheet.sortRange(-1, 0, -1, 1, true, [
        {index:0, ascending:false}
      ]);
  });
 // ページにコマンドボタンコントロールを追加します。
 <input type="button" id="button1" value="button1"/>
 <input type="button" id="button2" value="button2"/>

コードの使用

次のサンプルコードでは、ボタンを選択すると、sortInfoオブジェクトで指定した並べ替え条件を使用してデータが並べ替えられます。

JavaScript
コードのコピー
activeSheet.setRowCount(6);
activeSheet.setValue(0, 0, 10);
activeSheet.setValue(1, 0, 100);
activeSheet.setValue(2, 0, 100);
activeSheet.setValue(3, 0, 10);
activeSheet.setValue(4, 0, 5);
activeSheet.setValue(5, 0, 10);
activeSheet.setValue(0, 1, 10);
activeSheet.setValue(1, 1, 40);
activeSheet.setValue(2, 1, 10);
activeSheet.setValue(3, 1, 20);
activeSheet.setValue(4, 1, 10);
activeSheet.setValue(5, 1, 40);

    $("#button1").click(function(){
        // 1番目のキーが列1であり、2番目のキーが列2となるSortInfoオブジェクトを作成します。
        var sortInfo = [
            {index:0, ascending:true},
            {index:1, ascending:true}];
        /// 作成した並べ替え条件に基づき、全行を対象として並べ替えを実行します。
        activeSheet.sortRange(0, -1, 6, -1, true, sortInfo);
    });

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

非表示のデータの無視

並べ替えを行う時に非表示のデータを無視するには、ignoreHiddenオプションを使用します。セルまたはセル範囲は、次の場合に非表示とみなされます。

次の表は、データに非表示の行(セルA5:A6)を含み、ignoreHiddenを使用してデータを並べ替える方法を示します。

元のデータ ignoreHiddenがtrueの場合 ignoreHiddenがfalseの場合

コードの使用

次のサンプルコードは、非表示の行を無視してデータを並べ替える方法を示します。

JavaScript
コードのコピー
// アクティブシートを取得します。
var activeSheet = spread.getSheet(0);
// データを設定します。
activeSheet.setValue(0, 0, "名前");
activeSheet.setValue(0, 1, "年齢");
activeSheet.setValue(1, 0, "Rick");
activeSheet.setValue(1, 1, 52);
activeSheet.setValue(2, 0, "Tim");
activeSheet.setValue(2, 1, 50);
activeSheet.setValue(3, 0, "Jerry");
activeSheet.setValue(3, 1, 46);
activeSheet.setValue(4, 0, "Jack");
activeSheet.setValue(4, 1, 98);
activeSheet.setValue(5, 0, "Sandy");
activeSheet.setValue(5, 1, 99);
activeSheet.setValue(6, 0, "Smith");
activeSheet.setValue(6, 1, 42);
activeSheet.setValue(7, 0, "Greg");
activeSheet.setValue(7, 1, 41);
activeSheet.setValue(8, 0, "Sia");
activeSheet.setValue(8, 1, 36);
activeSheet.setValue(9, 0, "Jennet");
activeSheet.setValue(9, 1, 38);
activeSheet.setValue(10, 0, "Rachel");
activeSheet.setValue(10, 1, 37);
// 行を非表示にします。
activeSheet.setRowHeight(4, 0.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setRowHeight(5, 0.0, GC.Spread.Sheets.SheetArea.viewport);

// ignoreHiddenをtrueに設定し、「年齢」列を並べ替えます。
activeSheet.sortRange(1, 1, 10, 1, true, [{ index: 1, ascending: true }], { ignoreHidden: true });

Spread.Sheetsでは、groupSort列挙体を使用してグループ化されたデータを並べ替えることができます。グループ化されて展開されていないデータは、非表示の行または列とみなされます。グループ化されたデータの並べ替えの詳細については、「グループ化されたデータの並べ替え 」を参照してください。

次の表は、groupSortおよびignoreHiddenを使用した時にデータの動作を示します。

ignoreHidden=true ignoreHidden=false ignoreHidden undefined
groupSort (group, child or full) グループを並べ替え、非表示の値を無視しません。
groupSort (flat) 非表示の値を無視します。 非表示の値を無視しません。 非表示の値を無視します。
groupSort undefined 非表示の値を無視します。 非表示の値を無視しません。

並べ替える範囲にグループが含まれている場合、グループに対して並べ替えを適用します。

並べ替える範囲にグループが含まれていない場合、非表示の値を無視します。

次のサンプルコードは、ignoreHiddenおよびgroupSortを使用する方法を示します。

JavaScript
コードのコピー
// データを設定します。
 activeSheet.setArray(3, 0, [
     [6221], [5125], ['Samsung'], [4348], [3432], ['LG'], [1928], [2290], ['Oppo'], [8939], [7006], ['Apple']
 ]);
 activeSheet.rowOutlines.group(3, 2);
 activeSheet.rowOutlines.group(6, 2);
 activeSheet.rowOutlines.group(9, 2);
 activeSheet.rowOutlines.group(12, 2);
 spread.resumePaint();

 // rowFilterを設定します。
 activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(3, 0, 13, 1)));

 // 行を非表示にします。
 activeSheet.setRowHeight(4, 0.0, GC.Spread.Sheets.SheetArea.viewport);
 activeSheet.setRowHeight(5, 0.0, GC.Spread.Sheets.SheetArea.viewport);

 //1) フィルターダイアログを使用して、グループの並べ替えを適用するデータを並べ替えたり、非表示の値を無視したりする場合は、RangeSortingイベントを使用します。
 spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (e, info) {
     // GroupSortをfullに設定します。
     info.groupSort = GC.Spread.Sheets.GroupSort.full;
     // ignoreHiddenをtrueに設定します。
     info.ignoreHidden = true;
 });

 //2) APIを使用して、グループの並べ替えを適用するデータを並べ替えたり、非表示の値を無視したりする場合は、次のコードを使用します。
 // activeSheet.sortRange(3, 0, 13, 1, true, [{ index: 0, ascending: true }], { ignoreHidden: true, groupSort: GC.Spread.Sheets.GroupSort.full });