JSON（Jquery）を使用して、ロールと権限（読み取り、書き込み、削除、書き込み特殊）のテーブルマトリックスを作成します
アーシム・フセイン・カーン
JSONデータからJqueryを使用して、ロールと権限（読み取り、書き込み、削除、書き込み特殊）のテーブルマトリックスを作成したいと思います。テーブルには、読み取り、書き込み、削除、および書き込みスペシャルのチェックボックスが必要です。ロールとパーミッションのマッピングセルでは、値がJSONに存在する場合、読み取り、書き込み、削除、および書き込みの特別なパーミッションをチェックする必要があります。
「PermissiontypeID」：1は読み取り用、「PermissiontypeID」：2は書き込み用、「PermissiontypeID」：3は削除用、「PermissiontypeID」：4は書き込み特殊用です。
これは私のJSON形式です：
var obj =[
{
"PermissionID": 1,
"ProjectRoleID": 1,
"ScreenID": 1,
"ScreenName": "Screen 1",
"PermissiontypeID": 1,
"RoleName": "Role 1"
},
{
"PermissionID": 1,
"ProjectRoleID": 2,
"ScreenID": 1,
"ScreenName": "Screen 1",
"PermissiontypeID": 2,
"RoleName": "Role 2"
},
{
"PermissionID": 2,
"ProjectRoleID": 2,
"ScreenID": 1,
"ScreenName": "Screen 1",
"PermissiontypeID": 3,
"RoleName": "Role 2"
},
{
"PermissionID": 2,
"ProjectRoleID": 2,
"ScreenID": 2,
"ScreenName": "Screen 2",
"PermissiontypeID": 1,
"RoleName": "Role 2"
},
{
"PermissionID": 2,
"ProjectRoleID": 2,
"ScreenID": 2,
"ScreenName": "Screen 2",
"PermissiontypeID": 2,
"RoleName": "Role 2"
},
{
"PermissionID": 2,
"ProjectRoleID": 2,
"ScreenID": 2,
"ScreenName": "Screen 2",
"PermissiontypeID": 3,
"RoleName": "Role 2"
},
{
"PermissionID": 2,
"ProjectRoleID": 3,
"ScreenID": 2,
"ScreenName": "Screen 2",
"PermissiontypeID": 3,
"RoleName": "Role 3"
},
{
"PermissionID": 3,
"ProjectRoleID": 3,
"ScreenID": 3,
"ScreenName": "Screen 3",
"PermissiontypeID": 1,
"RoleName": "Role 3"
},
{
"PermissionID": 3,
"ProjectRoleID": 3,
"ScreenID": 3,
"ScreenName": "Screen 3",
"PermissiontypeID": 2,
"RoleName": "Role 3"
},
{
"PermissionID": 3,
"ProjectRoleID": 3,
"ScreenID": 3,
"ScreenName": "Screen 3",
"PermissiontypeID": 4,
"RoleName": "Role 3"
}
]
これは私がJqueryを使用したいテーブルです：
これは私が期待しているHTMLです：
<table>
<tr>
<th>Permission</th>
<th>Role 1</th>
<th>Role 2</th>
<th>Role 3</th>
</tr>
<tr>
<td>
Screen 1
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox" checked>
R
</label>
<label>
<input type="checkbox">
W
</label>
<label>
<input type="checkbox">
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
R
</label>
<label>
<input type="checkbox" checked>
W
</label>
<label>
<input type="checkbox" checked>
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
R
</label>
<label>
<input type="checkbox">
W
</label>
<label>
<input type="checkbox">
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
</tr>
<tr>
<td>
Screen 2
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
R
</label>
<label>
<input type="checkbox">
W
</label>
<label>
<input type="checkbox">
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox" checked>
R
</label>
<label>
<input type="checkbox" checked>
W
</label>
<label>
<input type="checkbox" checked>
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
R
</label>
<label>
<input type="checkbox">
W
</label>
<label>
<input type="checkbox" checked>
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
</tr>
<tr>
<td>
Screen 3
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
R
</label>
<label>
<input type="checkbox">
W
</label>
<label>
<input type="checkbox">
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
R
</label>
<label>
<input type="checkbox">
W
</label>
<label>
<input type="checkbox">
D
</label>
<label>
<input type="checkbox">
WS
</label>
</div>
</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
R
</label>
<label>
<input type="checkbox">
W
</label>
<label>
<input type="checkbox">
D
</label>
<label>
<input type="checkbox" checked>
WS
</label>
</div>
</td>
</tr>
</table>
助けてください。前もって感謝します。
RiccardoC
実例はこちら
JSONの変更により、HTMLがはるかに優れたものになりました
<table id="perm">
<tr class="header">
<th>Permissions</th>
</tr>
</table>
JavaScript
$(document).ready(function () {
var $table = $( "#perm" );
var $tHead = $table.find( ".header" );
var permissions = ['',"R", "W", "D", "WS" ]
// Count and add Roles
var roles = [];
var numRoles = 0;
for( i in obj ) {
if( roles[ obj[ i ].ProjectRoleID ] == undefined ) {
roles[ obj[ i ].ProjectRoleID ] = obj[ i ].ProjectRoleID;
numRoles++;
$tHead.append( '<th colspan="4" class="role_' + obj[ i ].ProjectRoleID + '">' + obj[ i ].RoleName + '</th>' );
}
}
// Load table
for( i in obj ) {
var element = obj[ i ];
// Add screen row
if( $table.find( "tr.row_" + element.ScreenID ).length == 0 ) {
$table.append( '<tr class="row_' + element.ScreenID + '"><td>' + element.ScreenName + '</td></tr>' );
$row = $table.find( '.row_' + element.ScreenID );
for( j in roles ) {
var role = roles[ j ];
for( k = 1; k < 5; k++ ) {
var uniqueCheck = "check_" + element.ScreenID + "_" + role + "_" + k;
$row.append( '<td class="cell_' + role + '"><input id="' + uniqueCheck + '" name="' + uniqueCheck + '" type="checkbox"> ' + permissions[ k ] + ' </td>' );
}
}
}
var checkId = "#check_" + element.ScreenID + "_" + element.ProjectRoleID + "_" + element.PermissiontypeID;
$( checkId ).attr( "checked", "checked" );
}
});
すべてのチェックボックスにはuniqueIdとNameがあるため、「check_SCREENID_ROLEID_PERMISSIONTYPEID」が作成されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
コメントを追加