[{"id":"924e5c0c-0717-4fae-9bbc-0b496941985e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"22646924-f1ae-4a94-ac8e-e3e8ea2931f2","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"827318c4-10fd-462b-aa96-fab2cff174a9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8f626f70-8570-4934-a0e5-fc0ca6584738","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1029bbcc-399c-42e6-b412-a0437395d2d5","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e6097ce-e53b-416c-89c8-a3708db50528","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"3d1b1e48-357c-4999-985c-d9422356690a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e6cb5248-c20b-4d3e-adaf-b5c547e29548","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"58695f0f-7cb8-4bad-b617-dda90b01f606","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"081f453a-0e9a-4f06-a70b-18085a1f0d81","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2c1d8bf8-2b69-4b16-bac9-9c46901abb6a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a042f416-d318-415c-b294-ed88a5010572","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7a454c88-860a-4e28-b52c-b18bae07dfe8","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"63b1ec03-c852-40ec-860e-f025c5791091","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6b7d135b-71b4-4af7-828c-b28bf70b8ec7","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5937193e-fd56-4296-8e32-ba41dba8e564","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8ed468db-93ce-4cb3-8e2b-3249d9d464a7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4169f34f-3e9b-45c1-91bf-41c02c3ad5a4","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"411aa66d-8df8-4466-896a-d8de68cf7066","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7fc8dcfc-27ff-4496-96c2-d92dfe1fb4b2","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"02afd225-87f7-4f6d-8be1-0a303c8beade","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8040235f-6c53-447e-a7f0-4fe5911e066b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0610b0d6-03c7-461b-9dd4-f8d1b1787e7c","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7919ac2f-121b-447c-82ed-15d13b45df0b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1d01b943-eac8-480b-8d85-19bd093c8b3d","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1f4d1309-e22c-413f-848d-2c0ca8450b0e","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"66d78fb1-e833-4bbf-ac7c-6bdfce9a80b0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ed5ad6f1-f5a2-47b8-a915-b185e8471ca3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6e9decb7-47f3-4871-81b9-65504bc293f1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"836dcc3b-2afe-4351-bf9f-bd9e2b0c8510","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"80633614-e86b-4b0b-9129-9f7acab69f6d","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1aaae15a-3496-43eb-a681-b077034832e4","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"70ce0595-eb94-4eb3-84f6-3a89ab8a4409","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f3e379ff-ca52-44d8-a15e-966f89904220","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c1228456-1b5c-429d-b231-25c10a2b41cc","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"58e7444a-12e4-4161-81db-0bb54d09eca9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f70c6c85-addd-43e7-8e2b-69dfe4a0a2fd","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"de70365b-d7c6-4355-a59b-3e77a6a374ae","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","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 では、均等割り付け(インデント)機能を使用して、セルの幅全体に文字列を均等に配置できます。均等割り付け(インデント)オプションは、中央揃えとテキストの折り返しを組み合わせた拡張機能です。

均等割り付け機能を使用することで、テキストのすべての行の各単語はセルの幅に合わせて均等に配置され、インデント値が適用される場合はセルの左側と右側の両方がパディングされます。

したがって、均等割り付けオプションの適用時にインデント値を設定すると、各行の両端が余白に揃います。このように水平方向の配置を設定するには、horizontalAlign.distributed 列挙体を使用します。

distributed-halign

style.hAlign = GC.Spread.Sheets.HorizontalAlign.distributed; 
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport); 
activeSheet.getCell(1, 1).value("This is Distributed Alignment"); 

水平方向配置の「均等割り付」は、以下の方法で SpreadJS の他の機能と相互作用します:

  • 折り返して全体を表示する – 内容に「均等割り付」が指定された場合、文字列の折り返し機能が自動的に実装されるため、特に設定する必要がありません。

  • 縮小して全体を表示する - 均等割り付が指定された場合、このオプションが無効になります。

  • インデント - 均等割り付が指定された場合、セルの左側と右側の両方からインデントを設定します。

  • 最後の行を両端揃えする - 均等割り付が指定された場合、このオプションが無効になります。

  • 省略記号を表示 - 均等割り付が指定された場合、このオプションが無効になります。

デザイナの使用

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