Help us understand the problem. What is going on with this article?

IM-FormaDesigner 明細テーブルの行挿入、削除、ドラッグアンドドロップ時に処理を行う

More than 1 year has passed since last update.

IM-FormaDesigner 明細テーブル行操作

formaのクライアントサイドAPI、アクション設定カスタムスクリプトのどこを探しても
明細テーブルの行操作を行ったときのイベントハンドラがいなかったので、やってみました。

下記スクリプトを画面アイテム:スクリプトに張り付ければ使えます。

formaTableEvent.js
// テーブル識別IDを指定 (formaでのテーブル識別ID)
var tableId = 'tb1'; 
var tableSelector = "[table_id='" + tableId + "']";

formaの明細テーブルはdomのidがランダムで振られますがtable_id属性が
formaから指定したものになっているので、それでdomを取得するようにします。

formaTableEvent.js
// 行ドラッグアンドドロップ時、イベントバインド 
$(tableSelector).on("sortupdate", function( event, ui ) {
    imuiAlert("sortupdate");
});

ドラッグアンドドロップ実現にはjQueryUI sortableが使われているので、この辺の情報をかき集めて対応します。
https://api.jqueryui.com/sortable/#event-update

formaTableEvent.js
// 明細テーブル内のtableタグidを取得
var domTableId = $(tableSelector + " table").attr("id");
// 既存の行削除イベント取得
var orgDeleteRowFunc = forma.table[domTableId].deleteRow;
// 既存の削除イベントと合わせて任意の処理実行
forma.table[domTableId].deleteRow = function(target) {
    orgDeleteRowFunc(target);
    imuiAlert("deleteRow"); // このへんにやりたいことを書く
};

行番号右クリックでメニューが出てますが、そこの行削除イベントはdeleteRowが呼ばれるようになっているので、そいつを上書きします。

formaTableEvent.js
// 既存の行追加イベント取得 このイベントは「行挿入」、「コピーした行の挿入」内部で呼ばれている
var orgAddRowFunc = forma.table[domTableId].addRow;
// 既存の行追加イベントと合わせて任意の処理実行
forma.table[domTableId].addRow = function(position, copyInput) {
    orgAddRowFunc(position, copyInput);
    imuiAlert("insert or copyAndPaste"); // このへんにやりたいことを書く
};

このaddRowは「行挿入」「コピーした行の挿入」から呼ばれています。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away