easyui（エントリー）

その他 2019-06-29 11:27:52 訪問数: null

目標：
1、レイアウトのレイアウトによって
2、メニューツリーロードすることにより、
別のタブページを開くには、メニューから、3を

UIフレーム：
easyui jQueryの+ = HTML4（背景管理インタフェースに使用） 
ブートストラップ+ = jQueryのHTML5に 
layui

 

ガイドパッケージ：

インポートツールが必要：

 

あなたのページに、ライブラリおよびインポートEasyUIのCSSとJavaScriptファイルをダウンロードしてください。

順序に厳密に従ったものでなければなりません

<リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "easyui /テーマ/デフォルト/ easyui.css">    
<リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "easyui /テーマ/アイコン.css ">    
ます。<script type =" text / javascriptの"SRC = "easyui / jqueryの-1.7.2.min.js"> </ SCRIPT>    
ます。<script type = "text / javascriptの" SRC =" easyui / jquery.easyui .min.js "> </ SCRIPT>

 

あなたはEasyUI必要なドキュメントをインポートしたら、マーキングやJavaScriptでEasyUIコンポーネントを定義することができます。たとえば、次のように折り畳み式の機能を備えたパネルの定義は、次のようにHTMLコードを記述する必要があります。

<divのデータ・オプション= "地域： '北の'国境：偽" 
    スタイル= "高さ：60PX;背景：＃B3DFDA;パディング：10pxの">北地域</ div> 
    <divのデータ・オプション= "地域：」西」、スプリット：真、タイトル： '西'」
    スタイル= "幅：150ピクセル;パディング：10pxの;"> 
        菜单管理
    <ulのID = "TT"> </ UL>   
</ div> 
    
    <divのデータ、オプション= "地域： '東'、スプリット：真は、崩壊：真、タイトル： '東'"スタイル= "幅：100pxに;パディング：10pxの;">東地域</ div> 
    <divのデータ・オプション= "地域を」南」、国境：偽"スタイル= "高さ：は50px;背景：＃1 A9FACD;パディング：10pxの;">南部</ div> 
    <divのデータ・オプション="地域： '中央'、タイトル： 'センター' "> </ div>

 

エンティティクラス：

TreeNode.java

 これは、ツリーノードのクラスtree_data1.jsonの作用によって変換され、
 
パッケージcom.huang.entity。

輸入はjava.util.ArrayList; 
輸入java.util.HashMapを; 
輸入はjava.util.List; 
輸入java.util.Map; 


パブリッククラスのTreeNode { 
    プライベート文字列ID; 
    プライベート文字列テキスト。
    プライベート地図<文字列、オブジェクト> =新しいHashMapのは、<>（）属性。
    プライベートリスト<のTreeNode>子供=新しいArrayListを<>（）; 

    パブリック文字列のgetId（）{ 
        戻りID。
    } 

    公共ボイドSETID（文字列ID）{ 
        this.id = ID。
    } 

    パブリック文字列のgetText（）{ 
        テキストを返します。
    } 

    公共ボイドのsetText（文字列テキスト）{ 
        this.text =テキスト。
    }

    公共の地図<文字列、オブジェクト>のgetAttributes（）{ 
        属性を返します。
    } 

    公共ボイドをsetAttributes（地図の<string、オブジェクト>属性）{ 
        this.attributesの=属性。
    } 

    パブリックリスト<ツリーノード> GetChildrenメソッド（）{ 
        子を返します。
    } 

    公共ボイドsetChildren（一覧<ツリーノード>子供）{ 
        this.childrenの=子供。
    } 

    公共のTreeNode（文字列ID、文字列のテキスト、地図<文字列、オブジェクト>属性は、List <のTreeNode>子供）{ 
        スーパー（）; 
        this.id = ID。
        this.text =テキスト。
        this.attributes =属性。
        this.children =子供; 
    }

    公共のTreeNode（）{ 
        スーパー（）。
    } 

    @Override 
    パブリック文字列のtoString（）{ 
        リターン"ツリーノード[ID =" + ID + "テキスト=" +テキスト+ "子供=" +子供+ + +属性"は、=属性" "]"。
    } 

}

 

tree_data1.json

