Question

我嵌套了Json，看起来像：

[   {
"Name": "Veggies",
"Id": 1,
"Tier": 0,
"ParentId": 0,
"Icon": null,
"Children": [
  {
    "Name": "Fruits",
    "Id": 2,
    "Tier": 1,
    "ParentId": 1,
    "Icon": null,
    "Children": [
      {
        "Name": "Apples",
        "Id": 3,
        "Tier": 2,
        "ParentId": 2,
        "Icon": null,
        "Children": null
      },
      {
        "Name": "Oranges",
        "Id": 4,
        "Tier": 2,
        "ParentId": 2,
        "Icon": null,
        "Children": null
      }
    ]
  },
  {
    "Name": "Vegetables",
    "Id": 5,
    "Tier": 1,
    "ParentId": 1,
    "Icon": null,
    "Children": [
      {
        "Name": "Cabbages",
        "Id": 6,
        "Tier": 2,
        "ParentId": 5,
        "Icon": null,
        "Children": null
      }
    ]
  }
]   },   {
"Name": "Meat",
"Id": 7,
"Tier": 0,
"ParentId": 0,
"Icon": null,
"Children": [
  {
    "Name": "Red Meat",
    "Id": 8,
    "Tier": 1,
    "ParentId": 7,
    "Icon": null,
    "Children": [
      {
        "Name": "Beef",
        "Id": 3,
        "Tier": 2,
        "ParentId": 8,
        "Icon": null,
        "Children": null
      }
    ]
  }
]   } ]

在我看来，我已经使用JS遍历json并创建具有相同基本结构的层次列表。

我的目标是创建第二个列表，当我单击列表中的某个项目时，其中的孩子（橘子，苹果，牛肉等）将添加或附加到其中，以及整个层次结构。

>

这是我使用JS填充的现有html结构：

<div class="row-fluid">
                            <div class="span5 available-list" id="lstAvailableArea">
                            </div>
                            <div class="span2 to-fro-icons">
                                <div style="padding-left: 15px; padding-top: 90px;">
                                    <a onmouseover="jQuery(this).tooltip('show');" rel="tooltip" data-original-title="<div class='small-xx break-word'>Move Right</div>">
                                        <div style="margin-left: -14px; width: 27px">
                                            <img id="btnRightPush" onclick="moveToSelectedArea()" src="/Content/Common/img/arrow_right_circle.png" />
                                        </div>
                                    </a>
                                </div>
                                <div style="padding-left: 15px; padding-top: 10px">
                                    <a onmouseover="jQuery(this).tooltip('show');" rel="tooltip" data-placement="top"
                                        data-original-title="<div class='small-xx break-word'>Move Left</div>">
                                        <div style="margin-left: -14px; width: 27px">
                                            <img id="btnLeftPust" onclick="moveToAvailableArea()" src="/Content/Common/img/arrow_left_circle.png" />
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="span5 applied-list" id="lstSelectedArea">
                            </div>
                        </div>

填充第二个列表时，我需要保持与第一个列表相同的层次结构。

相关的JS代码（其中TriggerList是Json结构）是

var moveToSelectedArea = function()
{
debugger;
var currentItem = $("#lstAvailableAreas").find(".highlighted");
//ResultElement = $(currentItem.get(0)).prop('outerHTML');
var id = currentItem.attr('data-id');
var parentId = currentItem.attr('data-parent');
var grandParentId = isParentAvailable(id, parentId);
if (grandParentId != 0)
    $("#lstAssignedAreas").html(getResultHTML(TriggerList, id, parentId, grandParentId));
else
    $("#lstAssignedAreas [data-id=" + parentId + "]").append(getResutlHTML(TriggerList, id, parentId));
}

var isParentAvailable = function(id, parentId)
{
var assignedAreas = $("#lstAssignedAreas");
debugger;
if ($("#lstAssignedAreas [data-id=" + parentId + "]").length) {
    if ($("#lstAssignedAreas [data-id=" + parentId + "]").attr('data-parent') != 0)
        return 0;
    else return $("#lstAssignedAreas [data-id=" + parentId + "]").attr('data-parent');
    //$('#lstAssignedAreas').wrap($("#lstAvailableAreas").find(".highlighted"));
}
else
    if (parentId != 0)
        return isParentAvailable(parentId, getParent(parentId));
    else {
        return id;
    }

}
var finalHTML= '';
var getResultHTML = function (triggerList, id, parentId, grandParentId)
{
debugger;
for(var i = 0; i <triggerList.length;i++)
{
    if (triggerList[i]['Id'] == id || triggerList[i]['Id'] == parentId || triggerList[i]['Id'] == grandParentId)
    {
        finalHTML = finalHTML + loadResult(triggerList[i]);
        if (triggerList[(i)]['Children'])
            getResultHTML(triggerList[(i)]['Children'], id, parentId, grandParentId);
        finalHTML = finalHTML + '</div>';
    }

}
return finalHTML;
}

问题

通常，我只想使用Id和ParentId，删除所有其他变量，例如GrandParentId，以便将来为更深层的嵌套结构让路。
当前，如果存在一个父级的孩子（橙色，苹果），则无法将另一个父级（白菜）的另一个孩子添加到第二个列表中的蔬菜中。
我想无缝地创建一种双向机制，其中从第二个列表中删除一个项目将其添加回第一个列表中。

注意：只有最后一个孩子可以从一个列表移到另一个列表。单击任何父级不会/不应该触发事件。

任何其他方法都非常受欢迎。

该语言的道歉。我可以澄清是否有什么令人困惑的地方。帮助将不胜感激。

将嵌套的JSON转换为分层HTML

0 个答案: