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文件到您的页面。

 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.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>

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

1.layout 简单布局

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

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

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

创建 layout 布局

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

<div id="cc" 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" 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" 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":true

    },{

        "text":"Books",

        "state":"open",

        "attributes":{

            "url":"/demo/book/abc",

            "price":100

        },

        "children":[{

            "text":"PhotoShop",

            "checked":true

        },{

            "id": 8,

            "text":"Sub Bookds",

            "state":"closed"

        }]

    }]

},{

    "text":"Languages",

    "state":"closed",

    "children":[{

        "text":"Java"

    },{

        "text":"C#"

    }]

}]

使用tree展示数据库的数据

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

 public class TreeNode {

     private String id;

     private String text;

     private List<TreeNode> children =new ArrayList<>();

     private Map<String, Object> attributes=new HashMap<>();

     public String getId() {

         return id;

     }

     public void setId(String id) {

         this.id = id;

     }

     public String getText() {

         return text;

     }

     public void setText(String text) {

         this.text = text;

     }

     public List<TreeNode> getChildren() {

         return children;

     }

     public void setChildren(List<TreeNode> children) {

         this.children = children;

     }

     public Map<String, Object> getAttributes() {

         return attributes;

     }

     public void setAttributes(Map<String, Object> attributes) {

         this.attributes = attributes;

     }

 }

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

 /**

      * 查询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);

     }

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

 /**

      * {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);

         }

     }

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

     /**

      * @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;

     }

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

 public class MenuAction extends ActionSupport {

     private MenuDao menuDao =new MenuDao();

     public String treeMenu(HttpServletRequest req,HttpServletResponse resp) {

         try {

             List<TreeNode> list=this.menuDao.list(req.getParameterMap(), null);

             ObjectMapper om=new ObjectMapper();

             //将LIST集合转换为json串

             String jsonStr=om.writeValueAsString(list);

             ResponseUtil.write(resp, jsonStr);

         } catch (Exception e) {

             // TODO Auto-generated catch block

             e.printStackTrace();

         }

         return null;

     }

 }

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

在树形结构的基础上+tabs

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

 $(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($('#menuTabs').tabs('exists',node.text)){

                 $('#menuTabs').tabs('select',node.text);

             }else{

                 $('#menuTabs').tabs('add',{

                     title:node.text,

                     content:content,

                     closable:true,

                     tools:[{

                         iconCls:'icon-mini-refresh',

                         handler:function(){

                             alert('refresh');

                         }

                     }]

                 });

             }

         }

     });

 })

最终效果如下

tree 结构的难点在于

需要使用递归来反复调用方法查询数据和对数据格式的转换

巴特西

easyui前端框架01

树控件数据格式化

最新文章

热门文章