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

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

テーブルを準備する

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 ("区分１コード", "区分２コード")
);

共通設定

以下のテーブルを利用して、サンプルを作成します。

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 ("主キー")
)

区分１コードと区分２コードは文字列ですから、タイプを省略しても大丈夫です。

入力ダイアログ

区分１と区分２はアドオンの可読性のためIDを設定します。タイプはコンボを設定します。ソースのアドオンを登録します。

新規モードの値は空白を設定します。区分１の入力枠操作アドオンを登録します。

区分１のリスト内容は区分１マスタから取得します。

fd区分１のソース

function(initFormData,dbData,initData,result){
    return db.select("select * from 区分１マスタ order by 区分１コード")
    .map({
        value:"区分１コード",
        option:"区分１名",
    }).getArray();
}

区分２のリスト内容はテーブルデータの区分１コードを検索条件として区分２マスタから取得します。新規の場合テーブルデータがないため、区分２のリストはカラになります。

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;    
}

区分１が操作されたら、区分１の選択値を条件として、区分２マスタから配列を取得して、区分２コンボのリストに設定します。

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);
    
}

効果

新規の場合、区分１コンボのリストは値があります。

区分１コンボを選択したら、区分２コンボのリストはそれに合わせて内容が設定されます。

保存後のデータを編集モードで開く場合、区分１区分２のリスト内容をと選択値は正しく設定されます。

まとめ

今回の記事のサンプルには、以下のアドオンを利用しました。

• ソースのアドオン
• 入力枠操作のアドオン