🙄

宣言的なJSフレームワーク テーブル編集

2022/05/31に公開約1,600字

概要

宣言的なJSフレームワークdata-x.jsで、テーブルの編集をやってみた

フレームワーク

v0.5.4以降

https://github.com/mogera551/data-x.js

動作デモ

直接テーブルに書き込むことができる。郵便番号を入れると都道府県・市区町村が補完される。

解説

index.html

membersをインポートし、データとして渡す。

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index.html#L7-L11

models/Members.js

Arrayを拡張し、localStorageへの保存・読み込み・クリアを追加

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/models/Members.js

main.html

保存、クリアのボタン

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/html/main.html#L2-L3

行追加のボタン

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/html/main.html#L13-L13

繰り返す部分。
tdには編集できるように、contenteditable属性をつける。

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/html/main.html#L16-L27

main.js

localStorageからデータを読み込んで、初期値とする。
context.notifiableで配列を変更時通知可能にする。

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/module/main.js#L4-L7

リスト部分

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/module/main.js#L9-L27

郵便番号の入力時、非同期で検索を行い、都道府県、市区町村、住所をセットする。
非同期の場合、インデックスをはじめに取得しておく。(12行目)

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/module/main.js#L11-L23

各ボタン操作イベント、this.membersを操作するだけで良い。画面上の行の追加・削除・クリアは自動で行われる。

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/module/main.js#L29-L43

main.bind.css

https://github.com/mogera551/data-x.js/blob/v0.5.4/demo/editTable/index-spa/css/main.bind.css

感想

追加、削除、クリアをmembersへの操作だけで記述できてすっきり。

Discussion

ログインするとコメントできます