使用JSON爲JSON使用JSON創建角色和權限表格矩陣

Question

我想爲使用JSON使用JSON創建角色和權限的表格矩陣。該表應該有複選框，並且應該檢查角色和權限映射單元是否存在於JSON中。

這是我的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. 獲取所有角色（使用後的表頭）
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(); 
   })