【intra-mart】[IM-FormaDesigner]明細テーブルクリアのためのラッパー関数を作って使う

やりたかったこと

複数の明細テーブルの全行削除を行う要件がある時、同じコードが増えてしんどいため、ある程度部品化したい

ラッパー関数の定義

• アクション設定の初期表示イベントに「カスタムスクリプト」として、下記のソースコードを指定します
• 対象となる明細テーブルのフィールドIDとカラムをそれぞれ指定します。
• 今回は、以下の情報で定義しています
  • テーブルID：tb1
  • 列1のフィールド識別ID：column01
  • 列2のフィールド識別ID：column02

init_wrapper.js

if(!window.hasOwnProperty("RNGD_APP_CONST")) {
    window.RNGD_APP_CONST = {};
}

// ----------------------------------------------------------------
// PC版かスマホ版かを判断します
// ----------------------------------------------------------------
window.isPc = function() {
    // PC版かどうかを判断する
    return forma.funcs.getDisplayClientType() === "pc";
};

window.RNGD_APP_CONST.FIELD_ID_TABLE       = "tb1";
window.RNGD_APP_CONST.FIELD_ID_COLUMN01    = "column01"
window.RNGD_APP_CONST.FIELD_ID_COLUMN02    = "column02";
window.RNGD_APP_CONST.FIELD_ID_USER_SELECT = "searchDept";

(function($){
    // ----------------------------------------------------------------
    // 対象テーブル明細を削除します
    // ----------------------------------------------------------------
    window.rngdClearTableData = function(targetTableId, targetTableColumns) {
        // イベントボタン（テーブルクリア）

        function removeHtmlCollectionObject(collection, length) {   
            $(collection).each(function(idx, obj) {
                if(idx !== 0 && idx !== length - 1) {
                    $(obj).remove();
                }
            });
        }

        function formaTblGetItemData (tableId, rowId, inputIdList) {
            if(window.isPc()) {
                return formaItems.product_80_table.getItemData[tableId](rowId, inputIdList);
            } else {
                var args = {};
                args.tableId = tableId;
                args.rowId = rowId;
                args.inputIdList = inputIdList;
                return formaItems.product_80_table.getItemDataSp(args);
            }
        }

        function formaTblSetItemData (tableId, args, option) {
            if(window.isPc()) {
                formaItems.product_80_table.setItemData[tableId](args, option);
            } else {
                formaItems.product_80_table.setItemDataSp(args);
            }
        }

        // 現在設定されているテーブル情報を取得
        var rowId = "";
        var inputIdList = [];

        for(var i = 0; i < targetTableColumns.length; i++) {
            inputIdList[i] = targetTableColumns[i];
        }
        var result = formaTblGetItemData(targetTableId, rowId, inputIdList);
        
        // テーブルデータが存在する場合のみ実行する
        if(result.length > 0) {
            var args = {};
            
            if(window.isPc()) {
                args.data = {};
                args.data[targetTableId] = [];
                for(var i=0; i<result.length; i++){
                    args.data[targetTableId][i] = {};
                    for(var j = 0; j <targetTableColumns.length; j++) {
                        var columnKey = targetTableColumns[j];
                        args.data[targetTableId][i][columnKey] = "";
                    }
                }
            } else {
                // スマホ
                args.tableId = targetTableId;
                args.dataInputId = [];
                for(var i = 0; i < targetTableColumns.length; i++) {
                    args.dataInputId[i] = targetTableColumns[i];
                }

                args.inputDataList = [];
                for(var i=0; i<result.length; i++){
                    args.inputDataList[i] = {};
                    for(var j = 0; j <targetTableColumns.length; j++) {
                        var columnKey = targetTableColumns[j];
                        args.inputDataList[i][columnKey] = "";
                    }                

                }
            }

            var option = {};
            formaTblSetItemData(targetTableId, args, option);

            var tblObj = null;
            var tblLen = 0;
            if(window.isPc()) {
                tblObj = $("[table_id="+targetTableId+"]").children("table")[0].rows;
                tblLen = tblObj.length;
                removeHtmlCollectionObject(tblObj, tblLen);
            } else {
                // テーブルメインを削除
                tblObj = $("[name="+targetTableId+"_base]")[0].rows;
                tblLen = tblObj.length;
                removeHtmlCollectionObject(tblObj, tblLen);

                // テーブルのスクロールバー部分を削除
                var tblObjScroll = $("[name="+targetTableId+"_scrollable]")[0].rows;
                $(tblObjScroll).each(function(idx, obj) {
                    if(idx !== 0) {
                        $(obj).remove();
                    }
                });

                // テーブル（別ページ）を削除
                var tblObjSpDetail = $("#table_"+targetTableId)[0].rows;
                tblLen = tblObjSpDetail.length;
                removeHtmlCollectionObject(tblObjSpDetail, tblLen);
            }
        }    
    };
})(jQuery);

イベントボタンのスクリプトに設定

イベントボタンに以下のスクリプトを設定します

(function($){
    // テーブルリセット
    
    window.rngdClearTableData(
        // tb1テーブルをクリア対象とする
        window.RNGD_APP_CONST.FIELD_ID_TABLE, 
        // tb1テーブルが持つ列情報（column01, column02）を配列で指定する
        [RNGD_APP_CONST.FIELD_ID_COLUMN01, RNGD_APP_CONST.FIELD_ID_COLUMN02]);
})(jQuery);

関数の呼び出し方法

window.rngdClearTableData(テーブルID, [列のフィールド識別ID, ...])

これで、テーブル明細のクリアが少ないコードで実現できるようになりました。

最後に注意点

この対応によって発生した障害等について、一切責任を負いませんので、ご了承ください。