可以同时用layui和ElementUI吗

转载

编程梦想编织者 2024-07-16 07:31:04

文章标签 javascript json 后端 ViewUI 选项卡 文章分类 机器学习人工智能

一、了解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>

三、树形组件

可以同时用layui和ElementUI吗_后端

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

1. <ul id="tt"></ul>  
 
 
1. $('#tt').tree({    
2. '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.  }
40. 
41. 
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<>();
63. 
64.     menuList2TreeNodeList(listMenu, treeNodeList);
65.     treeNode.setChildren(treeNodeList);
66.  }
67. 
68. 
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. false,    
3. function(title){    
4. ' is selected');    
5.     }   
6. });

添加新的选项卡面板

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

1. // add a new tab panel    
2. $('#tt').tabs('add',{    
3. 'New Tab',    
4. 'Tab Body',    
5. true,    
6.     tools:[{   
7. 'icon-mini-refresh',    
8. function(){    
9. '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效果图：

可以同时用layui和ElementUI吗_json_02