分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了easyui前端框架01，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

一. 三大前端框架的特点

1.easyui=jquery+html4

优点：快速开发、功能齐全、免费

缺点：不好看、不支持相应式开发

2.bootstrap=jquery+html5

优点：功能强大、好看、好用、支持响应式开发

缺点：部分功能收费

3.layui

优点：好看、功能强大、免费、支持响应式开发

缺点：框架本生bug较多

二. easyui的使用 (layout、tree、tabs )

easyui的学习路径有：看官方API 看官方demo http://www.jeasyui.net/download/

使用 easyui 需下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

1 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
2 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">   
3 <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>   
4 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

使用时记得更改CSS和Javascript的引用路径

1.layout 简单布局

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。

每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。

布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

创建 layout 布局

为<div/>标签增加名为‘easyui-layout‘的类ID。

<div id="cc" @H_673_90@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‘,iconCls:‘icon-reload‘,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.tabs tab菜单的使用

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID‘easyui-tabs‘。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<div id="tt" @H_673_90@class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>

3.tree 树形展示

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

使用案例

<ul id="tt" @H_673_90@class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>

树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

<ul id="tt"></ul>

$(‘#tt‘).tree({    
    url:‘tree_data.json‘   
});

树控件数据格式化

每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open‘ 或 ‘closed‘，默认：‘open‘。如果为‘closed‘的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

