碼上快樂

相關內容    簡體    繁體

EasyUI---layout布局、樹形組件、選項卡tabs

本文轉載自   查看原文   2019-06-11 23:47   536 

一、了解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="width: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="width:100px;"></div>  
  5.     <div data-options="region:'west',title:'West',split:true" style="width: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="width:100px;"></div>  
  5.     <div data-options="region:'west',title:'West',split:true" style="width: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="width: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="width: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="width: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效果圖：


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 java web前端easyui（layout+tree+雙tabs）布局+樹+2個選項卡tabs easyui---layout布局 第二百節，jQuery EasyUI，Tabs(選項卡)組件 jQuery EasyUI 教程-Tabs（選項卡） layout 布局、手風琴accordion、選項卡tabs Tabs( 選項卡) Jquery EasyUI選項卡-Tabs的使用方法 JQERY EasyUI Tabs 選項卡 自適應瀏覽器寬度高度 解決方案 jQuery選項卡插件、Tabs插件 基於jQuery UI的tabs選項卡美化
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM