【ローコードのSKE】階層連動ドロップダウン

今回の記事は、SKEによる階層連動ドロップダウンのサンプルです。

## テーブルを準備する
```sql
CREATE TABLE "区分１マスタ"
(
  "区分１コード" character varying(10) NOT NULL,
  "区分１名" character varying(10),
  CONSTRAINT "区分１マスタ_pkey" PRIMARY KEY ("区分１コード")
);
CREATE TABLE "区分２マスタ"
(
  "区分１コード" character varying(10) NOT NULL,
  "区分２コード" character varying(10) NOT NULL,
  "区分２名称" character varying(10),
  CONSTRAINT "区分２マスタ_pkey" PRIMARY KEY ("区分１コード", "区分２コード")
);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/16bc8bfd-b6f2-4d62-8d2c-359ed552cb28.png)
## 共通設定
以下のテーブルを利用して、サンプルを作成します。
```sql
CREATE TABLE "テストテーブル"
(
  "主キー" integer NOT NULL,
  "名称" character varying(10),
  "区分１コード" character varying(10),
  "区分２コード" character varying(10),
  "作成者" character varying(20),
  "作成日時" timestamp without time zone,
  "最終更新者" character varying(20),
  "最終更新日時" timestamp without time zone,
  CONSTRAINT "テストテーブル_pkey" PRIMARY KEY ("主キー")
)
```
区分１コードと区分２コードは文字列なので、タイプを省略しても大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/500737f1-e27b-4f4e-b60a-68055d48210f.png)
## 入力ダイアログ
区分１と区分２はアドオンの可読性のためIDを設定します。タイプはコンボボックスに設定します。ソースのアドオンを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/4a87c703-2f28-4037-9f02-e47aeedf14f7.png)
新規モードの値は空白を設定します。区分１の入力枠操作アドオンを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/b102596c-1f1f-435c-aa7a-57ff57d6b973.png)

区分１のリスト内容は区分１マスタから取得します。
```js:fd区分１のソース
function(initFormData,dbData,initData,result){
    return db.select("select * from 区分１マスタ order by 区分１コード")
    .map({
        value:"区分１コード",
        option:"区分１名",
    }).getArray();
}
```
区分２のリスト内容はテーブルデータの区分１コードを検索条件として区分２マスタから取得します。新規の場合テーブルデータがないため、区分２のリストは空になります。
```js:fd区分２のソース
function(initFormData,dbData,initData,result){
    var fd区分１=dbData["区分１コード"];
    var ary=db.select("skeComm","freeSql",{
        sql:"select * from 区分２マスタ where 区分１コード=:fd区分１ order by 区分２コード",
        fd区分１:fd区分１,
    }).map({
        value:"区分２コード",
        option:"区分２名称",
    }).getArray();
    ary.unshift({
        value:"",
        option:"",
    });
    return ary;    
}
```
区分１が操作されたら、区分１の選択値を条件として、区分２マスタから配列を取得して、区分２コンボのリストに設定します。
```js:fd区分１の入力枠操作
function(touchFormData){
    var fd区分１=touchFormData.fd区分１;
    var ary=db.select("skeComm","freeSql",{
        sql:"select * from 区分２マスタ where 区分１コード=:fd区分１ order by 区分２コード",
        fd区分１:fd区分１,
    }).map({
        value:"区分２コード",
        option:"区分２名称",
    }).getArray();
    ary.unshift({
        value:"",
        option:"",
    });
    return new Result()
    .runat("#TEST_inputDialog #fd区分２")
    .remove("option")
    .append("<option value={value}>{option}</option>")
    .withdata(ary);
    
}
```
## 効果
新規の場合、区分１コンボのリストのみに値があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/3ffbd672-126b-44b4-8943-c44c46caae12.png)
区分１コンボを選択したら、区分２コンボのリストはそれに合わせて内容が設定されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/a7e570a3-3cc4-43ec-8a8c-5e272905e27f.png)
保存後のデータを編集モードで開く場合、区分１区分２のリスト内容をと選択値は正しく設定されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/7f7e876c-85e0-412c-9ece-a377010355e5.png)

## まとめ
今回の記事のサンプルには、以下のアドオンを利用しました。
- ソースのアドオン
- 入力枠操作のアドオン