[{"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)

入力マスク

入力マスクは、期待する入力形式を定義する書式文字列です。入力をマスクすると、入力ミスによるエラーの可能性が減り、データベース内の一貫性が維持されるため、データの解析、処理などを容易に実行できます。 入力マスクは、パターン、プレースホルダー、マスク文字などで構成され、ユーザー定義のルールを使用して作成できます。

SpreadJS は、入力マスクを設定するための mask プロパティと pattern オプションを提供します。placeholder オプションを使用してプレースホルダーを指定します。プレースホルダーは、入力フィールドで表示される文字列で、予期される入力形式を表し、その形式の値を入力するようにユーザーをガイドします。ユーザーがplaceholderを指定しない場合、SpreadJS はデフォルトでアンダーバー「_」を使用します。入力文字列にプレースホルダー文字を表示するかどうかを選択するには、excludePlaceholder オプションを設定します。

例えば、マスクパターンが「000000」で、プレースホルダーが「_」の場合、入力フィールドは「______」(6個のアンダーバー)を表示し、6桁の数字の形式を示します。excludePlaceholderオプションがfalseの場合、ユーザーが「1234」と入力して編集モードを終了すると、「1234__」が保存されます。オプションがtrueの場合、プレースホルダーを除いた「1234」が入力結果として保存されます。

同様に、excludeLiteral オプションをtrueに設定してリテラル文字を除外することもできます。リテラルは、特定の位置にそのまま表示され、他の文字に置き換えられない文字です。例えば、電話番号で使用される括弧やハイフン、日付形式のスラッシュなどがその例です。

次のサンプルコードは、入力マスクを設定する方法を示します。

    style = new GC.Spread.Sheets.Style();
    style.mask = {
        pattern: "[a0]{8}",
        excludePlaceholder: true
    };
    sheet.setStyle(14, 0, style);

    style1 = new GC.Spread.Sheets.Style();
    style1.mask = {
        pattern: "Au\\t\\hor: (Chris|Icey|Victor|Ian|Johnson|Ivan)",
        excludeLiteral: true
    };
    sheet.setStyle(15, 0, style1);

カーソルがプレースホルダーにあるときにユーザーが文字を入力すると、プレースホルダー文字が新しい文字に置き換えられます。それ以外の場合は、新しい文字が挿入されます。ユーザー入力がパターンと一致しない場合、SpreadJS はパターンに一致する部分を左から右に保持し、残りの無効な部分を削除します。ただし、ユーザーがテキストを削除すると、カーソルのあるフィールド内容のみを削除できます。たとえば、パターン「a{3}0{3}」の場合、ユーザーが入力の左端の文字から削除を開始すると、SpreadJS は現在のフィールドの最初の 3 文字を削除します。残りの入力を削除するには、ユーザーは次のフィールドにカーソルを移動する必要があります。

あるパターンの有効性を確認するために、SpreadJSは validatePattern メソッドを提供します。次のサンプルコードは、validatePatternメソッドを使用して、パターンの有効性を確認する方法を示します。

let sheet = spread.getActiveSheet();
let style = new GC.Spread.Sheets.Style();
let pattern = 'ISBN 0-00000-000-0';
let verifyResult = GC.Spread.Sheets.InputMask.validatePattern('[a0_]{8}');
if (verifyResult.success) {
  style.mask = {
    pattern: 'ISBN 0-00000-000-0'
  };
  sheet.setStyle(0,0,style);
}

マスクパターンは2種類あります。

  • 文字列パターン

  • 日付パターン

文字列パターン

文字列パターンは入力形式を定義する最も簡単な方法であり、最小パターン単位を使用して構築できます。最小パターン単位は、文字制限と、文字長制限(オプション)で構成されます。 文字長制限を指定しない場合は1文字と考慮します。次の表では、2 種類の制限を使用してパターンを作成するさまざまなルールを定義しています。

制限

カテゴリ

パターン文字

説明

サンプルパターン

'_'をプレースホルダーとして表示

入力

出力

文字長

文字

a

文字

aaa

___

abc

abc

>

文字が自動的に大文字に変換される

>

_

a

A

><<<<

_____

chris

Chris

<

文字が自動的に小文字に変換される

<

_

A

a

数字

0

数字(0-9)

000

___

123

123

___

12

12_

オプション

()

括弧 () 内の文字列はいずれも一致する

0{1,3} (kg|lb)

_ kg

12 k

12kg

|

文字列間の区切り文字

括弧()内で使用

括弧() 内の文字は静的な文字列

括弧内にエスケープ文字は必要ない。

Aut\\hor:(Chris|Icey|Victor|Ian)

or

(Author):(Chris|Icey|Victor|Ian)

Author:Chris

V

Author:Victor

[]

キーワードとリテラルを全体として結合する

[>0]{5}

_____

a7osn

A7OSN

-

文字範囲を指定する

角括弧[]内で使用される

[\\a-f]

_

b

b

特殊文字

\(パターン文字列の場合、 「\\」を使用する)

エスケープ文字

0\>0

_>_

32

3>2

#

任意文字

###

___

a1&

a1&

文字長制限

動的

{n}

n回繰り替え

0{4}/0{2}/0{2}

____/__/__

20230101

2023/01/01

{n,m}

最小限「n」回と最大限「m」回繰り替え

0{1,3}.0{1,3}.0{1,3}.0{1,3}

_._._._

1270.0.1

127.0.0.1

[\\01]{0,}


1010

1010

{,m}

最大「m」回繰り返え

0{,3}


123

123

{n,}

最小「n」回繰り替え

0{1,}.0{2}

_.__

1234.56

1234.56

動的なパターンでは、

  • プレースホルダーは、最小長のみを表します。 たとえば、0{2,10} で「__」が表示され、0{0,1} の場合何も表示されません。

  • {n,m} の「m」を指定しない場合、動的パターンの最大長は 2147483648 になります。

日付パターン

日付パターンは、日付値と時刻値の形式を指定します。固定形式のパターンであり、文字長の制限を受け入れません。日付パターンの場合、SpreadJS は日付ルールを元にユーザー入力を自動的に修正します。ただし、yyyy、MM などの日付時刻項目を 1 つのパターンで繰り返して使用できません。たとえば、「yyyy/MM/dd yyyy」は、「yyyy」が 2 回使用されているので、無効なパターンです。

次の表は、日付パターンのマスク文字とその使用を例で説明します。

パターン文字

説明

サンプルパターン

_'をプレースホルダーとして表示

ユーザー入力

出力

y

yy/MM/dd

__/__/__

23317

23/03/17

yyyy/MM/dd

____/__/__

2023317

2023/03/17

M

yyyy/M/dd

____/_/__

2023317

2023/3/17

yyyy/MM/dd

____/__/__

2023317

2023/03/17

d

yyyy/MM/d

____/__/_

202337

2023/03/7

yyyy/MM/dd

____/__/__

202337

2023/03/07

H

24時間

HH:mm:ss

__:__:__

2277

22:07:07

H:mm:ss

_:__:__

577

5:07:07

h

12時間

hh:mm:ss (am|pm)

__:__:__ am

277 p

02:07:07 pm

h:mm:ss (pm|am)

_:__:__ pm

277 a

2:07:07 am

m

HH:mm:ss

__:__:__

2277

22:07:07

HH:m:ss

__:_:__

2277

22:7:07

s

HH:mm:ss

__:__:__

2277

22:07:07

HH:mm:s

__:__:_

2277

22:07:7

t

時間形式

hh:mm:ss t

__:__:__ A

2277p

22:07:07 P

hh:mm:ss tt

__:__:__ AM

2277p

22:07:07 PM

名前付きパターン

名前付きパターンを定義し、他のパターンで再利用することもできます。ただし、namedPatterns 内のいずれかの名前と一致する文字列がパターン内にある場合、マスクはそれを名前付きパターンに置き換えます。 したがって、繰り返しの可能性を最小限に抑えた名前でパターンを定義することをお勧めします。すべての名前パターンのリストを取得するには、SpreadJS に静的メソッド getNamedPatterns が用意されています。

// 名前付きパターンを定義します。
GC.Spread.Sheets.InputMask.namedPattern('enterdate', 'MM/dd/yyyy hh:mm tt');
let style = new GC.Spread.Sheets.Style();
style.mask = {
  // 別のパターンで再利用します。
  pattern: '(start): enterdate'
};
sheet.setStyle(0, 0, style);

数式パターン

SpreadJSは数式パターン(数式形式で作成され、「=」で始まるパターン)に対応します。例えば、ワークシートのA1からA3のセルの値が「Chris」、「Icey」、「Ian」である場合、次の2つのパターンは同じ結果になります。

数式パターン

同等パターン

'="Aut\\hor:("&TEXTJOIN("|",TRUE,A1:A3)&")"'

'Aut\\hor:(Chris|Icey|Ian)'

パターンの有効性を確認するvalidatePatternの静的メソッドは、数式パターンに対応しません。数式パターンの有効性を確認するには、validatePatternメソッドを呼び出す前に、GC.Spread.Sheets.CalcEngine.evaluateFormulaを使用します。

  • () パターン内の文字は静的文字列なので、(am|pm) はエスケープ文字を使用せずにそのまま記述できます。

  • グループ制限で一つのグループ項目である場合、静的文字列として見なされます。

  • デフォルトで、マスク部分にグループ制限の最初の項目を表示します。ユーザーの入力を受け取ると、マスク部分にはグループ項目のテキストが自動的に補完されます。

  • 入力エクスペリエンスを向上させるため、グループ制限では大文字と小文字が区別されません。

  • 静的文字列またはグループ テキストの場合、SpreadJS は数量子をサポートしないので、1234{1,5}、(12|34){1,5} などのパターンを設定しないでください。

  • SpreadJS は、グループ「()」とオプションの「[]」のネストをサポートしていません。

  • マスクされたセルが編集モードに入ると、内部の数式テキストボックスは禁止され、外部の数式テキストボックスは読み取り専用になります。

  • 数式セルが編集モードに入ったとき、マスクは有効になりません。

  • マスク編集後、エディタの値が「=」、「-」、「+」で始まる場合は、quotePrefix が自動的に追加されます。

サンプルパターン

次の表は、通常使用されるパターンを一覧します。

シナリオ

パターンやオプション

表示

入力

出力

E-メール

[a0]{1,}@[a0]{1,}.(com|cn|gov|edu)

_@_.com

chris@mescius.e

chris@mescius.edu

名前

><{1,} ><{1,}

__ __

chris diao

Chris Diao

長い日付形式

dd-MM-yyyy HH:mm

__-__-____ __:__

16720231620

16-07-2023 16:20

短い日付形式

dd-MM-yyyy

__-__-____

1672023

16-07-2023

確認コード

[>0]{5}

_____

a7osn

A7OSN

10進数

[\-]{,1}0{0,}[.]{,1}0{0,}


-12.34

-12.34

12.34

12.34

2進数

[\\01]{0,}


10101

10101

アメリカの電話番号

[\\(]0{3}[\\)][-]0{3}[-]0{4}

(___)-___-____

1234567890

(123)-456-7890