nested html list to json

Question

[ 
{ 
    "tree_id": 6, 
    "fields" : ["id","lft", "rgt"], // tree_id is stripped if requested via fields because redundant 
    "values" : 
     [1,1,4,[ 
      [2,2,3,[]] 
     ]] 
} 
// more could follow ... 
] 

上面是Bobab用来导出/导入嵌套集合的json代码。 Baobab nested set json export/import format

我该如何解析一个嵌套的html列表来产生如上所述的json？

我试图操纵嵌套列表使用拖放 Nestable list

它有2个功能种类是做什么我想要实现，但我的头还在周围扭曲。

 toHierarchy: function(options) { 

     var o = $.extend({}, this.options, options), 
      sDepth = o.startDepthCount || 0, 
      ret = []; 

     $(this.element).children(o.items).each(function() { 
      var level = _recursiveItems(this); 
      ret.push(level); 
     }); 
     //console.log(JSON.stringify(ret)); 
     return ret; 

     function _recursiveItems(item) { 
      var id = ($(item).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); 
      if (id) { 
       var currentItem = {"id" : id[2]}; 
       if ($(item).children(o.listType).children(o.items).length > 0) { 
        currentItem.children = []; 
        $(item).children(o.listType).children(o.items).each(function() { 
         var level = _recursiveItems(this); 
         currentItem.children.push(level); 
        }); 
       } 
       return currentItem; 
      } 
     } 
    }, 



    toArray: function(options) { 

     var o = $.extend({}, this.options, options), 
      sDepth = o.startDepthCount || 0, 
      ret = [], 
      left = 2; 

     ret.push({ 
      "item_id": o.rootID, 
      "parent_id": 'none', 
      "depth": sDepth, 
      "left": '1', 
      "right": ($(o.items, this.element).length + 1) * 2 
     }); 

     $(this.element).children(o.items).each(function() { 
      left = _recursiveArray(this, sDepth + 1, left); 
     }); 

     ret = ret.sort(function(a,b){ return (a.left - b.left); }); 
     //console.log(JSON.stringify(ret)); 
     return ret; 

     function _recursiveArray(item, depth, left) { 

      var right = left + 1, 
       id, 
       pid; 

      if ($(item).children(o.listType).children(o.items).length > 0) { 
       depth ++; 
       $(item).children(o.listType).children(o.items).each(function() { 
        right = _recursiveArray($(this), depth, right); 
       }); 
       depth --; 
      } 

      id = ($(item).attr(o.attribute || 'id')).match(o.expression || (/(.+)[-=_](.+)/)); 

      if (depth === sDepth + 1) { 
       pid = o.rootID; 
      } else { 
       var parentItem = ($(item).parent(o.listType) 
             .parent(o.items) 
             .attr(o.attribute || 'id')) 
             .match(o.expression || (/(.+)[-=_](.+)/)); 
       pid = parentItem[2]; 
      } 

      if (id) { 
        ret.push({"item_id": id[2], "parent_id": pid, "depth": depth, "left": left, "right": right}); 
      } 

      left = right + 1; 
      return left; 
     } 

    }, 

Answer 1

如果你的目标是插入使用的猴面包树库，那么你并不需要创建一个左/右索引自己，这可能是相当复杂的做JSON代码数据库上的数据。

只需发送到服务器树结构化数据，并在服务器端迭代它将对象添加到数据库。

你可以创建一个通用的树结构，这样的事情（使用jQuery有一个较短的例子）：

function genTree(domNode){ 
    var parentObj = { 
    data : { /* filled with data found in domNode, e.g. the baobab node id */ }, 
    children: [] 
    }; 

    $(domNode).find('> li, > ul > li').each(function(){ 
    parentObj.children.push(genTree(this)); 
    }); 

    return parentObj; 
} 

然后，当您将前往将要使用的猴面包树API添加的节点结构到您的数据库（在这一点上，你可以出口到JSON，如果你真的需要它）