Question

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

name：只是一个名字
id：唯一ID
head：他上方的小组，引用另一个小组的ID

示例

ID：1
姓名：Directie
负责人：1 基本上是第一组

ID：2
名称：软件
负责人：1 Directie子组

ID：3
名称：硬件负责人：2
软件子组

等等......

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

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

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");

根据数据和关系创建表格

1 个答案: