すべてのプラグインをチェック

28769 ワード

jquery jqueryplugin javascript php テキストリンク

もともとhttps://codeanddeploy.com訪問し、サンプルコードをダウンロードしてください
この記事では、チェックボックスですべての機能をチェックするか、MullDeleteのような複数のアクションを持つJQueryテーブルをすべてのプラグインを作成しました.私の現在のプロジェクトでは、選択した行から行を削除できる反復タスクがあります.それで、私はそれのために単純なプラグインを作成することに決めました.これは速くて、うまくいけば、それはあなたのプロジェクトにも役に立つかもしれません.

https://codeanddeploy.com/blog/jquery-plugins/jquery-table-check-all-plugin ステップ1：インストール

インストールするには、次のgit cloneコマンドを実行します.

git clone https://github.com/codeanddeploy/Jquery-Table-Check-All-Plugin.git

ステップ2：デフォルト設定

次のサンプルコードの設定を参照してください.

$( '#your_table_id_here' ).TableCheckAll();

ご覧のように、ターゲットテーブルIDでTableCheckAll()関数を初期化しました.
デフォルト設定:
をチェックします.表見出し欄のチェック・チェックボックスのすべての「=クラス」をチェックするチェックボックスのカスタムクラスを設定していない場合は、チェックボックスに「すべてチェック」クラスを追加する必要があります.
チェックBoxClass :'.テーブルの行チェックボックスのクラス行チェックボックスのカスタムクラスを設定していない場合は、行チェックボックスに“. check”を追加する必要があります.

ステップ3 :サンプルコードのデフォルト設定

既定の設定では、次のコード例を参照してください.

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Jquery Table Check All Plugin - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="dist/TableCheckAll.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $( '#users-table' ).TableCheckAll();
            });
        </script>
    </head>

    <body>
        <div class="container mt-5">
            <table class="table table-striped" id="users-table">
              <thead>
                <tr>
                  <th scope="col"><input type="checkbox" class="check-all"></th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Website</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row"><input type="checkbox" class="check"></th>
                  <td>Ronard</td>
                  <td>Cauba</td>
                  <td>https://codeanddeploy.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check"></th>
                  <td>Juan</td>
                  <td>Dela Cruz</td>
                  <td>https://google.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check"></th>
                  <td>John</td>
                  <td>Doe</td>
                  <td>https://google.com</td>
                </tr>
              </tbody>
            </table>
        </div>
    </body>
</html>

最初の行をチェックした後.

ステップ4 :カスタム設定

TableCheckAllプラグインのカスタム設定を行いましょう.この例では、CheckallCheckBoxClassのクラス名を「すべてのユーザーをチェックする」とチェックボックスクラスを「チェックユーザー」に変更しました.
すべてのチェックボックス要素をチェックし、行チェックボックスクラスに“. check - user”クラスを追加する必要があります.
以下にJQueryコードを示します.

$(document).ready(function() {
    $( '#users-table' ).TableCheckAll({
         checkAllCheckboxClass: '.check-all-users',
         checkboxClass: '.check-user'
    });
});

以下は完全なコードです.

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Jquery Table Check All Plugin - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="dist/TableCheckAll.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $( '#users-table' ).TableCheckAll({
                    checkAllCheckboxClass: '.check-all-users',
                    checkboxClass: '.check-user'
                });
            });
        </script>
    </head>

    <body>
        <div class="container mt-5">
            <table class="table table-striped" id="users-table">
              <thead>
                <tr>
                  <th scope="col"><input type="checkbox" class="check-all-users"></th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Website</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row"><input type="checkbox" class="check-user"></th>
                  <td>Ronard</td>
                  <td>Cauba</td>
                  <td>https://codeanddeploy.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check-user"></th>
                  <td>Juan</td>
                  <td>Dela Cruz</td>
                  <td>https://google.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check-user"></th>
                  <td>John</td>
                  <td>Doe</td>
                  <td>https://google.com</td>
                </tr>
              </tbody>
            </table>
        </div>
    </body>
</html>

ステップ5：1ページ内の複数のテーブル

TableCheckAllプラグインは、1つのページに複数のテーブルをサポートすることもできます.以下のサンプルコードを参照ください.

$(document).ready(function() {
    $( '#users-table' ).TableCheckAll({
         checkAllCheckboxClass: '.check-all-users',
         checkboxClass: '.check-user'
    });

    $( '#top-websites-table' ).TableCheckAll();
});

以下は完全なコードです.

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Jquery Table Check All Plugin - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="dist/TableCheckAll.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $( '#users-table' ).TableCheckAll({
                    checkAllCheckboxClass: '.check-all-users',
                    checkboxClass: '.check-user'
                });

                $( '#top-websites-table' ).TableCheckAll();
            });
        </script>
    </head>

    <body>
        <div class="container mt-5">
            <h3>Users</h3>
            <table class="table table-striped" id="users-table">
              <thead>
                <tr>
                  <th scope="col"><input type="checkbox" class="check-all-users"></th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Website</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row"><input type="checkbox" class="check-user"></th>
                  <td>Ronard</td>
                  <td>Cauba</td>
                  <td>https://codeanddeploy.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check-user"></th>
                  <td>Juan</td>
                  <td>Dela Cruz</td>
                  <td>https://google.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check-user"></th>
                  <td>John</td>
                  <td>Doe</td>
                  <td>https://google.com</td>
                </tr>
              </tbody>
            </table>

            <br>
            <br>
            <br>

            <h3>Top Websites</h3>
            <table class="table table-striped" id="top-websites-table">
              <thead>
                <tr>
                  <th scope="col"><input type="checkbox" class="check-all"></th>
                  <th scope="col">Name</th>
                  <th scope="col">Domain</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row"><input type="checkbox" class="check"></th>
                  <td>Google</td>
                  <td>https://google.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check"></th>
                  <td>Youtube</td>
                  <td>https://youtube.com</td>
                </tr>
                <tr>
                  <th scope="row"><input type="checkbox" class="check"></th>
                  <td>Facebook</td>
                  <td>https://facebook.com</td>
                </tr>
              </tbody>
            </table>
        </div>
    </body>
</html>

結果:

私はこのチュートリアルを助けることを望む.あなたがこのコードをダウンロードしたいならば、親切に

をここで訪問してください.
ハッピーコーディング

Reference

この問題について(すべてのプラグインをチェック), 我々は、より多くの情報をここで見つけました https://dev.to/codeanddeploy/jquery-table-check-all-plugin-ach

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Unit2-2

String Modification (CodeCraft-20 (Div. 2))