[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
        
(Showing Draft Content)

セルの配置とインデント

セル内のテキストの配置またはインデントを設定できます。hAlignvAlignメソッドを使用して、テキストの配置を垂直方向および水平方向に指定できます。インデントを指定するには、textIndentメソッドをします。


vAlignメソッドは、次の図に示すように、セル編集モードにおいてテキストの垂直方向の配置もサポートします。


注: セルの編集モードでは、テキストの垂直方向の配置はeditable div要素のみでサポートされます。textarea要素ではサポートされません。デスクトップデバイスを使用してテキスト型セルを処理する場合、セル編集モードでのテキスト垂直配置を実装するには、textarea要素をeditable divに置換する必要があります。


また、Ime-modeは、Google Chrome、Mozilla Firefoxの2つのブラウザでは機能しません。

コードの使用

次のサンプルコードは、B2セルに対して垂直および水平方向の配置を設定し、B3セルに対してテキストインデントを指定します。

// 水平方向および垂直方向の配置を中央揃えに設定します。
var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
cell.value("Alignment");
                
// 文字列をインデントします。
cell = activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.textIndent(2);
cell.value("Indent");

選択範囲内で中央

SpreadJSは、セルを結合せずに、選択したセルのコンテンツを列全体の中央に配置するのに役立つ「選択範囲内で中央」の水平方向の配置を提供します。このタイプの水平方向の配置は、 Horizo​​ntalAlign.centerContinuous 列挙オプションを使用して設定できます。


次の表は、「選択範囲内で中央」の水平方向の配置を使用したときに観察されるさまざまな動作を示しています。

振舞い

選択範囲が配置に設定されると、各セルは連続する空の値のセルを右に探し続け、最後にその内容をすべてのセルの中央に配置します


後で値が選択された範囲に入力されると、選択と中央揃えが更新され、そのセル以降が除外されます。


選択は常にフォーマットされたセルから始まります。したがって、選択範囲がセルの左から伸びている場合、それらのセルは含まれません。


列のサイズが変更されると、中央揃えが調整されます。


次のコード例は、ワークシートに「選択範囲内で中央」の水平方向の配置を実装します。

activeSheet.getCell(1,1).value("選択範囲内で中央");
activeSheet.getRange(1, 1, 1, 5, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.centerContinuous);

「選択範囲内で中央」の水平方向の配置は、SpreadJSの他の機能と次のように相互作用します。

  • オーバーフロー - 「選択範囲内で中央」アライメントのコンテンツが選択した範囲の幅を超えると、両側へのオーバーフローがトリガーされます。

  • テキストを折り返す - 行の高さプロパティは、セルに「選択範囲内で中央」領域の境界内でテキストを折り返すように強制します。

  • 縮小して合わせる - オプションが選択されている場合、widthプロパティを使用して実際のフォントサイズが計算され、選択した範囲にコンテンツが収まります。

  • 会計番号の形式 - 「選択範囲内で中央」は、テキストを直接中央揃えにするのではなく、記号と値を横に伸ばします。

  • テキストインデント - 「選択範囲内で中央」は、インデントを0にロックします。

  • 方向 - 「選択範囲内で中央」は方向を0にロックします。

  • 結合されたセル - 結合されたセルは、選択スタイル全体で中央を使用できません。セルが結合されると、「選択範囲内で中央」は「中央」に置き換えられます。

SpreadJSデザイナを使用する

[セルの書式設定]ウィンドウの[配置]タブにアクセスすると、配置およびインデント機能を使用できます。[ホーム]タブ> [配置]グループ>右下矢印ボタンをクリックして、[セルの書式設定]ウィンドウを開きます。