zTree学習

最近、すでに知っている権限、原則とデータベースに関することを行うために、困難なツリー図です。

当初は3時間を得る......大きな損失を被った、使用layuiに自分の無知ので意図はなく、おならありません。私はそれを言うことができます......

その後、Baiduは時間を学習に、zTreeを見つけ、私はそれが非常に使いやすい普通のフレンドリーではないと言うことができます。しかし、まだ朝、やっと少し収穫を学びます。

番号をクリアするには、I具体的に設定、デフォルトのデータは、公式と同じ構造ではありません。

CREATE  TABLEのURI（
  ID BIGINT UNSIGNED PRIMARY  KEY AUTO_INCREMENT COMMENT ' いいえ' 、
  uri_name VARCHAR（10）NOT  NULL COMMENT ' URI概要' 、
  is_have_superiors TINYINT  NOT  NULLは COMMENT ' より高いレベルが存在する場合' 、
  superiors_id BIGINT UNSIGNED NOT  NULL COMMENT ' URIのより高いレベルID " 、
  URI VARCHAR（100）NOT  NULL COMMENT ' URIアドレス' 
）COMMENT ' URI記述テーブル' ;

エンティティクラス：

輸入lombok.Data; 

インポートがjava.math.BigInteger; 
@data 
パブリック クラスUriEntity { 

    プライベートのBigInteger ID。
    プライベート文字列uriName。
    プライベート整数haveSuperiors。
    民間のBigInteger superiorsId。
    プライベート文字列のURI。
}

コントローラメソッド：DAO層とサービス、およびI上のファイルをMyBatisのいない、とメソッド名は、それが何であるかを知っている必要があります参照してください

　　
　　I //グローバルクロスドメイン設定
　　@PostMapping（ "/ URIを" ）
     公共ResponseDTO getUrisByPid（BigIntegerをsuperiorsId）{ 
        UriEntity uriById = uriService.getUriById（superiorsId）;
         リターン 新しい新 ResponseDTO（ "成功" "200がある" 、uriById）。
    }

htmlファイル：一つは、私はdataFilter上の公式APIを記述しないことに注意してください。ajaxDataFilterロールバックがそこにありますが、なぜ知らない、そして内部の非同期（async）のこぎりBaiduの

<！DOCTYPE HTML > 
< HTML > 
 < HEAD > 
  < TITLE > zTree DEMO </ TITLE > 
  < メタHTTP-当量= "コンテンツタイプ" コンテンツ= "テキスト/ HTML;のcharset = UTF-8" > 
  < リンクのhref = " CSS / zTreeStyle / zTreeStyle.css " のrel ="このスタイルシート" /> 
  <！ - jqueryの中に導入し、ボックスでzTree 2つのjsファイルは、excheck必見- > 
  < スクリプトタイプ="テキスト/ JavaScriptを" SRC =" JS / jQueryの-3.4.1.js」> </ スクリプト> 
  <スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS / jquery.ztree.core.js" > </ スクリプト> 
  < スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS / jquery.ztree.excheck.js" > < / スクリプト> 
 </ ヘッド> 
< BODY > 
< DIV > 
   < UL ID = "treeDemo" クラス= "ztree" > </ UL > 
   < 入力ID = "BTN1" 値= "获取选中节点ID"タイプ= "ボタン" /> 
</ divの> 
< スクリプト> 
    VAR zTreeObj;
     機能ajaxDataFilter（treeId、のparentNode、responseData）{
         リターンresponseData.data; 
    } 
    VARの設定= {
         // オープンボックス、他の非書かれたデフォルトのある
        チェック：{ 
            有効：trueに
        }、
        / / 名： "uriName"と同様の別名
        データ：{ 
            キー：{ 
                名：" uriName " 
            }、
            // オープンシンプルなデータ、その他のデフォルト
            // にIDKey： "ID"、PIDKEY： "superiorsId"エイリアシングがほとんどである
             simpleData ：{
                有効：trueに、
                にIDKey：" ID " 、
                PIDKEY：" superiorsId " 、
                rootPId：0 
            } 
        } 
        // オープン非同期ローディング
        非同期：{ 
            イネーブル：trueに、
            URL：" http://127.0.0.1:8081/uris " 、
            タイプ：「POST 」、
             // 公式のAPIは、ほとんどのニーズを満たすために、テキストだけでなく、JSONラインと言う
            ：dataTypeと「テキスト」、
             //リクエストパラメータ、superiorsId URIの下によるサブクエリ
            autoparam：[ 「ID = superiorsId 」]
             // フィルタデータ、リターンは、他の符号データの使用に加えて、そのResponseDTOあるため、 MSG少ないものよりも
            // ajaxDataFilterの背後には、（追加しない）と、パラメータはデフォルトがそれの何かの内側にあるためかもしれある
            dataFilter：ajaxDataFilter 
        } 
    }; 
    // 最初のノード、あなただけの非同期読み込みので、親ノードを設定する必要があります+に作用し、そして親+持っている必要があり
    するvar zNodesを= [ 
        { " ID " ：1 、" superiorsId " ：0 、" uriName " 。" 削除"、isParent：の真} 
    ]; 
    // ツリー構造の構築
    $（ドキュメント）.ready（関数（）{ 
        zTreeObj = $ .fn.zTree.init（$（" #treeDemo " ）、設定、zNodes）
    }）; 
    / / クリックボタンは、選択されたデータを取得するために
    $（" ＃のBTN1 " ）.on（" クリック" 、機能を（）{
         VAR treeObj = $ .fn.zTree.getZTreeObj（" treeDemo " ）、    
        ノード=） 、  treeObj.getCheckedNodes（真
        V = "" ;         
        ため（VAR iが= 0 ; I < nodes.length; I ++ ）{     
            V + = ノード[I] .uriName + " " 。           
            console.log（" 节点ID：" + ノード[I] .ID + " 节点名称" + V）。
        } 
    }）</ スクリプト> </ BODY > </ HTML >

おすすめ