ディレクトリ構造の表示など、ツリー構造に関する問題に遭遇することがよくあります。
ほとんどの場合、背景は次のようなデータを返します。
[{id：19、pid：0、name： 'nodejs'}、{id：20、pid：19、name： 'express'}、{id：21、pid：19、name： 'mongodb'}、{id：60、pid：20、name： 'ejs'}、{ejs '}、{id：59、pid：' end： ' 59、name： 'javascript'}、{id：71、pid：59、name： 'css'}、{id：72、pid：59、name： 'html'}、{id：73、pid：59、name： 'bootstrap'}、{id：61、pid：0：0：0：0：0：0：6 61、名前： 'web design'}、]このデータ構造はバックグラウンドで簡単に処理できますが、フロントデスクを処理するのは困難です。次のように、最初にツリーJSONデータに変換する必要があります。
[{id：19、pid：0、name： 'nodejs'、children：[{id：20、pid：19、name： 'express'、子供：[{id：60、pid：20、name： 'ejs'}]}、{id：21、pid：19、name： 'mongodb'}} {id：70、pid：59、name： 'javascript'}、{id：71、pid：59、name： 'css'}、{id：72、pid：59、name： 'html'}、{id：73、pid：59、name： 'boottrap'}]}、 'id：0、pid：0、pid：0、pid：' boottrap '}デザイン '、子供：[{id：63、pid：61、name：' web design '}]}、]これにより、再帰的に使用して木型のコンポーネントを構築するのが非常に便利です。
バックグラウンドがこの構造を直接返すことができる場合が最適です。そうしないと、フロントデスクが変換を行う必要があります。
1.リスト配列構造のデータをツリー構造に変換するJSON
// jsonFunction listtotree（list、pid）{var ret = []; //（var i in list）{if（list [i] .pid == pid）{//現在のアイテムの親IDが親IDに等しい場合、検索されます。 ret.push（list [i]）; //一時的な配列に現在のアイテムを保存}} rett; //再帰が終わった後に結果を返します} var tree = listtotree（list、0）;2。ツリー構造JSONデータに基づいてドロップダウンボックスを生成します
// Webページにドロップダウンボックスコンテナを追加する<selece id = "selectbox" name = ""> </select> // jsスクリプト、再帰的に生成//コンテナオブジェクトvar selectbox = document.getelementbyid（ "selectbox"）;ここでは他のシンボルを使用できますfunction createSelecttree（d）{var option = ""; for（var i = 0; i <d.length; i ++）{if（d [i] .children.length）{//サブセットoption+= "<option value = '"+d [i] .id+"'>"+j+d [i] .name+"</option>"; j+= " - "; //プレフィックス記号のシンボルオプションのシンボルを追加+= createSelecttree（d [i] .children）; //再帰的にコールサブセットj = j.slice（0、j.length-1）; value = '"+d [i] .id+"'> "+j+d [i] .name+" </option> "; }} return option; //最終的なHTML結果を返します} //関数を呼び出し、ドロップダウンボックスコンテナselectbox.innerhtml = createSelecttree（tree）に構造を入力して終了します。それでも詳細に学習したい場合は、jQueryドロップダウンボックスエフェクトの概要とJavaScriptドロップダウンボックスエフェクトサマリーをクリックして学習できます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。