从现有的 <ul> html 构建 JSON 类

Question

我有一个基于<ul> 层次结构的displays an organization chart 的jQuery 插件。

这将允许我的用户拖放员工，一旦拖放，就会触发一个事件，告诉我 DOM 已更改。此时我想阅读<ul>，并从中构建一个 JSON 类，以便将其发送到我的服务器 (ASP .NET MVC) 以进行进一步处理。

是否有任何图书馆可以为我做这件事，如果没有，我将如何自己去做？

html示例：

<ul id="org" style="display:none">
<li>
  Food
  <ul>
    <li>Beer</li>
    <li>Vegetables
      <ul>
        <li>Pumpkin</li>
        <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
      </ul>
    </li>
    <li>Bread</li>
    <li>Chocolate
      <ul>
        <li>Topdeck</li>
        <li>Reese's Cups</li>
      </ul>
    </li>
  </ul>
</li>
</ul>

Answer 1

您需要遍历 dom 节点并创建正确的 json，如下所示：

var getTreeData = function(parentNode){
    var nodes = [];
    var $parentNode = $(parentNode);
    $parentNode.children('li').each(function(index, li){
    var nodeData = {};
    var nodeText = $(li).contents().filter(function() {
  return this.nodeType == 3;
}).text();
    nodeData.text = nodeText.trim().replace('\n', '');
    if($(li).children('ul').length>0){
        nodeData.children = getTreeData($(li).children('ul'))
    }
        nodes.push(nodeData);
    });

    return nodes;
}

现在调用getTreeData函数传递父树ul如下：

var treeData = getTreeData($('#org'));

这是完整的小提琴示例：https://jsfiddle.net/rxwy4zqw/