一覧画面でチェックを入れたレコードがわかりづらい

こんにちは、プリザンターのスクリプトの開発を担当しておりますCCSの徐(ジョ)です。

プリザンターでレコードを一括削除をする際などで、複数のレコードを一覧の左にあるチェックボックスでチェックすることってありますよね。その時にどのチェックボックスにチェックしたのか、どのレコードが選択されたのか、などが分かりにくいと思ったことはありませんか？

今回は、そのような時にチェックしたレコードを分かりやすくするために、一覧画面でチェックボックスをチェックした行の背景を変更するスクリプトを紹介します。選択されたレコードの色が変わっていると、視認性も良くなって選択間違いも少なくなり、効率も上がると思います。
実際に当社で実装している画面を載せておきます。このブログの管理を行っているテーブルになります。

詳細は次で紹介いたします。
なおブラウザは最新のChromeで確認をしていますので、その他のブラウザやバージョンでの動作は未確認ですのでご了承ください。

一覧画面でチェックした行の背景色を変更するスクリプト

設定手順は以下の通りです。

1. 対象のテーブルを開きます。
2. メニューから、「管理」⇒「テーブルの管理」を開きます。
3. 「スタイル」タブを開きます。
4. 「新規作成」をクリックし、[タイトル]に「背景色」などと入力し、以下のスタイルを記載します。
5. 「出力先」は、「全て」のチェックを外し、「一覧」にチェックをして、「追加」をクリックします。
6. 次に「スクリプト」タブを開きます。
7. 「新規作成」をクリックし、[タイトル]に「背景を変更する」などと入力し、以下のスクリプトを記載します。
8. 「出力先」は、「全て」のチェックを外し、「一覧」にチェックをして、「追加」をクリックします。
9. 「更新」をクリックします。

.selected{

background:#8C9EFF !important;

}

$("body").delegate("#Grid>tbody tr td:first-child input[type='checkbox']", "change", function () {

    if ($(this).parents("tr").hasClass("selected")) {

        $(this).parents("tr").removeClass("selected");



    } else {

        $(this).parents("tr").addClass("selected");

    }

})

まとめ

さて、いかがでしたか？

今回一覧画面でチェックした行の背景色を変更するスクリプトを紹介しました。
これで削除時などに間違ったところにチェックが入っていても気が付きやすくなりましたね。

導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。プリザンター逆引き辞典PDF版やスタイル・スクリプトサンプル集PDF版の販売もしております！

☆☆ブログ内容への質問や追加説明をご希望の方は
【問い合わせフォーム】　こちら　からお気軽にお問い合わせください☆☆