从现有的
    超文本标记语言

本文关键字：ul 超文本标记语言 | 更新日期: 2023-09-27 18:15:39

我有一个jQuery插件，显示基于<ul>层次结构的组织结构图。

这将允许我的用户拖放员工，一旦拖放，就会触发一个事件，告诉我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>

从现有的<ul>超文本标记语言

您需要遍历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;
}

现在通过父树ul调用getTreeData函数，如下所示:

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

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

相关文章：