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 エクスポート/インポート形式

上記のようなjsonを生成するために、ネストされたhtmlリストを解析するにはどうすればよいですか?

ネスト可能なリストのドラッグ アンド ドロップを使用して、ネストされたリストを操作しようとしています 。

それは私が達成したいことをする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 に答える