javascript - 使用 Jquery 使用 JSON 创建角色和权限表矩阵

Question

我想要使用 Jquery 使用 JSON 创建 Angular 色和权限的表矩阵。该表应具有复选框，并且如果该值存在于 JSON 中，则应检查 Angular 色和权限映射单元格。

这是我的 JSON 格式:

var obj = [
  { 
    "WidgetID": 1,
    "WidgetName": "Widget 1  ",
    "ProjectRoleGroup": "Role Group 1"
  },
  { 
    "WidgetID": 1,
    "WidgetName": "Widget 1  ",
    "ProjectRoleGroup": "Role Group 2"
  },
  { 
    "WidgetID": 2,
    "WidgetName": "Widget 2",
    "ProjectRoleGroup": "Role Group 3"
  },
  { 
    "WidgetID": 3,
    "WidgetName": "Widget 3",
    "ProjectRoleGroup": "Role Group 2"
  },
  { 
    "WidgetID": 4,
    "WidgetName": "Widget 4",
    "ProjectRoleGroup": "Role Group 3"
  }
]

这是我想要使用 Jquery 的表:

请帮忙。提前致谢。

Answer 1

使用下面的代码片段。有3个步骤:

1. 获取所有 Angular 色(稍后在表标题上使用)
2. 合并数据源(buildTableDataSource 函数)以构建数据行

3. 构建表格

   <table id="tblRoles"></table>
   
   <script>
   var obj = [
     {
         "WidgetID": 1,
         "WidgetName": "Widget 1  ",
         "ProjectRoleGroup": "Role Group 1"
     },
     {
         "WidgetID": 1,
         "WidgetName": "Widget 1  ",
         "ProjectRoleGroup": "Role Group 2"
     },
     {
         "WidgetID": 2,
         "WidgetName": "Widget 2",
         "ProjectRoleGroup": "Role Group 3"
     },
     {
         "WidgetID": 3,
         "WidgetName": "Widget 3",
         "ProjectRoleGroup": "Role Group 2"
     },
     {
         "WidgetID": 4,
         "WidgetName": "Widget 4",
         "ProjectRoleGroup": "Role Group 3"
     }
   ]
   var getAllRoles = function () {
       var roleGroups = [];
       $.each(obj, function (i, v) {
           if (roleGroups.indexOf(v.ProjectRoleGroup) == -1) {
               roleGroups.push(v.ProjectRoleGroup);
           }
       });
       return roleGroups;
   }
   
   var buildTableDataSource = function () {
       var ret = [];
       $.each(obj, function (i, v) {
           var existed = $.grep(ret, function (e, i) {
               return e.WidgetID == v.WidgetID;
           });
           if (existed.length) {
               existed[0].Roles.push(v.ProjectRoleGroup);
           } else {
               ret.push({
                   WidgetID: v.WidgetID,
                   WidgetName: v.WidgetName,
                   Roles: [v.ProjectRoleGroup]
               });
           }
       });
       return ret;
   }
   var buildTable = function () {
       var allRoles = getAllRoles();
       var tableDataSource = buildTableDataSource();
       var headerRow = $("<tr><td>Permission</td></tr>");
       $.each(allRoles, function (i, v) {
           headerRow.append('<td>' + v + '</td>');
       });
       $('#tblRoles').append(headerRow);
       $.each(tableDataSource, function (i, v) {
           var row = $('<tr><td>' + v.WidgetName + '</td></tr>');
           $.each(allRoles, function (j, r) {
               if (v.Roles.indexOf(r) > -1) {
                   row.append('<td><input type="checkbox" checked="checked" /></td>');
               } else {
                   row.append('<td><input type="checkbox" /></td>');
               }
               $('#tblRoles').append(row);
           });
       });
   }
   
   $(document).ready(function () {
       buildTable();
   })