[{    
    "id":1,"text":"Folder1","iconCls":"icon-save","children":[{    
        "text":"File1","checked":@H_673_90@true   
    },{    
        "text":"Books","state":"open","attributes":{    
            "url":"/demo/book/abc","price":100    
        },"children":[{    
            "text":"PhotoShop","checked":@H_673_90@true   
        },{    
            "id": 8,"text":"Sub Bookds","state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages","state":"closed","children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

使用tree展示数据库的数据

建立一个实体类进行属性的封装

 1 @H_673_90@public @H_673_90@class TreeNode {
 2 
 3     @H_673_90@private String id;
 4     @H_673_90@private String text;
 5     @H_673_90@private List<TreeNode> children =@H_673_90@new ArrayList<>();
 6     @H_673_90@private Map<String,Object> attributes=@H_673_90@new HashMap<>();
 7     @H_673_90@public String getId() {
 8         @H_673_90@return id;
 9     }
10     @H_673_90@public @H_673_90@void setId(String id) {
11         @H_673_90@this.id = id;
12     }
13     @H_673_90@public String getText() {
14         @H_673_90@return text;
15     }
16     @H_673_90@public @H_673_90@void setText(String text) {
17         @H_673_90@this.text = text;
18     }
19     @H_673_90@public List<TreeNode> getChildren() {
20         @H_673_90@return children;
21     }
22     @H_673_90@public @H_673_90@void setChildren(List<TreeNode> children) {
23         @H_673_90@this.children = children;
24     }
25     @H_673_90@public Map<String,Object> getAttributes() {
26         @H_673_90@return attributes;
27     }
28     @H_673_90@public @H_673_90@void setAttributes(Map<String,Object> attributes) {
29         @H_673_90@this.attributes = attributes;
30     }
31     
32     
33 }

然后写dao方法来查询数据库的数据

 1 /**
 2      * @L_530_40@menu表的数据
 3      * @param map
 4      * @param pageBean
 5      * @return
 6      */
 7     @H_673_90@public List<Map<String,Object>> listMenu(Map<String,String[]> map,PageBean pageBean)throws Exception{
 8         String sql=" SELEct * FROM t_easyui_menu where true";
 9         String id=JsonUtils.getParamVal(map,"id");
10         @H_673_90@if(StringUtils.isnotBlank(id)) {
11             sql=sql +" and parentid ="+id;    
12         }
13         @H_673_90@else {
14             sql=sql+" and parentid =-1";
15         }
16         
17         @H_673_90@return super.executeQuery(sql,pageBean);
18         
19     }

因为查询出的数据格式easyui不能识别，所以要进行格式转换

 1 /**
 2      * {Menuid:1,....[]}
 3      * ->{id:1,....[]}
 4      * menu表的数据不符合easyui树形展示的数据格式
 5      * 需要转换成easyui所能识别的数据格式
 6      * @param map
 7      * @param reTreeNode
 8      * @throws Exception 
 9      */
10     @H_673_90@private @H_673_90@void menu2TreeNode(Map<String,Object> map,TreeNode treeNodE) throws Exception {
11         treeNode.setId(map.@H_673_90@get("@H_431_458@menuid").toString());
12         treeNode.setText(map.@H_673_90@get("@H_431_458@menuname").toString());
13         treeNode.setAttributes(map);
14         
15         Map<String,String[]> jspMap=@H_673_90@new HashMap<>();
16         jspMap.put("id",@H_673_90@new String[] {treeNode.getId()});
17         @H_673_90@this.listMenu(jspMap,@H_673_90@null);
18         List<Map<String,Object>> listMenu=@H_673_90@this.listMenu(jspMap,@H_673_90@null);
19         List<TreeNode> treeNodeList=@H_673_90@new ArrayList<>();
20         menuList2TreeNodeList(listMenu,treeNodeList);
21         treeNode.setChildren(treeNodeList);
22     }
23     
24 
25     /**
26      * [{Menuid:1,....[]},{Menuid:2,....[]}]
27      * ->[{id:1,{id:2,....[]}]
28      * @param mapList
29      * @param treeNodeList
30      * @throws Exception
31      */
32     @H_673_90@private @H_673_90@void menuList2TreeNodeList(List<Map<String,Object>> mapList,List<TreeNode> treeNodeList)throws Exception {
33         TreeNode treeNode =@H_673_90@null;
34         @H_673_90@for (Map<String,Object> map : mapList) {
35             treeNode =@H_673_90@new TreeNode();
36             menu2TreeNode(map,treeNodE);
37             treeNodeList.add(treeNodE);        
38         }    
39     }

调用方法来返回easyui能识别的格式

 1     /**
 2      * @param map   req.getParameterMap
 3      * @param pageBean  分页
 4      * @return
 5      * @throws Exception 
 6      */
 7     @H_673_90@public List<TreeNode> list(Map<String,String[]> map,PageBean pageBean) @H_673_90@throws Exception{
 8         List<Map<String,Object>> listMenu=@H_673_90@this.listMenu(map,pageBean);
 9         List<TreeNode> treeNodeList=@H_673_90@new ArrayList<>();
10         menuList2TreeNodeList(listMenu,treeNodeList);
11         @H_673_90@return treeNodeList;
12     }

然后写一个自控制器将数据已json格式输出

 1 @H_673_90@public @H_673_90@class MenuAction @H_673_90@extends ActionSupport {
 2     @H_673_90@private MenuDao menuDao =@H_673_90@new MenuDao();
 3 
 4     @H_673_90@public String treeMenu(httpServletrequest req,httpServletResponse resp) {
 5         @H_673_90@try {
 6             List<TreeNode> list=@H_673_90@this.menuDao.list(req.getParameterMap(),@H_673_90@null);
 7             ObjectMapper om=@H_673_90@new ObjectMapper();
 8             //将LIST集合转换为json串
 9             String jsonStr=om.writeValueAsString(list);
10             ResponseUtil.write(resp,jsonStr);
11         } @H_673_90@catch (Exception E) {
12             // TODO Auto-generated catch block
13             e.printStackTrace();
14         }
15         
16         @H_673_90@return @H_673_90@null;
17         
18     }
19 }

在jsp页面加载自己写的js文件

在树形结构的基础上+tabs

写一个if判断防止出现重复的tab页

 1 $(function(){
 2     $(‘#tt‘).tree({    
 3         url:‘menuAction.action?methodName=treeMenu‘, 4         onClick:function(nodE){
 5             var content = ‘<iframe scrolling="no" frameborder="0" src="‘+node.attributes.menuURL+‘" width="99%" height="99%"></iframe>‘;
 6             @H_673_90@if($(‘#menuTabs‘).tabs(‘exists‘,node.text)){
 7                 $(‘#menuTabs‘).tabs(‘SELEct‘,node.text);
 8             }@H_673_90@else{
 9                 $(‘#menuTabs‘).tabs(‘add‘,{    
10                     title:node.text,11                     content:content,12                     closable:@H_673_90@true,13                     tools:[{    
14                         iconCls:‘icon-mini-refresh‘,15                         handler:function(){    
16                             alert(‘refresh‘);    
17                         }    
18                     }]    
19                 });  
20             }
21         }
22     }); 
23 })