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，如果你真的需要它）