根据数据和关系创建 table

Question

我正在尝试创建一个基于数据的 table。此数据只是一个包含对象的数组，每个对象都有 3 个属性（name、id、head）。

名字：只是一个名字
id: 唯一ID
head：他上面的组，引用了另一个组的ID

例子

ID: 1
姓名：Directie
头：1
基本上是第一组

编号：2
名称：软件
头：1
Directie 子组

编号：3
名称：硬件头：2
软件子组

等等...

现在我正尝试将其转换为 table，但无法使其正常工作。我可以将数据放在 table 中，但顺序和位置不正确。

这就是我目前所拥有的。在我的 html 中，我有一个空的 table 和一个填充的 table 来检查结果必须是什么。

HTML

<table id="chart">
</table>
<br/>
<br/>
<br/>

<table>
    <tr>
        <td>Directie</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>Software</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>Financieel</td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>Hardware</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>Studenten</td>        
    </tr>
</table>

jQuery

var groepen = [];
var g1 = {name: "Directie", id: "1", head: "0"};
var g2 = {name: "Software", id:"2", head: "1"};
var g3 = {name: "Hardware", id:"3", head: "1"};
var g4 = {name: "Financieel", id:"4", head: "2"};
var g5 = {name: "Studenten", id: "5", head: "3"};
groepen = [g1,g2,g3,g4,g5];
var rows = groepen.length;
var columns = groepen[0].head;


for(var i = 1; i < groepen.length; i++)
{
    if(groepen[i].head > columns)
    {
        columns = groepen[i].head;   
    }
}

for(var row = 0; row < rows; row++)
{
    var tr = $("<tr></tr>");
    for(var cell = 0; cell < columns; cell++)
    {
        var td = $("<td></td>").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        tr.append(td);
    }
    $("#chart").append(tr);
}

for(var i = 0; i < groepen.length; i++)
{
    var row = $("#chart tbody tr:nth-child(" + groepen[i].id + ")").children("td:nth-child(" + groepen[i].head + ")").html(groepen[i].name);
}

CSS

table {
    border: 2px solid black;
}

table td {
    border: 1px solid blue;
    background-color: lightgray;
    font-weight: bold;
    color: green;
}

如果有人能帮助我......那就太好了！

在 jsFiddle

上看到了一个示例 here

Answer 1

这可以实现..但必须在 JSON 中为表示层次结构

的每个实体添加一个名为 level 的额外参数

演示：http://jsfiddle.net/jxxhhxkf/1/

var groepen = [];
var g1 = {name: "Directie", id: "1", head: "0",level:0};
var g2 = {name: "Software", id:"2", head: "1",level:1};
var g3 = {name: "Hardware", id:"3", head: "1",level:1};
var g4 = {name: "Financieel", id:"4", head: "2",level:2};
var g5 = {name: "Studenten", id: "5", head: "3",level:2};
groepen = [g1,g2,g3,g4,g5];
var tree = [groepen[0]];
var groups = 0;
var level = 0;
function getChildren(id){
var isParent=false;
    for(var i=0;i<groepen.length;i++){
        if(groepen[i].head==id){
                tree.push(groepen[i])
                isParent = true;
                getChildren(groepen[i].id)
        }

}

if(isParent){
        groups++;
        return;
    }
}

getChildren(groepen[0].id);
var $table=$("<table></table>")
for(var i=0;i<tree.length;i++){
    var $tr =$("<tr></tr>");
for(var j=0;j<groups;j++){

    if(tree[i].level == j){
        $("<td>"+tree[i].name+"</td>").appendTo($tr);
    }
    else{
        $("<td></td>").appendTo($tr);
    }
}
$tr.appendTo($table)
}
$table.appendTo("body");

根据数据和关系创建 table

Create table based on data and relations

jquery

html-table