使用JSON（Jquery）
我希望使用来自JSON数据的Jquery为角色和权限（读取，写入，删除，写入特殊）创建一个表矩阵。该表应具有读取，写入，删除和写入特殊的复选框。如果值存在于JSON中，角色和权限映射单元应该具有读取，写入，删除和写入特殊权限。
＆＃34; PermissiontypeID＆＃34;：1适用于Read， ＆＃34; PermissiontypeID＆＃34;：2用于写入， ＆＃34; PermissiontypeID＆＃34;：3用于删除， ＆＃34; PermissiontypeID＆＃34;：4用于Write Special。
这是我的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>
请帮助。提前谢谢。
2 个答案:
答案 0 :(得分：4)
工作示例HERE
随着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”
答案 1 :(得分：1)
另一种方法可能是：
$(function() {
jQuery.each(obj, function(index, item) {
var row = $('#perm tr td:first-child').filter('td:contains("' + item.ScreenName + '")');
if (row.length == 0) {
$('#perm > tbody:last-child').append(rowTemplate.replace('{replace}', item.ScreenName));
row = $('#perm tr:last');
} else {
row = row.parent();
}
var role = 1;
switch (item.RoleName) {
case 'Role 1':
role = 2;
break;
case 'Role 2':
role = 3;
break;
case 'Role 3':
role = 4;
break;
}
switch (item.PermissiontypeID) {
case 1:
row.find('td:nth-child(' + role + ') :checkbox:eq(0)').prop('checked', true);
break;
case 2:
row.find('td:nth-child(' + role + ') :checkbox:eq(1)').prop('checked', true);
break;
case 3:
row.find('td:nth-child(' + role + ') :checkbox:eq(2)').prop('checked', true);
break;
}
});
});
// Initialization values
var rowTemplate = '<tr>\
<td>\
{replace}\
</td>\
<td>\
<div class="checkbox">\
<label>\
<input type="checkbox">\
R\
</label>\
<label>\
<input type="checkbox">\
W\
</label>\
<label>\
<input type="checkbox">\
D\
</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>\
</div>\
</td>\
<td>\
<div class="checkbox">\
<label>\
<input type="checkbox">\
R\
</label>\
<label>\
<input type="checkbox">\
W\
</label>\
<label>\
<input type="checkbox">\
D\
</label>\
</div>\
</td>\
</tr>';
var obj =[
{
"ScreenName": "Screen 1",
"PermissiontypeID": 1,
"RoleName": "Role 1"
},
{
"ScreenName": "Screen 1",
"PermissiontypeID": 2,
"RoleName": "Role 2"
},
{
"ScreenName": "Screen 1",
"PermissiontypeID": 3,
"RoleName": "Role 2"
},
{
"ScreenName": "Screen 2",
"PermissiontypeID": 1,
"RoleName": "Role 2"
},
{
"ScreenName": "Screen 2",
"PermissiontypeID": 2,
"RoleName": "Role 2"
},
{
"ScreenName": "Screen 2",
"PermissiontypeID": 3,
"RoleName": "Role 2"
},
{
"ScreenName": "Screen 2",
"PermissiontypeID": 3,
"RoleName": "Role 3"
},
{
"ScreenName": "Screen 3",
"PermissiontypeID": 1,
"RoleName": "Role 3"
},
{
"ScreenName": "Screen 3",
"PermissiontypeID": 2,
"RoleName": "Role 3"
},
{
"ScreenName": "Screen 3",
"PermissiontypeID": 3,
"RoleName": "Role 3"
}
];<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="perm">
<tr>
<th>Permission</th>
<th>Role 1</th>
<th>Role 2</th>
<th>Role 3</th>
</tr>
</table>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？