[{ 
    "ID"：1、
    "テキスト"： "菜单管理"、
    "子供"：[{ 
        "ID"：11、
        "テキスト"： "财务"、
        "状態"： "閉"、
        "子供"：[ { 
            "ID"：111、
            "テキスト"： "联系の我们" 
        }、{ 
            "ID"：112、
            "テキスト"： "妻" 
        }、{ 
            "ID"：113、
            "テキスト"： "会社" 
        }] 
    } 、{ 
        "ID"：12、
        "テキスト"： "后勤"、
        "子供"：[{ 
            "ID"：121、
            "テキスト"： "インテル" 
        }、{ 
            "ID"：122、
            "テキスト"の"Java"、 
            "属性"：{
                "P1"： "カスタムATTRIBUTE1"、
                "P2"： "カスタムattribute2の" 
            } 
        }、{ 
            "ID"：123、
            "テキスト"： "费用缴纳" 
        }、{ 
            "ID"：124、
            "テキスト"： "ゲーム" 
            "チェック"：真
        }] 
    }、{ 
        "ID"：13、
        "テキスト"： "index.htmlを" 
    }、{ 
        "ID"：14、
        "テキスト"： "about.html" 
    }、{ 
        " ID "：15、
        "テキスト"："のwelcome.html」
    }] 
}]

MenuDao.java

com.huang.daoパッケージ; 

輸入ます。java.sql.SQLException; 
java.util.ArrayListののインポート、
インポートのjava.util.HashMap; 
インポートはjava.util.List; 
インポートjava.util.Map; 

インポートcom.huang.entity.TreeNode ; 
インポートcom.huang.util.JsonBaseDao; 
インポートcom.huang.util.JsonUtils; 
インポートcom.huang.util.PageBean; 
インポートcom.huang.util.StringUtils; 

