Jquery 확인란 역할에 여러 권한 할당
17738 단어 jquerypluginjavascriptjquerytutorial
https://codeanddeploy.com/blog/jquery/jquery-checkbox-assign-multiple-permissions-to-a-role
이 게시물에서는 역할에 여러 권한을 할당하기 위해 jquery 확인란을 구현하는 방법에 대한 간단한 코드를 공유합니다. 역할에 대한 확인란을 사용하여 여러 권한을 구현하는 경우 이 게시물이 도움이 될 수 있습니다.
이전에 제가 만든 jQuery
TableCheckAll 플러그인을 구현하는 방법에 대해 포스팅한 적이 있습니다. here the previous post 을(를) 방문할 수 있습니다.
좋아, 당신은 이미 예상되는 출력이 무엇인지 알고 있습니다. 처리 방법을 살펴보겠습니다.
먼저 TableCheckAll jquery 플러그인을 복제합니다.
git clone https://github.com/codeanddeploy/Jquery-Table-Check-All-Plugin.git
다운로드가 완료되면 다운로드한 폴더 안에 새 파일을 만듭니다.
index.html라고 가정하고 아래 코드를 붙여넣습니다.둘째, 전체 소스 코드는 다음과 같습니다.
이 섹션에는 프로젝트에 구현할 수 있는 샘플 소스 코드가 있습니다.
참고:
.select-all-permissions 및 .select-permission 클래스는 모든 모듈 권한을 선택할 수 있습니다. 따라서 이러한 클래스를 교체할 필요가 없습니다..select-permission 클래스의 경우 모듈 전체 권한 선택 확인란을 포함하여 모든 모듈 권한 확인란에 이를 추가해야 합니다. 이 코드에서 볼 수 있듯이:<tr>
<th scope="row">Clients</th>
<td><input type="checkbox" class="select-permission select-all-module-permissions select-all-client-permissions" data-class="select-all-client-permissions"> Select All</td>
<td><input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Create Client <input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Edit Client</td>
</tr>
모듈 권한을 트리거하려면 클래스
.select-module-permission 및 사용자 정의 속성data-class="select-{module_name}-permission" 및 클래스 이름을 사용하여 각 모듈 권한에 대한 특정 클래스를 추가해야 합니다. select-{module_name}-permission .{module_name}는 공백이 없는 모듈 이름입니다.그런 다음 각 모듈에서 모든 확인란을 선택합니다.
.select-all-module-permissions 클래스 이름을 추가해야 합니다. 사용 가능한 모든 모듈을 반복하는 데 이것을 사용하기 때문입니다.그런 다음 각 모듈에서 사용자 정의 속성
data-class="select-all-{module_name}-permissions"을 추가하고 클래스.select-all-{module_name}-permissions를 추가하여 모두 선택 확인란을 선택합니다.다음은 전체 소스 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jquery Checkbox Assign Multiple Permissions to a Role - 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() {
var tableSelector = '#permissions-table';
$.each( $( '.select-all-module-permissions' ).parents('tr'), function() {
var that = $(this);
var selectAllPermissionsClass = that.find('.select-all-module-permissions').attr('data-class');
$.each(that.find('.select-module-permission'), function() {
var selectPermissionClass = $(this).attr('data-class');
$( tableSelector ).TableCheckAll({
checkAllCheckboxClass: '.' + selectAllPermissionsClass,
checkboxClass: '.' + selectPermissionClass
});
});
});
$( tableSelector ).TableCheckAll({
checkAllCheckboxClass: '.select-all-permissions',
checkboxClass: '.select-permission'
});
});
</script>
</head>
<body>
<div class="container mt-5">
<form>
<div class="form-group">
<label>Role</label>
<input type="text" class="form-control">
</div><br><br>
<h3>Assign Permissions</h3>
<table class="table table-striped" id="permissions-table">
<thead>
<tr>
<th scope="col">Module</th>
<th scope="col"><input type="checkbox" class="select-all-permissions"> Select All</th>
<th scope="col">Available Permissions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Clients</th>
<td><input type="checkbox" class="select-permission select-all-module-permissions select-all-client-permissions" data-class="select-all-client-permissions"> Select All</td>
<td><input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Create Client <input type="checkbox" class="select-permission select-module-permission select-client-permission" data-class="select-client-permission"> Edit Client</td>
</tr>
<tr>
<th scope="row">Blogs</th>
<td><input type="checkbox" class="select-permission select-all-module-permissions select-all-blogs-permissions" data-class="select-all-blogs-permissions"> Select All</td>
<td><input type="checkbox" class="select-permission select-module-permission select-blogs-permission" data-class="select-blogs-permission"> Create Blog <input type="checkbox" class="select-permission select-module-permission select-blogs-permission" data-class="select-blogs-permission"> Edit Blog</td>
</tr>
<tr>
<th scope="row">Users</th>
<td><input type="checkbox" class="select-permission select-all-module-permissions select-all-users-permissions" data-class="select-all-users-permissions"> Select All</td>
<td><input type="checkbox" class="select-permission select-module-permission select-users-permission" data-class="select-users-permission"> Create User <input type="checkbox" class="select-permission select-module-permission select-users-permission" data-class="select-users-permission"> Edit User</td>
</tr>
</tbody>
</table>
</form>
<br>
<br>
<br>
</div>
</body>
</html>
이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery/jquery-checkbox-assign-multiple-permissions-to-a-role를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(Jquery 확인란 역할에 여러 권한 할당), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/jquery-checkbox-assign-multiple-permissions-to-a-role-28h0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
