プルダウンツリーを達成するために簡単に

最近は食事孟を見つけるために、最初にインターネット上で、カジュアルな使用を見つけるためにインターネットを使用しての考えに沿って、コード3または4、ない素敵な結果をダウンロードし、テキストボックスのドロップダウンツリーを必要としています。

それともそれは基本的にも使用され、単純すぎる、またはzTreeは少し時間がかかり、ここでは、前zTreeわずかに変更された外観を使用しているため、あまりにも、自分自身を得ることができない、達成するために複雑になります。

図は、効果を実現します。

主なアイデア：

あなたは隠れ層本部を表示するテキストボックスをクリックすると、本部層は、ページをクリックして、ツリーコントロールが含まれているときに、他の部分、本部中間層、テキストボックスに選択した値中。

次のようにページのコードは次のとおりです。

ます。<％@ Page Language = " C＃" AutoEventWireup属性= " 真の"分離コード= " Test.aspx.csは" =継承" WebApp.Views.OrderManage.Test "％> 

<！DOCTYPE htmlののPUBLIC " // W3C // DTD XHTML - 1.0暫定// EN "  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > 

<HTMLのxmlns = " http://www.w3.org/1999/xhtml " > 
<ヘッドにrunat = " サーバー" > 
    <スクリプトSRC = " ../../Scripts/jquery-1.4.4.min.js"タイプ= " テキスト/ JavaScriptを" > </ SCRIPT> 
<リンクのhref = " ../../Content/themes/zTreeStyle/zTreeStyle.css "のrel = " スタイルシート"タイプ= " テキスト/ cssの" /> 
<スクリプトSRC = " ../../Scripts/ztree/jquery.ztree.core-3.1.min.js "タイプ= " テキスト/ javascriptの" > </ SCRIPT> 
<スクリプトSRC = " ../../Scripts/ ztree / jquery.ztree.excheck-3.1.min.js "タイプ= " テキスト/ javascriptの"> </ SCRIPT> 
<スクリプトタイプ= "テキスト/ javascriptの" > 
        <！ - VARの設定= { 
        ビュー：{ 
            showIcon：偽
        }、
        データ：{          
            simpleData：{ 
                有効：真
            } 
        }、
        コールバック：{             
            のonClick：のonClick 
        } 
    }; 
    機能のonClick（E、treeId、TREENODE ）{         
        $（' #txtTreeSelect ' ）.val（treeNode.name）; 
    } 
    関数showMenu（）{ VAR cityObj = $（'
    
    

        #txtTreeSelect " ）; 
        VAR cityOffset = cityObj.offset（）。
        $（" #menuContent "）の.css（{左：cityOffset.left + " PX "、トップ：cityOffset.top + cityObj.outerHeight（）+ " PX " }）slideDown（" 速いです" ）; 
        $（" 身体"）.bind（" マウスダウン" 、onBodyDown）。
    } 

    関数hideMenu（）{ 
        $（" #menuContent "）.fadeOut（"" ）; 
        $（" 身体"）.unbind（" マウスダウン"onBodyDown）; 
    } 
    関数onBodyDown（イベント）{
         もし！（（イベント .target.id == " menuBtn " || イベント .target.id == " menuContent " || $（イベント .TARGET）.parents（" #menuContent "）.LENGTH> 0 ））{ 
            hideMenu（）; 
        } 
    } 
    $（ドキュメント）。レディ（関数（）{ VAR

        zNodes = [ 
            {名：" 全て"、オープン：trueに、
                子供：[ 
                    {名：" 未承認" 、
                        子供：[ 
                            {名：" リーフノード111 " }、
                            {名：" リーフノード112 " }、
                            {名前：" リーフノード113 " }、
                            {名：" リーフノード114 "} 
                        ]
                    }、
                    {名：" 監査" 、
                        子供：[ 
                            {名：" リーフノード121 " }、
                            {名：" リーフノード122 " }、
                            {名：" リーフノード123 " }、
                            {名：「リーフ・ノード124 " } 
                        ] 
                    } 
                ] 
            } 
        ]; 
        $ .fn.zTree.init（$（"#treeDemo ）、設定、zNodes）。        
    }）; // - > 
</ SCRIPT> 
    <タイトル> </ TITLE> 
</ HEAD> 
<BODY> 
    <フォームID = " Form1の"にrunat = " サーバー" > 
    の<div> 
        <入力されたID = " txtTreeSelect "タイプ= " テキスト" onclickの= " showMenu（）; falseを返す; " /> 
    </ div> 
<DIV ID = " menuContent " クラス = " "
         表示：なし; 位置：絶対; " > 
    <ulのID = " treeDemo "  クラス = " ztree "スタイル= " マージントップ：0; 幅：120ピクセル; 高さ：80px; " > 
    </ UL> 
</ div> 
    </ FORM> 
</ BODY> 
</ HTML>

ます。https：//www.cnblogs.com/ushou/p/3139873.htmlで再現

プルダウンツリーを達成するために簡単に

おすすめ