2

私は、ul と li を使用して、次の html 構造を持っています。

<ul class="treeview" id="productTree">
   <li class="collapsable lastCollapsable">
     <div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
     <span id="top1" class="">top1</span>
     <ul>
       <li class="collapsable lastCollapsable">
         <span class="">mod1</span>
         <ul>
           <li class="last">
              <span>bottom1</span>
           </li>
         </ul>
       </li>
     </ul>
   </li>
   <li class="collapsable lastCollapsable">
     <span id="top2" class="">top2</span>
     <ul>
       <li class="collapsable lastCollapsable">
         <span class="">mid2</span>
           <ul>
             <li class="last">
                <span>bottom2</span>
             </li>
           </ul>
        </li>
      </ul>
    </li>
</ul>

ウェブサイトでは、ユーザーがこの構造の下にさらにデータを追加でき、jquery treeview を使用してツリー構造を動的に表示しています。ここで、この ul-li 構造全体を js オブジェクトに保存して、将来 Web サイトで使用できるようにする必要があります。どうすればこれを達成できますか? 最後のノード（「bottom1とbottom2 here」）には、「last」というクラスがあります。データを動的に追加できるため、ユーザーが「保存」をクリックしたときに、最後にどれだけのレベルのulliがあるかを確認できます

4

3 に答える 3

2

再帰関数を使用してツリーオブジェクトを保存できます。

function save(obj_ul, tree){

    var obj_lis = obj_ul.find("li")

    if (obj_lis.length == 0) return;        

    obj_lis.each(function(){
        var $this = $(this);
        if($this.parent("ul").get(0) == obj_ul.get(0))
        {
            tree.push({
                name : $this.find('> span').text(),
                child : save($this.find("ul").first(), [])
            });


        }
    });
    return tree;
}

console.log(save($('#productTree'), []));
于 2012-06-22T13:37:50.603 に答える
0

JSONが必要だと仮定します：

function save(){
    var tmp = [];

    $('#productTree li.collapsable').each(function(){
        var $this = $(this),
            $spans = $this.find('span'),
            o = [];

            $spans.each(function(){
               o.push($(this).text())
            })

            tmp.push(o);
    });
    return tmp;
}

を使用map()して同じことを達成することもできます。

EDIT：あなたのテキストがspan. spanこれにより、各リスト項目内の s からのテキストを含む配列の配列が作成されます。

于 2012-06-22T12:54:28.017 に答える
0

サイトの他の場所にある HTML の文字列として、同じことを逐語的に再現したい場合は、これを実行できますか? その後.append()、または.prepend() treeview好きな場所で。

var treeview = $('#productTree').parent().html()

于 2012-06-22T12:51:55.980 に答える