テーブルの読み込みを待つ画面を出したい

お世話になります。大西と申します。

 

表題の件で知恵をお貸し頂きたく投稿いたしました。

 

社内で利用するためのタイムカードアプリで、

レコード内に1ヶ月分の表をテーブルを用いて作成しています。

(日付、出勤時刻、退勤時刻、休憩時間、勤務時間などの項目をテーブルの横軸、その月の日数を縦軸にとっています。)

 

特定のスタッフがタイムカードを編集できないようにするため、

app.record.edit.showをハンドラに、テーブル内の全フィールドにdisabled=true;を設定するプログラムを書き実装したのですが、

いざ編集画面に入ると、31行のテーブルが読み込まれるまで

Javascriptが実行されず、実行までの数秒間は入力可能となっています。

(実行されると変更前の値がreturnされるので、結果としては問題ないのですが・・・。)

 

見た目上あまり美しくないので、テーブルの表示が完了しプログラムが読み込まれるまでの間にCybozu CDNのスピナーのようなローディング画面を表示したいと考えているのですが、そのような処理は可能でしょうか。

あるいは、何か別にいい方法はございますでしょうか。

 

以上、どうぞよろしくお願い致します。

大西 さん

スピナーもイベント処理内に記述することになりますので、テーブルの展開が終了しないと表示されません。
対策としては、css で入力不可にすると、早めに適用されますのでいいと思います。

下記は、サブテーブル内の input とbutton を無効にしています。

.edit-subtable-gaia input {
pointer-events : none;
background: #dbdcdd !IMPORTANT;
box-shadow: initial !IMPORTANT;
}
.edit-subtable-gaia button {
pointer-events : none;
}

rex0220さん

 

ご回答頂きましてありがとうございます。

たしかにCSSだと早いですね。

 

全種フィールドを編集不可にしつつ、

一部開放したいフィールドがあったりしますので、

HTMLデータを見ながらがんばってみます。