easyuiは、レイアウトのレイアウトをツリーメニュータブ機能を実現します

：フロントエンドフレームワークのUI 3つの汎用クラス

入門初心者の状態では、我々は共通のフロントエンドフレーム3を持っており、独自の公式ウェブサイトがあります。

1.easyui：公式サイト（http://www.jeasyui.net/）

ユーザのコレクションに基づいてjQueryのプラグインのページで、いくつかのインタラクティブjsのための適切な機能を提供し、開発者はjavascriptの特に複雑なメソッドを記述する必要はありません、あなたが解決するためのHTMLタグを使うことができ、サポートHTML5はすべてのニーズを満たすことができると言うことができ、時間だけでなく、拡張ニーズを保存し、それはシンプルだが強力です。

2.Bootstrap：公式サイト（HTTP :. // WWWのbootcss.com/）

ブートストラップは、オープンソースパッケージのTwitterのフロントエンド開発ツールに基づいています。これは、フレームのCSS / HTML / JavaScriptのフロントエンドです。ブートストラップは、HTML5とCSS3に基づいており、応答性の開発を所属され、彼の豊富なだけでなく、美しい人々が望むインタフェースの開発を使用するように、ライン上で簡単に共通に使用するCSSスタイルクラスを覚えて、その白は、HTMLコードの束であると言って、コントロールを使用して簡単にお金。

3.Layui：公式サイト（HTTP :. // WWWのlayui.com/）

 Layuiが属するソースモジュラーフロントエンドのUIフレームワークを開くが、それは、バックエンドの開発者の賛成で、よりバイアスされているので、組織は数年前にブラウザクラスAMDホストモジュール管理の形式を採用することを決定ではなく、これらのルールに限定CommonJSは、それが「古典的モジュラー」と定義し、独自のモデルを、より軽量でシンプルな、layuiは、意図的に「モジュール」という概念自体を強調しますが、コミュニティJSの現在のプログラムの主流を敬遠していません最も単純な解釈する方法と、効率的、および互換性をしようとします。

2：ツリーメニューとタブの機能を実現します

今日では、ツリーメニューの開発の主要なシェアは、フロントフレームとタブ機能（2つの技術的なポイントので一緒にし、コードを表示しないように1つの機能をeasyui、あなたはメソッドQuguanネットワークを使用する方法を詳細に見ることができ、その差はわずかですJSPページと一致するツリーメニューに対応する新たなJavaScriptコード）：

次の図に実装されます：

 1. JSPページの導入JSとCSSを作成し、JSPで必要なテーマのページを書きます

注意：必要なjarパッケージをダウンロード、または導入のスタイル、方法及びeasyuiフレームワークは、学習の価値がある各コントロールの詳細な使用方法を提供するプロセスで見られる公式ウェブAPLファイル、に行くために公式サイトに行くようにしてください、（私が持っているものすべての小さな中国のパイプライン網ことを提供し、存在しない読み取ることはできません）

<リンクREL = " スタイルシート"タイプ= " テキスト/ CSS " HREF = " $ {pageContext.request.contextPath} /static/js/easyui5/themes/default/easyui.css " > 
<リンクREL = " スタイルシート"タイプ= " テキスト/ CSS " HREF = " $ {pageContext.request.contextPath} /static/js/easyui5/themes/icon.css " > 
<スクリプトタイプ= " テキスト/ javascriptの" SRC = " $ {} pageContext.request.contextPath /static/js/easyui5/jquery.min。JS " > </ SCRIPT> 
<スクリプトタイプ=" テキスト/ javascriptの" SRC = " $ {pageContext.request.contextPath} /static/js/easyui5/jquery.easyui.min.js " > </ SCRIPT> 
<スクリプトタイプ= " テキスト/ javascriptの" SRC = " $ { pageContext.request.contextPath} /static/js/index.js " > </ SCRIPT> 
<タイトル> easyui树形组件ツリー演示</タイトル> 
</ HEAD> 
<BODYのクラス = " easyuiレイアウト" > 
    <DIVデータ-options = 「地域： 『北の』国境：偽」
        スタイル = "高さ：60PX; 背景：＃1 B3DFDA。パディング：10pxの" > 北
        地域 </ div> 
    <divのデータ・オプション= " 地域： '西'、スプリット：真、タイトル： 'ウェスト' " 
        スタイル = " 幅：150ピクセル; パディング：10pxの; " > 
        后台管理界面
         <ulのID = " TT " > </ UL> 
    </ div> 
    < divのデータ -options = " 地域： '東'、スプリット：真、崩壊：真、タイトル： 'イースト' " スタイル = " 幅：100pxに。パディング：10pxの; "" 地域： '南'、国境：偽" スタイル = " 高さ：は50px;背景：＃1 A9FACD;パディング：10pxの; " > 南部 </ div> 
    <divのデータ・オプション= " 地域： '中央'、タイトル：行く" " > 
　　　　<div要素のid = " myshow "  クラス = " easyui-タブ"スタイル= "" > 
            <divのタイトル= " Tab1を"スタイル= " パディング：20ピクセル;表示：なし; " > TAB1 </ div>
        </ DIV> 
    </ DIV> 
</ BODY>

3.（セットが設定され、getメソッド）エンティティクラスを定義します。

*私のツリーメニューデータが表示されるように、データベースのデータに基づいているので、私はここにjosnデータ・フォーマットを使用して、DAOとMySQLデータベースの変換方法の使用に関連している、エンティティクラスの最初の定義は、データを取得するために、設定するために使用されます。

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

4.ここでの焦点は、MenuDaoクラスデータ変更手段とメニューツリー機能を表示し、コンテンツページのタブを生成し、

ここでも、データ形式の変換は、最も重要なだけでなく、困難であり、私はページにデータをアップロードし、タブ機能を実現するために一緒に包まれたデータの上を通過するタグ<iframe>のを使用するために使用するJavaScriptのメソッドメニューツリーを表示します。ここでは、私が直接コードではなく、コードの本来の生態系に、ちょうど方法MenuDaoクラスを共有するために、主な機能は、メニューインタフェースを印刷することはできません変換されない場合は、コレクションの配列フォーマットを変換することです。

MenuDao类

/**
     * 
     * @param map   req.getParameterMap
     * @param pageBean  分页
     * @return
     * @throws Exception 
     */
    public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws Exception{
        List<Map<String, Object>> listMenu=this.listMenu(map, pageBean);
        List<TreeNode> treeNodeList=new ArrayList<>();
        menuList2TreeNodeList(listMenu, treeNodeList);
        return treeNodeList;
    }
    /**
     * 查询Menu表的数据
     * @param map
     * @param pageBean
     * @return
     */
    public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean)throws Exception{
        String sql=" select * from t_easyui_menu where true";
        String id=JsonUtils.getParamVal(map, "id");
        if(StringUtils.isNotBlank(id)) {
            sql=sql +" and parentid ="+id;    
        }
        else {
            sql=sql+" and parentid =-1";
        }
        return super.executeQuery(sql, pageBean);
    }
    /**
     * {Menuid:1,....[]}
     * ->{id:1,....[]}
     * menu表的数据不符合easyui树形展示的数据格式
     * 需要转换成easyui所能识别的数据格式
     * @param map
     * @param reTreeNode
     * @throws Exception 
     */
    private void menu2TreeNode(Map<String, Object> map, TreeNode treeNode) throws Exception {
        treeNode.setId(map.get("Menuid").toString());
        treeNode.setText(map.get("Menuname").toString());
        treeNode.setAttributes(map);
        Map<String, String[]> jspMap=new HashMap<>();
        jspMap.put("id", new String[] {treeNode.getId()});
        this.listMenu(jspMap, null);
        List<Map<String, Object>> listMenu=this.listMenu(jspMap, null);
        List<TreeNode> treeNodeList=new ArrayList<>();
        menuList2TreeNodeList(listMenu, treeNodeList);
        treeNode.setChildren(treeNodeList);
    }
    /**
     * [{Menuid:1,....[]},{Menuid:2,....[]}]
     * ->[{id:1,....[]},{id:2,....[]}]
     * @param mapList
     * @param treeNodeList
     * @throws Exception
     */
    private void menuList2TreeNodeList(List<Map<String, Object>> mapList, List<TreeNode> treeNodeList)throws Exception {
        TreeNode treeNode =null;
        for (Map<String, Object> map : mapList) {
            treeNode =new TreeNode();
            menu2TreeNode(map, treeNode);
            treeNodeList.add(treeNode);
        }
    }

javascript方法：

为了代码安全就单独创建了一个js文件，专门用来写javascript实现代码，也挺方便（在这里提醒一下各位一定要看清楚自己在jsp中给div层定义的id，并且铭记几个重要的方法，可以去官网就去官网复制，毕竟javascript不如html代码一样有快捷键提醒，敲错一个字母也能报错，并且错极为细节，心态不好的就容易炸心态，一定要仔仔细细检查，吃饭的家伙基础还是要打好用正确心态对待）。

$(function(){
    $('#tt').tree({    
        url:'menuAction.action?methodName=treeMenu' ,
        onClick:function(node){
            var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
            if($('#myshow').tabs('exists',node.text)){
                $('#myshow').tabs('select',node.text);
            }else{
                $('#myshow').tabs('add',{    
                    title:node.text,    
                    content:content,    
                    closable:true,    
                    tools:[{    
                        iconCls:'icon-mini-refresh',    
                        handler:function(){    
                            alert('refresh');    
                        }    
                    }]    
                });  
            }
        }
    }); 
})

从上述代码中大家也看到了，我也用了mvc的模式，所以需要配置MVC.xml文件，很简单的几句代码，最好单独给xml文件创一个文件夹放置它并且与javasrc包同级，如下图：

 树形菜单和tab页面功能就告一段落了，现在来看easyui中的Layout布局。

三：easyui框架中layout布局使用

还是那句话，配合官网和apl开发最好。

首先我个人认为layout布局是easyui中非常简单蛮容易上手的布局，layout布局也是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的。中间的区域面板是必需要有的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。layout布局也可以嵌套，因此用户可建立复杂的布局。与java swing中的BorderLayout布局管理器蛮像的。

首先来看看要实现的效果图：

1.创建layout布局

这是布局中的核心代码，给<div>标签添加”easyui-layout"的类ID

<div id="ht" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2.自适应的两种方法

2.1：在body内创建一个<div >通过添加属性fit

<div class="easyui-layout" data-options="fit:true"></div>

如果为true，那么布局组件将自适应于父容器，也就是说在使用body创建layout布局时，它就会自动适应到整个页面最大。false反之，但是false是fit属性的默认值

2.2：在bady内添加 class样式

<body class="easyui-layout"></body>

3.嵌套布局的使用

嵌套是什么模式相信大家都是明白的，就是一层套一层嘛，其实这里也差不多的，就是布局套布局层层镶嵌；注意一点，内部布局的西区面板是折叠的，layout布局中也有折叠布局可以用，collapsible就像自适应的fit属性一样，去判断是否就行了

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>

效果图就是这个样子

layout布局中常用属性就是这些个egion、 title、split、iconCls、collapsible、collapsed（true的时候折叠起面板）collapsible:false 是否显示折叠按钮，如果想了解更多可以去官网看看

 

今天就分享到这里，菜鸟一个多多包涵，谢谢大家观看！