zoukankan      html  css  js  c++  java

  • EasyUI---layout布局、树形组件、选项卡tabs

    一、了解EasyUI与BootStrap、LayUI的区别

    1.EasyUI和LayUI对比

          easyui是功能强大但是有很多的组件使用功能是十分强大的，而layui是2016年才出来的前端框架，现在才更新到2.x版本还有很多的功能没有完善，也还存在一些不稳定的情况，但是layui界面简约美观，而且容易上手而且有很多组件在layui的社区里都可以找到

    2.LayUI与BootStrap对比

    layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看。
    bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过。

    LayUI其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果
    做后台框架。

    BootStrap 在前端响应式方面做得很好，PC端和移动端表现都不错。
    做网站不错。

    那么我们这里为什么要讲EasyUI的用法呢？

    原因有三

    1.easyui功能相对强大，几乎可以满足你开发中所有的需求

    2.easyui发展比较成熟比较稳定，适合在学习中来用

    3.easyui是免费的

    接下来看几个EasyUI的案例~

    二、layout布局

    1.创建布局

            （1） 通过标签创建布局

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

    1. <div id="cc" class="easyui-layout" style="600px;height:400px;">  
    2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>  
    5.     <div data-options="region:'west',title:'West',split:true" style="100px;"></div>  
    6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
    7. </div>  

           （2） 使用完整页面创建布局

    1. <body class="easyui-layout">  
    2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
    3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div>  
    5.     <div data-options="region:'west',title:'West',split:true" style="100px;"></div>  
    6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
    7. </body>  

            （3） 创建嵌套布局

             注意：嵌套在内部的布局面板的左侧(西面)面板是折叠的。

    1. <body class="easyui-layout">  
    2.     <div data-options="region:'north'" style="height:100px"></div>  
    3.     <div data-options="region:'center'">  
    4.         <div class="easyui-layout" data-options="fit:true">  
    5.             <div data-options="region:'west',collapsed:true" style="180px"></div>  
    6.             <div data-options="region:'center'"></div>  
    7.         </div>  
    8.     </div>  
    9. </body>  

            （4）通过ajax读取内容

             布局是以面板为基础创建的。所有的布局面板都支持异步加载URL内容。使用异步加载技术，用户可以使自己的布局页面显示的内容更多更快。

    1. <body class="easyui-layout">  
    2.     <div data-options="region:'west',href:'west_content.php'" style="180px" ></div>  
    3.     <div data-options="region:'center',href:'center_content.php'" ></div>  
    4. </body> 

    三、树形组件

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

    1. <ul id="tt"></ul>  
    1. $('#tt').tree({   
    2.     url:'tree_data.json'  
    3. }); 

    但是自定义表格的数据不符合easyUI属性展示的数据格式，需要转换成easyUI所能识别的格式

    所以接下来的方法就至关重要了

    1. /**
    2. *
    3. * @param map ： req.getParameterMap
    4. * 
    5. * @param pageBean  分页
    6. * 
    7. * @return
    8. * @throws SQLException
    9. * @throws IllegalAccessException
    10. * @throws InstantiationException
    11. */
    12. public List<TreeNode> list(Map<String, String[]> map, PageBean pageBean)
    13. throws InstantiationException, IllegalAccessException, SQLException {
    14.     List<Map<String, Object>> listMenu= this.listMenu(map, pageBean);
    15.     List<TreeNode> treeNodeList=new ArrayList<>();
    16.     menuList2TreeNodeList(listMenu, treeNodeList);
    17.     return treeNodeList;
    18. }
    19. /**
    20. * 查询menu表 的数据
    21. *
    22. * @param map
    23. * @param pageBean
    24. * @return
    25. * @throws SQLException
    26. * @throws IllegalAccessException
    27. * @throws InstantiationException
    28. */
    29. public List<Map<String, Object>> listMenu(Map<String, String[]> map, PageBean pageBean)
    30. throws InstantiationException, IllegalAccessException, SQLException {
    31.     String sql = "select * from t_easyui_menu where true ";
    32.     String id = JsonUtils.getParamVal(map, "id");
    33.     if (StringUtils.isNotBlank(id)) {
    34.     sql = sql + " and parentid=" + id;
    35.     } else {
    36.           sql = sql + " and parentid=-1";
    37.        }
    38.    return super.executeQuery(sql, pageBean);
    39. }
    42. /**
    43. * {menuid:1}
    44. * ->{id:1}
    45. * menu表的数据不符合easyUI属性展示的数据格式
    46. * 需要转换成easyUI所能识别的格式
    47. * @param map
    48. * @param treeNode
    49. * @throws SQLException
    50. * @throws IllegalAccessException
    51. * @throws InstantiationException
    52. */
    53. public void menu2TreeNode(Map<String, Object> map,TreeNode treeNode)
    54. throws InstantiationException, IllegalAccessException, SQLException {
    55.      treeNode.setId(map.get("Menuid").toString());
    56.      treeNode.setText(map.get("Menuname").toString());
    57.      treeNode.setAttributes(map);
    58.      Map<String, String[]> jspMap=new HashMap<>();
    59.      //当前节点的id
    60.      jspMap.put("id", new String [] {treeNode.getId()});
    61.      List<Map<String, Object>> listMenu= this.listMenu(jspMap, null);
    62.      List<TreeNode> treeNodeList=new ArrayList<>();
    64.     menuList2TreeNodeList(listMenu, treeNodeList);
    65.     treeNode.setChildren(treeNodeList);
    66. }
    69. /**
    70. *
    71. * @param mapList
    72. * @param treeNodeList
    73. * @throws SQLException
    74. * @throws IllegalAccessException
    75. * @throws InstantiationException
    76. */
    77. public void menuList2TreeNodeList(List<Map<String, Object>> mapList,List<TreeNode> treeNodeList)
    78. throws InstantiationException, IllegalAccessException, SQLException {
    79.       TreeNode treeNode=null;
    80.       for (Map<String, Object> map : mapList) {
    81.       treeNode=new TreeNode();
    82.       menu2TreeNode(map, treeNode);
    83.       treeNodeList.add(treeNode);
    84. }
    85. }

    接下来要写的就是web层

    1. /**
    2. *
    3. * @param req
    4. * @param resp
    5. * @return
    6. * @throws Exception
    7. */
    8. public String treeMenu(HttpServletRequest req,HttpServletResponse resp) throws Exception {
    9.        List<TreeNode> list= this.menuDao.list(req.getParameterMap(), null);
    10.        ObjectMapper om=new ObjectMapper();
    11.          //将list集合转换成json串
    12.          String jsonStr= om.writeValueAsString(list);
    13.          //把json串写到jsp页面里面去
    14.          ResponseUtil.write(resp, jsonStr);
    15.               return "index";
    16. }

    四、选项卡tabs

    创建面板

    1. 通过标签创建选项卡

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

     
    1. <div id="tt" class="easyui-tabs" style="500px;height:250px;">  
    2.     <div title="Tab1" style="padding:20px;display:none;">  
    3.         tab1   
    4.     </div>  
    5.     <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">  
    6.         tab2   
    7.     </div>  
    8.     <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">  
    9.         tab3   
    10.     </div>  
    11. </div>  

    2. 通过Javascript创建选项卡

    下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

    1. $('#tt').tabs({   
    2.     border:false,   
    3.     onSelect:function(title){   
    4.         alert(title+' is selected');   
    5.     }   
    6. });  
    添加新的选项卡面板

    添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。

    1. // add a new tab panel   
    2. $('#tt').tabs('add',{   
    3.     title:'New Tab',   
    4.     content:'Tab Body',   
    5.     closable:true,   
    6.     tools:[{   
    7.         iconCls:'icon-mini-refresh',   
    8.         handler:function(){   
    9.             alert('refresh');   
    10.         }   
    11.     }]   
    12. }); 
     
    获取选择的选项卡
    1. // get the selected tab panel and its tab object   
    2. var pp = $('#tt').tabs('getSelected');   
    3. var tab = pp.panel('options').tab;    // the corresponding tab object  

    树形菜单加tabs效果图：
  • 相关阅读:
    tp5使用jwt生成token,做api的用户认证
    thinkphp5.0多条件模糊查询以及多条件查询带分页如何保留参数
    tp5.1 模型 where多条件查询 like 查询 --多条件查询坑啊！！(tp5.1与tp5.0初始化控制器不一样)
    获取客户端IP地址-----以及--------线上开启redis扩展
    分享几个免费IP地址查询接口(API)
    thinkphp5选择redis库，让数据存入不同的redis库
    【JZOJ4824】【NOIP2016提高A组集训第1场10.29】配对游戏
    【JZOJ1637】【ZJOI2009】狼和羊的故事
    【JZOJ1611】Dining
    【JZOJ2224】【NOI2006】最大获利
  • 原文地址：https://www.cnblogs.com/psyu/p/11007011.html
Copyright © 2011-2022 走看看