新規投稿
フォローする

テーブルの行追加時にテーブル内フィールドをdisableにしたい

ユーザーに入力や編集をさせたくないフィールドがある場合、そのフィールドのdisabledプロパティにtrueをセットしますが、テーブル内のフィールドについて、行追加された場合の扱いに難儀しています。

レコード新規登録画面にテーブルがあった場合、 app.record.create.show イベントでテーブルの1行目のあるフィールドをdisabledにすることはできますが、行追加された場合に特にイベントが発生するわけではないので、2行目以降の該当フィールドをdisabledにすることができません。
(編集画面の場合は、既に入力されている行の分はdisabledにできますが、更に行追加した時に同様の事象となります)

一番良い解決策は行追加時にイベントが発生してくれれば良いのですが、まだそのようにはなっていないので、もし同様の悩みでなんらかの解決策を取られた方がいらっしゃるようでしたらアドバイスをお願い致します。

タイマーでしょうか?w

0

3件のコメント

Avatar
山下 竜

斎藤さん

丁度同様のニーズを受けていたので、私もsetTimeoutのループで監視してトライしてみました。仰っる通りイベント(event.record)が使えませんので、禁じ手のDOM操作で行いました。テーブル等の指定は複雑ですし、subtable-***やvalue-###のためにユーザによるフォームの編集にも耐えられないのでメンテナンス性も良くないです。イベント発生の実装を期待したいですね。

開始日と期間から終了日を自動算出・入力する内容がメインの関数ですが、サンプル貼らせてもらいます。

function tableFieldDisabled() { // サービス開始日と期間から終了日を算出・入力する(jQuery要)
    var elTable = $('.subtable-10507').get();
    var tableLength=$(elTable[0].children[1]).children().length;
    for(var i=0; i<tableLength; i++){
        var elTr = elTable[0].children[1].children[i];
        var elStart = $(elTr).find('.control-value-gaia.value-10501').find('input');  // 開始日
        var elEnd = $(elTr).find('.control-value-gaia.value-10502').find('input');  // 終了日
        var elTerm = $(elTr).find('.control-value-gaia.value-135022').find('input');  // 期間
        // サービス終了日は入力禁止フォームにする
        elEnd.attr("disabled", "");
        var elDiv=elEnd.parent();
        elDiv.attr("class", "input-date-cybozu disabled-cybozu");
        if(elStart.val()!=="" && elTerm.val()!==""){
            // サービス終了日を算出・入力する
            var d = new Date(elStart.val());
            d.setMonth(parseInt(d.getMonth())+parseInt(elTerm.val()));
            d.setDate(d.getDate()-1);
            elEnd.val( d.toISOString().slice(0,10) );
        }
    }
    // 500ミリ秒間隔で繰り返す
    setTimeout(tableFieldDisabled, 500);
}

私もよりスマートな方法があれば教えて頂きたいです。

0
Avatar
斎藤 栄

山下さん、ありがとうございます。
やはりsetTimeoutしか無さそうですね。ちょっとやってみます。
行追加時のイベントはぜひ実装されてほしいですね。

0
Avatar
山下 竜

斎藤さん
行追加時イベント、祈りましょう!

1
サインインしてコメントを残してください。