publicクラスMenuDaoはJsonBaseDao {延び

    / ** 
     フロントに戻ります* tree_data1_json文字セット
     *フロントデスクのJSPからパラメータのセットが渡さ
     * @paramのPAMAP 
     * @param pageBean 
     * @return 
     * @throwsのSQLException 
     * @throws IllegalAccessExceptionがします
     * @throwsないInstantiationException 
     * / 
    パブリックリスト<ツリーノード> listTreeNode（地図<文字列、文字列[]> paMap、PageBean pageBean）ないInstantiationException、IllegalAccessExceptionをスロー、のSQLException { 
        リスト<地図<文字列オブジェクト>> listMap = this.listMap（paMap、 pageBean）; 
        リスト<のTreeNode> listTreeNode =新しいArrayListを<>（）; 
        this.listMapToListtreeNode（listMap、listTreeNode）。
        ヌルを返します。
        } 
    
    / ** 
     * [{ 'menuID属性' 001、 'MENUNAME'： '学生管理'}、{ 'menuID属性' 001、 'MENUNAME'： '后勤管理' 
     * @throws SQLExceptionが
     * /
    公衆リスト<地図<文字列オブジェクト>> listMap（MAP <文字列、文字列[]> paMap、PageBean pageBean）がないInstantiationException、IllegalAccessExceptionが、のSQLException {スロー
        文字列のSQL = "t_easyui_menuから真*選択を"; 
        ストリングmenuID属性= JsonUtils.getParamVal（paMap、 "menuID属性"）。
        IF（StringUtils.isNotBlank（menuID属性））{ 
            SQL + = "とのParentID =" + menuID属性。
        } 
        他{ 
            SQL + =」とのParentID = -1" 。
        } 
        //这里面存放的是数据库菜单信息
        一覧<地図<文字列、オブジェクト>> listMap = super.executeQuery（SQL、pageBean）。
        listMapを返します。
        } 
    
    / ** 
     * { 'menuID属性' 001、」
     * {ID：...、テキスト：...} 
     * @paramマップ
     * @paramのTREENODE 
     * @throwsのSQLException 
     * @throws IllegalAccessExceptionが
     * @throwsないInstantiationException 
     * / 
    プライベート無効MapTotreeNode（地図<文字列、オブジェクト>マップ、ツリーノードのTreeNode ）スローないInstantiationException、IllegalAccessExceptionが、のSQLException { 
        treeNode.setId（map.get（ "menuID属性"）+ ""）。
        treeNode.setText（map.get（ "menuID属性"）+ ""）; 
        
        treeNode.setAttributes（マップ）
        リスト<のTreeNode> listTreeNode =新しいArrayListを<>（）; 
        this.listMapToListtreeNode（listMap、
         
//は、データとの間に確立された親子関係の中で親ノードに子ノードを追加する
        地図の<string、String []型> childrenMap =新しいHashMapの<>（） ; 
        childrenMap。PUT（ "menuID属性"、新しいString [] {treeNode.getId（）}）。
        一覧<地図<文字列、オブジェクト>> listMap = this.listMap（childrenMap、NULL）; 
        treeNode.setChildren（listTreeNode）。
    } 
    
    / ** 
     * [{ 'menuID属性' 001、 'MENUNAME'： '学生管理'}、{ 'menuID属性' 001、 'MENUNAME'： '后勤管理'}] 
     * @param listMap 
     * @param listTreeNode 
     * @ SQLExceptionスロー
     * @throws IllegalAccessExceptionが
     * @throwsないInstantiationException 
     * / 
プライベートボイドlistMapToListtreeNode（一覧<地図<文字列、オブジェクト>> listMap、リスト<のTreeNode> listTreeNode）が投げないInstantiationException、IllegalAccessExceptionが、のSQLException { 
        TreeNodeのTREENODE = NULL; 
        （地図<文字列、オブジェクト>マップの：
            MapTotreeNode（マップ、ツリーノード）。
            listTreeNode。
        }
    } 
}

MenuAction.java

パッケージcom.huang.web。

輸入はjava.util.List; 

インポートのjavax.servlet.http.HttpServletRequest; 
インポートのjavax.servlet.http.HttpServletResponse; 

輸入com.fasterxml.jackson.databind.ObjectMapper。
輸入com.huang.dao.MenuDao。
輸入com.huang.entity.TreeNode。
輸入com.huang.util.ResponseUtil。
輸入com.zking.framework.ActionSupport。

パブリッククラスMenuActionはActionSupport {延び

    プライベートMenuDao menuDao =新しいMenuDaoを（）; 
    
    パブリック文字列menuTree（HttpServletRequestのREQ、HttpServletResponseのRESP）{ 
        ObjectMapper OM =新しいObjectMapper（）。
        試す{ 
//获取到easyui框架所识别的jsonの格式
            リスト<ツリーノード> = listTreeNode this.menuDao.listTreeNode（req.getParameterMap（）、NULL）; 
            ResponseUtil.write（それぞれ、om.writeValueAsString（listTreeNode））。
        }キャッチ（例外e）{ 
            e.printStackTrace（）; 
        } 
        はnullを返します。
    } 
}

index.jspの

<％@ページ言語= "javaの" contentTypeの= "text / htmlの;のcharset = UTF-8" 
    pageEncodingは= "UTF-8" ％> 
<DOCTYPE用HTML PUBLIC「 - // W3C // DTD HTML 4.01移行// EN！ " "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
<HEAD> 
<META HTTP-当量=" Content-Typeの"コンテンツ=" text / htmlの;のcharset = UTF-8 "> 
<タイトル>后台主界面</タイトル> 
    <リンクREL ="スタイルシート"タイプ= "テキスト/ CSS" 
HREF =" $ {pageContext.request.contextPath} /静的/のJS /パブリック/ easyui5 /テーマ/ブラック/ easyui.css ">    
    <リンクのrel ="スタイルシート"タイプ= "テキスト/ cssの" 
のhref =" $ {pageContext.request.contextPath} /静的/のJS /公共/ easyui5 /テーマ/アイコン。   CSS "> 
    ます。<script type =" text / javascriptの」CSS "> 
SRC =" $ {} pageContext.request.contextPath /static/js/public/easyui5/jquery.min.js "> </ SCRIPT>   
    <スクリプトタイプ= "テキスト/ javascriptの" 
srcが= "$ {pageContext.request.contextPath} /static/js/public/easyui5/jquery.easyui.min.js"> </ SCRIPT>   
    <スクリプトタイプ= "テキスト/ javascriptの" 
SRC =" $ {pageContext.request.contextPath} /static/js/index.js "> </ SCRIPT> 


</ HEAD> 
<BODYクラス=" easyuiレイアウト"> 
    の<divデータオプション="領域：」北'国境：偽" 
    スタイル= "高さ：60PX;背景：＃B3DFDA;パディング：10pxの">北地域</ div> 
    <divのデータ・オプション="地域： '西'、スプリット：真、タイトル：'西"」
    スタイル= "幅：150ピクセル;パディング：10pxの;"> 
        菜单管理
    <ulのID = "TT"> <  / UL> 
</ div>
    
    <divのデータ・オプション= "地域： '東'、スプリット：真、崩壊：真、タイトル： '東'を"スタイル= "幅：100pxに;パディング：10pxの;">東地域</ div> 
    <divのデータ-オプション= "地域： '南'、国境：偽"スタイル= "高さ：は50px;背景：＃1 A9FACD;パディング：10pxの;">南部</ div> 
    <divのデータ・オプション= "地域： '中央'、タイトル：行く""> </ div> 
</ BODY> 

</ HTML>

index.js

$（関数（）{ 
    $（ '＃のTT'）木（{。     
        URL： '？/ menuAction.action methodNameの= menuTree'    
    }）; 
}）

 

 

 

 

おすすめ

転載: www.cnblogs.com/bf6rc9qu/p/11105375.html
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com