SpreadJS製品ヘルプ
動的な列サイズ
SpreadJS > 開発者の手引き > 機能 > ユーザーインタフェースの管理 > 動的な列サイズ

Spread.Sheetsでは、動的な列サイズがサポートされています。このような動的なサイズ変更はスターサイズ指定および比例サイズ変更とも呼ばれます。

動的な列サイズとは

動的な列のサイズ変更は、ユーザーが指定する加重比率(「*」で表される)に従ってビューポートが正確に分散されるように、列の幅と行の高さを設定する際に使用されます。

動的な列サイズは、次のような場合に加重比率を定義するため、数字と組み合わせて使用できます。

使用例

動的な列サイズは、レポートを分析するか、大きなスプレッドシートを処理する際に、複数の列幅を均等に広げる必要がある場合に役立ちます。

たとえば、次の図は、列A、列B、列D、列Eにそれぞれ「1.5 *」、「1.5 *」、「*」、「*」の比率で動的な列サイズを適用したスプレッドシートを示しています。

上記の例では、サイズが「1.5 *」に設定されている列Aおよび列Bは、ビューポートで標準の「*」サイズ列の1.5倍の領域を占めます。

サポートされるユーザー操作

本機能は、行列の追加、削除、サイズ変更やビューポート自体のサイズ変更の場合、ワークシートの列と行が正確にビューポートを占めていることを保証します。

ワークシートで動的な列サイズを構成するには、 setColumnWidth() およびsetRowHeight() メソッドを使用できます。本機能を適用した後、ユーザーがワークシートで次のアクションを実行すると、スター サイズ指定されている列と行のサイズが自動的に変更され、ビューポートはそれらの列や行で完全に占められます。

JSONファイルをインポートまたはエクスポートする際、動的な列サイズを使用できます。

動的な列サイズ変更の規則

動的な列サイズ機能を使用する際、次の規則に留意する必要があります。

注意: 動的な列サイズ機能には、次のような制限があります。

コードの使用

次のサンプルコードは、ワークシートで動的な列サイズを構成する方法を示します。

JavaScript
コードのコピー
<script>
  $(document).ready(function()
  {
    // Spreadを初期化します。
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
      sheetCount: 1
    });
    // activesheetを取得します。
    var activeSheet = spread.getSheet(0);
    activeSheet.suspendPaint();
    var colHeader = GC.Spread.Sheets.SheetArea.colHeader;
    activeSheet.setRowCount(12);
    activeSheet.setColumnCount(5);
    // 動的な列サイズを設定します。
    activeSheet.setColumnWidth(0, "1.5*");
    activeSheet.setColumnWidth(1, "1.5*");
    activeSheet.setColumnWidth(3, "*");
    activeSheet.setColumnWidth(4, "*");
    // 行の高さを設定します。
    activeSheet.setRowHeight(0, 50, colHeader);
    for (var row = 0; row < 12; row++)
    {
      activeSheet.setRowHeight(row, "*");
      for (col = 0; col < 5; col++)
      {
        activeSheet.getCell(row, col)
          .cellPadding('0 0 0 10')
          .vAlign(GC.Spread.Sheets.VerticalAlign.center);
      }
    }
    activeSheet.setValue(0, 0, '会社名', colHeader);
    activeSheet.setValue(0, 1, '市', colHeader);
    activeSheet.setValue(0, 2, '州', colHeader);
    activeSheet.setValue(0, 3, '電話番号', colHeader);
    activeSheet.setValue(0, 4, 'Fax', colHeader);
    activeSheet.setArray(0, 0, [
      ["Super Mart of the West", "Bentonville", "Arkansas", "(800) 555-2797", "(800) 555-2171"],
      ["Electronics Depot", "Atlanta", "Georgia", "(800) 595-3232", "(800) 595-3231"],
      ["K&S Music", "Minneapolis", "Minnesota", "(612) 304-6073", "(612) 304-6074"],
      ["Tom's Club", "Issaquah", "Washington", "(800) 955-2292", "(800) 955-2293"],
      ["E-Mart", "Hoffman Estates", "Illinois", "(847) 286-2500", "(847) 286-2501"],
      ["Walters", "Deerfield", "Illinois", "(847) 940-2500", "(847) 940-2501"],
      ["StereoShack", "Fort Worth", "Texas", "(817) 820-0741", "(817) 820-0742"],
      ["Circuit Town", "Oak Brook", "Illinois", "(800) 955-2929", "(800) 955-9392"],
      ["Premier Buy", "Richfield", "Minnesota", "(612) 291-1000", "(612) 291-2001"],
      ["ElectrixMax", "Naperville", "Illinois", "(630) 438-7800", "(630) 438-7801"],
      ["Video Emporium", "Dallas", "Texas", "(214) 854-3000", "(214) 854-3001"],
      ["Screen Shop", "Mooresville", "North Carolina", "(800) 445-6937", "(800) 445-6938"]
    ]);
    spread.resumePaint();
  }); 
</script>