dtreeの簡単な実装

まずlayuiモデルdtree

VARデータ= { 
                ステータス：{コード：200、メッセージ： "操作成功"} 
                データ：[ 
                {ID： "001"、タイトル： "湖南省"、PARENTID： "0"}、
                {ID： "002"、タイトル： "湖北省"、PARENTID： "0"}、
                {ID： "003"、タイトル： "广东省"、PARENTID： "0"}、
                {ID： "004"、タイトル： "浙江省"、PARENTID ： "0"}、
                {ID： "005"、タイトル： "福建省"、PARENTID： "0"}、
                {ID： "001001"、タイトル： "长沙市"、PARENTID： "001"}、
                {ID ： "001002"、タイトル： "株洲市"、PARENTID： "001"}、
                {ID "001003"、タイトル： "湘潭"、PARENTID： "001"}、 
                {ID： "001004"、タイトル： "衡陽"、PARENTID： "001"}、
                {ID： "001 005"、タイトル： "郴州市"、PARENTID ： "001"}、
                {ID： "002001"、タイトル： "武汉市"、PARENTID： "002"}、
                {ID： "003001"、タイトル： "广州市"、PARENTID： "003"}、
                {ID： "004001"、タイトル"杭州市"、PARENTID： "004"} 
            ] 
        }

レンダリング

テンプレートと一致し、可能な限りデータベースのフィールド名には、エイリアスの矛盾を使用することができます

コントローラ層

/ ** 
 * <P> 
 *前端控制器
 * </ P> 
 * 
 * @author ZHS 
 * @since 2020年3月17日
 * / 
@RestController 
@RequestMapping（ "/ DEPT"）
publicクラスDeptController { 
    @Autowired 
    プライベートDeptService deptService ; 


    / ** 
     *加载部门管理左边的部门树的JSON 
     * / 
    @RequestMapping（ "loadDeptManageLeftTreeJson"）
    公衆のDataGridView loadDeptManageLeftTreeJson（DeptVo deptVo）{ 
        リスト<部署>リスト= deptService.list（）。
        リスト<のTreeNode>のTreeNode =新しいArrayListを<>（）; 
        （部門のDEPT：リスト）のために{ 
            ブールスプレッド= dept.getOpen（）== 1？真/偽;
            treeNodes.add（新しいツリーノード（dept.getId（）、dept.getPid（）、dept.getTitle（）、スプレッド））; 
        } 
        新規のDataGridView（のTreeNode）を返します。
    } 
}

フロントエンドコード

<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>左侧部门树</ TITLE> 
    <META NAME = "レンダラ"コンテンツ= "WebKitの"> 
    <META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ、クロム= 1"> 
    <META HTTP-当量= "アクセス制御-許可-起源"コンテンツ= "*"> 
    <メタ名= "ビューポート"コンテンツ= 「幅=装置幅、初期の規模= 1、最大規模= 1」> 
    <メタ名=「リンゴモバイルウェブアプリ-ステータスバーのスタイルを」コンテンツ=「黒」> 
    <META NAME =」リンゴモバイルウェブアプリ対応の」コンテンツ= 『はい』> 
    <メタ名= 『フォーマット検出』コンテンツ= "電話=いいえ"> 
    <リンクのrel = "アイコン"のhref = "/ favicon.icoを">  
    <リンクのrel = "スタイルシート"のhref = "/リソース/ layui / CSS / layui.css"メディア= "すべて" />
    <リンクのrel = "スタイルシート"のhref = "/リソース/ CSS / public.css"メディア= "すべて" />
    <リンクのrel = "スタイルシート"のhref = "/リソース/ layui_ext / dtree / dtree.css"メディア= "すべて" /> 
    <リンクのrel = "スタイルシート"のhref = "/リソース/ layui_ext / dtree /フォント/ dtreefont.css "メディア="すべて」/> 
</ HEAD> 
<BODY> 
<！ -存放树的容器- > 
<ulのID = "deptTree"クラス= "dtree"データ-ID = "0"> </ UL> 

<スクリプトタイプ= "テキスト/ javascriptの" SRC = "/リソース/ layui / layui.js"> </ SCRIPT> 
<スクリプトタイプ= "テキスト/ javascriptの"> 
    layui.extend（{ 
        dtree：「/リソース/ layui_ext / dtree / dtree」// {/}的意思即代表采用自有路径、即不跟随ベース路径
    }）。使用（[ ''、 '層'、 'jQueryの' dtree]機能（）{ 
        VAR = Dtree layui.dtree;  
        VAR層= layui.layer。
        $ = layui.jquery; 


        //初期化ツリー
        VAR deptTree = dtree.render（{ 
            elemは： "#deptTree"、
            dataStyle： "layuiStyle"、// layui使用してスタイル形式のデータ
            のdataFormat： "リスト"、//スタイルのコンフィギュレーション・データ一覧
            応答：{メッセージ： "MSG"、からstatusCode ：0} //データの定義を変更し、応答で返される
            URL： "/ DEPT / loadDeptManageLeftTreeJson" // URL使用の装填（データが存在するとローディング）
        }）; 

        //バインドノードクリック
        dtree.on（「ノード（ 'deptTree'）」関数（OBJ）{ 
            layer.msg（JSON.stringify（obj.param））; 
        }）; 
    }）; 


</ SCRIPT> 
</ BODY> 
</ HTML>

最後にレンダリング

おすすめ