Clever Geek Handbook

JQuery.Treeviewドロップダウン

エントリー



画像

現在のプロジェクトの実装中、ドロップダウンツリーが気に入りました。 すでにjQuery TreeViewプラグインを使用しており、その機能が私に合っているため、それに基づいてドロップダウンツリーを作成することにしました。 その結果、 共有したいDropDownTreeViewプラグインが生まれました。



機能的



このプラグインを使用すると、AJAXの読み込みでドロップダウンツリーを作成できます（ 例 ）。 ツリーを作成すると、ラッパーオブジェクトにツリーを開くボタンが追加され、ツリーがロードされます。 ツリーは、全体または部分的にロードできます（大きなツリーに関連）。 HTTP要求は、POSTおよびGETメソッドによって実行できます。 HTTP要求パラメーターはユーザー定義です。 ツリーはjQuery.Treeviewを使用して構築されます。 アイテムを選択してツリーゾーンの外側をクリックすると、ツリーが折りたたまれます。





説明付きの使用例



1. jQuery.TreeviewおよびjQuery.Treeview.DropDownのスタイルを追加します



< link href ='jquery.treeview.css' type ='text/css' rel ='stylesheet' >

< link href ='jquery.treeview.dropdown.css' type ='text/css' rel ='stylesheet' />







2. jQuery、jQuery.Treeview、jQuery.Treeview.DropDownスクリプトを追加します



< script type ="text/javascript" >

$( function (){

$( '#dropdown' ).dropdowntreeview({},{'url':'test.php'});

}) //$(function()

</ script >









3.ドロップダウンツリービューのコンテナのHTMLコードを追加します。



< input type =' text ' id =' dropdown ' >







4.ツリーの読み込み



呼び出し形式：$（セレクター）.dropdowntreeview（param、option、TreeViewOption）

ここで：

  1. param-AJAXを使用したリクエストのJSONパラメーター



    例：attr = {'my_id'：101、 'parent_id'：89}次に、パラメーター「my_id = 101＆parent_id = 89」でHTTPリクエストを取得します。



    注：パラメーター名は、タグ属性名および次の段落で説明するオプション名と一致してはなりません。



  2. オプション-JSON形式の設定

    可能な設定：

    タイプ-'post'または 'get'（デフォルトは 'post'）

    url-ツリー（ブランチ）のHTTPリクエストのアドレス（現在のアドレスはデフォルトです）

    width-選択フィールドの幅（デフォルトでは、ツリーがバインドされているオブジェクトの幅）

    height-選択フィールドの高さ（CSSでデフォルトで設定）



    例：option = {'url' = '/ tree.php'、 'height' = '400px'}



  3. TreeViewOption-ツリービューオプション（http://docs.jquery.com/Plugins/Treeview/treeview）


4.1。 単純なツリーをロードするためのコード。

4.1.1。 JavaScriptを追加して、POSTメソッドを使用して「test.php」アドレスから最も単純なツリーをロードします



< script type ="text/javascript" >

$( function (){

$( '#dropdown' ).dropdowntreeview({},{'url':'test.php'});

}) //$(function()

</ script >







注：最初のパラメーターは、リクエストを使用してパラメーターを渡す必要がないため、空のままになりました。





4.1.2。 test.phpのコード：



<? php

//

? >

< ul class ="filetree" >

< li >< span class ="file" > 1 </ span ></ li >

< li >< span class ="folder" > 2 </ span >

< ul >

< li >< span class ="file" > 1 </ span ></ li >

< li >< span class ="file" > 2 </ span ></ li >



< li class ="closed" >< span class ="folder" > 3 </ span >

< ul >

< li >< span class ="file" > 1 </ span ></ li >

< li >< span class ="file" > 2 </ span ></ li >



< li >< span class ="file" > 3 </ span ></ li >

< li >< span class ="file" > 4 </ span ></ li >



</ ul >

</ li >

< li >< span class ="file" > 4 </ span ></ li >



</ ul >

</ li >

< li >< span > 3 </ span ></ li >









注：クラス「filetree」、「file」、「folder」は、ファイルシステムアイコンを表示するために箇条書きリストに追加されました。



4.2。 パーツをロードしたツリー

4.2.1。 POSTリクエストtest.phpを使用してツリーの一部をロードするJavaScriptコードを追加しますか？Tid = 0



< script type ="text/javascript" >

$( function (){

$( '#dropdown' ).dropdowntreeview({'tid':'0'},{'url':'test.php'},{collapsed: true });

}) //$(function()

</ script >









注：最初のパラメーターはリクエストによって送信されるパラメーター、2番目のパラメーターはリクエストのアドレス、3番目のパラメーターはTreeViewオプション（show collapsed）です。



4.2.2。 コードtest.php



<? php <br>// <br> $ x =$ _POST [ 'tid' ];<br> $ y =$ x + 1 ;<br> $ z =' < ul class ="temp" >< li class ="temp" ></ li ></ ul > ';<br>? > <br><br> < ul > <br> < li form ='portion' tid =' < ? php echo $ y ; ? > ' > <br> < span > 1- <? php echo $ x ; ? ></ span > <br> <? php echo $ z ; ? > <br> </ li > <br> < li form ='portion' tid =' < ? php echo $ y ; ? > ' > <br> < span > 2- <? php echo $ x ; ? ></ span > <br> <? php echo $ z ; ? > <br> </ li > <br> < li form ='portion' tid =' < ;? php echo $ y ; ? > ' > <br> < span > 3- <? php echo $ x ; ? ></ span > <br> </ li > <br> </ ul >







注：タグ「li」に、クラス「temp」を持つタグ「ul」および「li」の形式の子孫がある場合、最小化されたリストに表示されます。 このリストをクラス「temp」のタグの場所に展開すると、親のタグ「li」の同じ属性から取得されたパラメーターを持つリストの新しい部分がロードされます。



つまり、最初のブランチを展開すると、POSTリクエストtest.php？Tid = 1によって作成されたリストがクラス 'temp'のリストの代わりにドロップされます.2番目のブランチが展開されると、リストはPOSTリクエストtest.php？Tid = 2などによって開かれます



参照資料



Dropdowntreeviewプラグインの例と説明を含むページ。



サンプル付きのプラグインをダウンロードします。



それだけです。 私のプラグインが誰かに役立つことを願っています。 ご清聴ありがとうございました。


More articles:


All Articles