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="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. }
  40. /**
  41. * {menuid:1}
  42. * ->{id:1}
  43. * menu表的数据不符合easyUI属性展示的数据格式
  44. * 需要转换成easyUI所能识别的格式
  45. * @param map
  46. * @param treeNode
  47. * @throws SQLException
  48. * @throws IllegalAccessException
  49. * @throws InstantiationException
  50. */
  51. public void menu2TreeNode(Map<String, Object> map,TreeNode treeNode)
  52. throws InstantiationException, IllegalAccessException, SQLException {
  53. treeNode.setId(map.get("Menuid").toString());
  54. treeNode.setText(map.get("Menuname").toString());
  55. treeNode.setAttributes(map);
  56. Map<String, String[]> jspMap=new HashMap<>();
  57. //当前节点的id
  58. jspMap.put("id", new String [] {treeNode.getId()});
  59. List<Map<String, Object>> listMenu= this.listMenu(jspMap, null);
  60. List<TreeNode> treeNodeList=new ArrayList<>();
  61. menuList2TreeNodeList(listMenu, treeNodeList);
  62. treeNode.setChildren(treeNodeList);
  63. }
  64. /**
  65. *
  66. * @param mapList
  67. * @param treeNodeList
  68. * @throws SQLException
  69. * @throws IllegalAccessException
  70. * @throws InstantiationException
  71. */
  72. public void menuList2TreeNodeList(List<Map<String, Object>> mapList,List<TreeNode> treeNodeList)
  73. throws InstantiationException, IllegalAccessException, SQLException {
  74. TreeNode treeNode=null;
  75. for (Map<String, Object> map : mapList) {
  76. treeNode=new TreeNode();
  77. menu2TreeNode(map, treeNode);
  78. treeNodeList.add(treeNode);
  79. }
  80. }

接下来要写的就是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

原文地址：https://www.cnblogs.com/psyu/p/11007011.html

时间： 2024-11-05 01:01:56

EasyUI---layout布局、树形组件、选项卡tabs的相关文章

EasyUI - Layout 布局控件

效果: Html代码: <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> <di

easyui layout 布局title

<script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($("#mainFrm").prev()[0]).html(name); //$("#mainFrm") }); } </script> <!--主窗体--> <div id="mainFrm" data-options=&

java web前端easyui（layout+tree+双tabs）布局+树+2个选项卡tabs

1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title> #parse("ui:include") <style> body{padding:0;margin:0} </style> <script> $(document).ready(function(){ var tabs_content = $

easyui实现树形菜单Tab功能、layout布局

一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面插件集合,为一些交互的js提供相应的功能,开发者也不需要写特别复杂的javascript方法,可以用html的标签来解决,支持html5可以说算是能满足你的所有需求,节约时间还能扩展需求,虽然简单但是功能强大. 2.Bootstrap:官方网站(http://www.bootcss.com/) Bo

第二百零二节，jQuery EasyUI，Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一．加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt

前端框架easyui layout， Tabs，tree

一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部分免费,支持响应式 3.alyui 好看,开发速度快,免费,支持响应式c 二.jQuery EasyUI (layout, Tabs,tree) 下载程序库并导入EasyUI和javascript文件 <link rel="stylesheet" type="text/cs

EasyUI之layout布局（布局面板的响应事件）

jquery easyui框架中的layout布局: 遇到的问题:1.在五方布局中(north.sourth.east.west.center),east面板中,包含了两个div,其中的下面那个div里包含了tabs选项卡页签,但是页签不随面板的放大缩小而变化.如下图: 当设置east面板中包含的div的data-options:"fit:true"时: 第二个包含tabs的div并没有随着其父容器的大小变化而变化. 问题调试: 1.将第一个div与第二个div调换位置:发现只有处于上

jQuery Easy UI Layout(布局)组件

layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便. 对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中的界面布局之外就没别的 办法了,虽然我们可以用ifame切分出一个界面布局,但是我不会添加样式啊.使用layout组件就可以帮我们快速的有一个界面布局,而且美观效果也看得过去. 看个例子: <!doctype html> <html lang="en"

Layout布局(tabs、accordion、layout)

一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初始化出来