[{"id":"ff9bd47a-cd46-472d-af43-366f35920ef1","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f674ca00-4cf2-4f53-9a08-4aa596ff5f02","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5f9ed446-5e43-4e35-b070-bbedb3095625","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c8f61bda-f911-4c26-aa5c-cf046d91d345","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ffcf2b4f-0e46-41d0-b0b7-0cc510a2a482","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4200be12-4188-42f3-9cf4-5fcaebbc57f7","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7bc4edb3-af3c-4fe3-8820-973c7b43d825","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"af815243-c00f-4782-b362-bb52a9129e99","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd8aaf4e-1ba8-4025-8ba9-d57cfbefbc58","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"874f311d-9a12-4e41-9c01-e7aaa99ab496","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5811b0f0-9142-4dec-87d5-11fbd1e001ec","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"cef428a7-3494-4942-81f6-6712e4b9d1e7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"3be03770-5428-4ad4-8ebc-09708a22e209","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"563145bf-65b2-4718-851d-594d1b9cf1f6","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"b273295a-e4a0-45ad-be8a-5c3a2322d22c","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"76f8df3f-5d71-4244-8fa6-6be30e10170f","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7990d3f5-9c4c-4c37-9a96-7e7b1cf0e531","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a5d052e6-ac14-4b26-b51d-2042af4bd88c","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4a6e9860-0849-40aa-8cdb-c16c5fb52ef4","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"b02661dd-4bf2-4e6a-94c0-c85827e19c52","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"06c9877a-acd0-49b6-8a35-52d10c942e21","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"b9cc95e6-4c7e-4ae6-9168-6270c8b9df48","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"81742c3e-102a-44f5-8e12-83cdddf79651","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f6568a5c-eb38-4edb-af3a-8af10e64b122","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f30f3e16-1db8-48eb-b7a8-de189c306e42","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c38d9bd1-ec29-4861-bea2-e9939a1d40b8","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c7f7e6eb-630d-4851-ab1a-eeafb6882ff9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e82078d4-d506-4d51-83ea-129c35f610c2","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2cf396a7-8e6d-4ece-867e-2a346c855b76","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7fdf2b77-d2f1-440f-8bde-79873ae161be","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4bfbb7a7-db6a-4e62-9bb9-043090f29e06","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4acb1bbe-766a-4271-a1e7-156999bf6da7","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e2476b8f-2102-441c-9f8c-bbd9ca5f94c8","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"eeba73bc-77fb-4e4c-addd-f365b53e009b","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"604aae49-9273-455c-813b-c2c97aa713c7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"fd995bda-fac2-4ef5-ab75-d8f6840b937a","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"24dbdbdf-1539-4e43-8f9f-036adaf28f36","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6896e627-8625-484c-9487-48803c13019b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"035cce7b-7cfc-405b-b003-419583668944","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"139bcd73-12b9-4e78-843c-dd63933e35b8","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f38fe005-cfd6-4f25-9c83-f5a545aaa911","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5fa9f1d8-ed73-4642-82cd-cb4f7a9a145a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"09b280d0-fc2f-438a-8d57-e87c6ef02d8b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
入力マスクは、期待する入力形式を定義する書式文字列です。入力をマスクすると、入力ミスによるエラーの可能性が減り、データベース内の一貫性が維持されるため、データの解析、処理などを容易に実行できます。 入力マスクは、パターン、プレースホルダー、マスク文字などで構成され、ユーザー定義のルールを使用して作成できます。
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@grapecity.e | |
名前 | ><{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 |