Jquery 테이블 모든 플러그인 확인

29356 단어 jquery jqueryplugin javascript php

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/jquery-plugins/jquery-table-check-all-plugin

이 게시물에서는 확인란이 모든 기능을 확인하거나 다중 삭제와 같은 여러 작업이 있는 테이블에 대한 간단한 jquery 테이블 검사 모든 플러그인을 만들었습니다. 현재 프로젝트에서 선택한 행에서 행을 다중 삭제할 수 있는 반복 작업이 있습니다. 그래서 간단한 플러그인을 만들기로 했습니다. 이것은 빠르고 가볍습니다. 프로젝트에도 유용할 수 있기를 바랍니다.

1단계: 설치

친절하게 설치하려면 다음 git clone 명령을 실행하십시오.

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

2단계: 기본 구성

다음 샘플 코드 구성을 참조하십시오.

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

보시다시피 대상 테이블 ID로 TableCheckAll() 함수를 초기화했습니다.

기본 설정:

checkAllCheckboxClass: '.check-all' = 테이블 표제 열의 모두 체크박스에 대한 클래스; 모두 선택 확인란에 대한 사용자 지정 클래스를 설정하지 않은 경우 모두 선택 확인란에 ".check-all"클래스를 추가해야 합니다.

checkboxClass: '.check' = 테이블의 행 확인란에 대한 클래스; 행 확인란에 사용자 정의 클래스를 설정하지 않은 경우 행 확인란에 ".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-all-users"로, checkboxClass를 ".check-user"로 변경했습니다.

그런 다음 ".check-all-users"클래스를 모든 체크박스 요소에 추가하고 행 체크박스 클래스에 ".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단계: 한 페이지에 여러 테이블

TableCheckAll 플러그인은 한 페이지에서 여러 테이블도 지원할 수 있습니다. 아래 샘플 코드를 참조하십시오.

$(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>

결과:

이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery-plugins/jquery-table-check-all-plugin를 방문하십시오.

행복한 코딩 :)

Reference

이 문제에 관하여(Jquery 테이블 모든 플러그인 확인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/jquery-table-check-all-plugin-ach

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Raspberry Pi 3B + (Ubuntu Mate 16.04LTS)에 ROS kinetic을 설치하고 turtlesim을 이동하십시오.

생성된 비트코인 주소 및 개인 키(hdwallet)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다