我有一个displays an organization chart基于<ul>
层次结构的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>
答案 0 :(得分:2)
您需要遍历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/