SpreadJS製品ヘルプ
セルの自動マージ
SpreadJS > 開発者の手引き > 機能 > ユーザーインタフェースの管理 > セルの自動マージ

Spread.Sheetsでは、自動マージがサポートされます。これにより、重複テキストが含まれた隣接するセルを自動的にマージされるように設定できます。自動マージによってデータが失われることはありません。

自動マージのメリット

自動マージ機能は、次の場合に役に立ちます。

使用例

ワークシートでデータを分析する際、データ表示を強化し、構造を改善するために、同一のテキストを含む複数のセルを結合することができます。

たとえば、販売レポートを生成する場合、一致する州名または都市名を自動的に結合することで外観がすっきりし、情報を失うことなく結合したセルでデータが保持された状態にできます。

次の図は、自動マージ操作がワークシートで国、州、都市の名前をどのように結合するかを示します。

自動マージの処理方法

自動マージ機能は、同一のテキストを含む連続したセルを自動的にマージし、マージされたセルのテキスト位置を調整します。

本機能は、結合させるセルが指定範囲の一部でない場合に動作します。Spread.Sheetsで作業する際、範囲、行、列およびワークシート全体の指定範囲に自動マージ機能を適用するには、autoMerge() メソッドを使用できます。セルを、行方向、列方向、および行と列の両方方向で結合できます。

Spread.Sheetsで自動マージを使用する際、次の2つのモードがサポートされます。

自動マージと範囲指定したマージ

ワークシートの「セルの自動マージ」と「範囲指定したマージ」の実行の基本的な違いは次のとおりです。

注意: 自動マージ機能には、次の制限事項があります。

コードの使用

次のコードは、autoMerge()メソッドを使用して、同一の国、州、都市の名前を含むセルを自動マージする方法を示します。

JavaScript
コードのコピー
<script>
  var data = [
    {
      "Country": "Canada",
      "State": "Ontario",
      "City": "Ottawa",
      "Product": "Kraft Grated Parmesan Cheese"
    },
    {
      "Country": "Canada",
      "State": "Ontario",
      "City": "Belleville",
      "Product": "KIND Bars Almond & Coconut Gluten Free"
    },
    {
      "Country": "Canada",
      "State": "Ontario",
      "City": "Alliston",
      "Product": "Kraft Grated Parmesan Cheese"
    },
    {
      "Country": "Canada",
      "State": "Saskatchewan",
      "City": "Prince Albert",
      "Product": "Smartfood Popcorn"
    },
    {
      "Country": "Canada",
      "State": "Alberta",
      "City": "Red Deer",
      "Product": "Smartfood Popcorn"
    },
    {
      "Country": "Canada",
      "State": "Alberta",
      "City": "Calgary",
      "Product": "Planters Deluxe Whole Cashew"
    },
    {
      "Country": "Canada",
      "State": "Alberta",
      "City": "Calgary",
      "Product": "Kraft Grated Parmesan Cheese"
    },
    {
      "Country": "Canada",
      "State": "Alberta",
      "City": "Okotoks",
      "Product": "Smartfood Popcorn"
    },
    {
      "Country": "India",
      "State": "Andhra Pradesh",
      "City": "Hyderabad",
      "Product": "Teddy Grahams Crackers"
    },
    {
      "Country": "South Africa",
      "State": "Gauteng",
      "City": "Roodepoort",
      "Product": "Jaybee's Gourmet Nuts Gift Pack (3 Lb)"
    },
    {
      "Country": "Finland",
      "State": "Ita-Suomen Laani",
      "City": "Kuopio",
      "Product": "Planters Deluxe Whole Cashew"
    },
    {
      "Country": "Switzerland",
      "State": "Geneve",
      "City": "Vesenaz",
      "Product": "KIND Bars Almond & Coconut Gluten Free"
    },
    {
      "Country": "Switzerland",
      "State": "Vaud",
      "City": "Lausanne",
      "Product": "Smartfood Popcorn"
    },
    {
      "Country": "Switzerland",
      "State": "Vaud",
      "City": "Morges",
      "Product": "Kraft Real Mayo"
    },
    {
      "Country": "Denmark",
      "State": "Frederiksborg",
      "City": "Helsingor",
      "Product": "Planters Deluxe Whole Cashew"
    },
    {
      "Country": "Denmark",
      "State": "Kobenhavn",
      "City": "Kobenhavn",
      "Product": "Kraft Grated Parmesan Cheese"
    },
    {
      "Country": "Denmark",
      "State": "Storstrom",
      "City": "Nakskov",
      "Product": "Kraft Grated Parmesan Cheese"
    }]
</script>
<script>
    $(document).ready(function()
    {
      GC.Spread.Sheets.LicenseKey = "xxx";
      // Spreadを初期化します。
      var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
        sheetCount: 1
      });
      // activesheetを取得します。
      var activeSheet = spread.getActiveSheet();
      // データソースと連結します。
      activeSheet.setRowHeight(0, 30, 1);
      activeSheet.autoGenerateColumns = true;
      activeSheet.setDataSource(data);
      /* AutoMergeDirectionがColumnに設定され、AutoMergeModeが制限モードに設定されている場合、完全なシートセルをマージします。*/
      var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
      activeSheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column, GC.Spread.Sheets.AutoMerge.AutoMergeMode.restricted);
      // 列幅を設定します。
      for (var c = 0; c < activeSheet.getColumnCount(); c++)
        activeSheet.setColumnWidth(c, 130.0, GC.Spread.Sheets.SheetArea.viewport);
    });
</script>