1 
    [
 {
   "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 嵌套集 json 导出/导入格式

如何解析嵌套的 html 列表以生成像上面这样的 json？

我正在尝试使用拖放嵌套列表来操作嵌套 列表

它有 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;
        }

    },
4

1 回答 1

0

如果您的目标是使用 Baobab 库在数据库中插入该数据，那么您不需要自己创建带有左/右索引的 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;
}

然后，当您浏览该结构时，您将使用 Baobab API 将节点添加到您的数据库中（此时您可以将其导出为 JSON，如果您真的需要它）

于 2012-07-11T09:02:45.177 回答