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。
- <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) 使用完整页面创建布局
- <body class="easyui-layout">
- <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>
- </body>
(3) 创建嵌套布局
注意:嵌套在内部的布局面板的左侧(西面)面板是折叠的。
- <body class="easyui-layout">
- <div data-options="region:'north'" style="height:100px"></div>
- <div data-options="region:'center'">
- <div class="easyui-layout" data-options="fit:true">
- <div data-options="region:'west',collapsed:true" style="width:180px"></div>
- <div data-options="region:'center'"></div>
- </div>
- </div>
- </body>
(4)通过ajax读取内容
布局是以面板为基础创建的。所有的布局面板都支持异步加载URL内容。使用异步加载技术,用户可以使自己的布局页面显示的内容更多更快。
- <body class="easyui-layout">
- <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
- <div data-options="region:'center',href:'center_content.php'" ></div>
- </body>
三、树形组件
树控件可以定义在一个空<ul>元素中并使用Javascript加载数据。
- <ul id="tt"></ul>
- $('#tt').tree({
- url:'tree_data.json'
- });
但是自定义表格的数据不符合easyUI属性展示的数据格式,需要转换成easyUI所能识别的格式
所以接下来的方法就至关重要了
- /**
- *
- * @param map : req.getParameterMap
- *
- * @param pageBean 分页
- *
- * @return
- * @throws SQLException
- * @throws IllegalAccessException
- * @throws InstantiationException
- */
- public List<TreeNode> list(Map<String, String[]> map, PageBean pageBean)
- throws InstantiationException, IllegalAccessException, SQLException {
- List<Map<String, Object>> listMenu= this.listMenu(map, pageBean);
- List<TreeNode> treeNodeList=new ArrayList<>();
- menuList2TreeNodeList(listMenu, treeNodeList);
- return treeNodeList;
- }
- /**
- * 查询menu表 的数据
- *
- * @param map
- * @param pageBean
- * @return
- * @throws SQLException
- * @throws IllegalAccessException
- * @throws InstantiationException
- */
- public List<Map<String, Object>> listMenu(Map<String, String[]> map, PageBean pageBean)
- throws InstantiationException, IllegalAccessException, SQLException {
- 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);
- }
- /**
- * {menuid:1}
- * ->{id:1}
- * menu表的数据不符合easyUI属性展示的数据格式
- * 需要转换成easyUI所能识别的格式
- * @param map
- * @param treeNode
- * @throws SQLException
- * @throws IllegalAccessException
- * @throws InstantiationException
- */
- public void menu2TreeNode(Map<String, Object> map,TreeNode treeNode)
- throws InstantiationException, IllegalAccessException, SQLException {
- treeNode.setId(map.get("Menuid").toString());
- treeNode.setText(map.get("Menuname").toString());
- treeNode.setAttributes(map);
- Map<String, String[]> jspMap=new HashMap<>();
- //当前节点的id
- jspMap.put("id", new String [] {treeNode.getId()});
- List<Map<String, Object>> listMenu= this.listMenu(jspMap, null);
- List<TreeNode> treeNodeList=new ArrayList<>();
- menuList2TreeNodeList(listMenu, treeNodeList);
- treeNode.setChildren(treeNodeList);
- }
- /**
- *
- * @param mapList
- * @param treeNodeList
- * @throws SQLException
- * @throws IllegalAccessException
- * @throws InstantiationException
- */
- public void menuList2TreeNodeList(List<Map<String, Object>> mapList,List<TreeNode> treeNodeList)
- throws InstantiationException, IllegalAccessException, SQLException {
- TreeNode treeNode=null;
- for (Map<String, Object> map : mapList) {
- treeNode=new TreeNode();
- menu2TreeNode(map, treeNode);
- treeNodeList.add(treeNode);
- }
- }
接下来要写的就是web层
- /**
- *
- * @param req
- * @param resp
- * @return
- * @throws Exception
- */
- public String treeMenu(HttpServletRequest req,HttpServletResponse resp) throws Exception {
- List<TreeNode> list= this.menuDao.list(req.getParameterMap(), null);
- ObjectMapper om=new ObjectMapper();
- //将list集合转换成json串
- String jsonStr= om.writeValueAsString(list);
- //把json串写到jsp页面里面去
- ResponseUtil.write(resp, jsonStr);
- return "index";
- }
四、选项卡tabs
创建面板
1. 通过标签创建选项卡
通过标签可以更容易的创建选项卡,我们不需要写任何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>
2. 通过Javascript创建选项卡
下面的代码演示如何使用Javascript创建选项卡,当该选项卡被选择时将会触发'onSelect'事件。
- $('#tt').tabs({
- border:false,
- onSelect:function(title){
- alert(title+' is selected');
- }
- });
添加新的选项卡面板
添加一个新的包含小工具菜单的选项卡面板,小工具菜单图标(8x8)被放置在关闭按钮之前。
- // add a new tab panel
- $('#tt').tabs('add',{
- title:'New Tab',
- content:'Tab Body',
- closable:true,
- tools:[{
- iconCls:'icon-mini-refresh',
- handler:function(){
- alert('refresh');
- }
- }]
- });
获取选择的选项卡
- // get the selected tab panel and its tab object
- var pp = $('#tt').tabs('getSelected');
- var tab = pp.panel('options').tab; // the corresponding tab object
树形菜单加tabs效果图:
转载于:https://www.cnblogs.com/psyu/p/11007011.html
EasyUI---layout布局、树形组件、选项卡tabs相关推荐
- EasyUI中layout布局的简单使用
场景 效果 布局选项(Layout Options) 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
- php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
- EasyUI -- Layout(布局)
第一章 介绍 EasyUI – Layout(布局)将布局容器分成了5个区域,分别是:east(东).west(西).south(南).north(北)和center(中).center(中)区域是必 ...
- 【无标题】监控后台视频分屏 2*3 和4*6 使用element组件Layout布局
监控后台视频分屏 2*3 和4*6 使用element组件Layout布局 个人笔记 <div class="home-page-2-middle"><!-- ...
- JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
- EasyUI之Layout布局
视频课:https://edu.csdn.net/course/play/7621 Layout布局,是按照上北,下南,左西右东,center居中的布局方式.主要属性:region设置布局的方向,st ...
- ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
- Ext JS4序列教程之一 :Layout布局
1.序言 EXT JS4序列教程主要讲解WEB开发中一些常用的组件,例如Tree,Grid,Combobox,form等,EXT JS4的出现为广大程序员带来了福音,我们可以用较少的代码,实现很炫丽的 ...
- 【Android 应用开发】UI绘制流程 ( 生命周期机制 | 布局加载机制 | UI 绘制流程 | 布局测量 | 布局摆放 | 组件绘制 | 瀑布流布局案例 )
文章目录 一. 博客相关资料 及 下载地址 1. 代码查看方法 ( ① 直接获取代码 | ② JAR 包替换 ) 2. 本博客涉及到的源码查看说明 二. Activity 生命周期回调机制 1. An ...
最新文章
- Unix/Linux IPC及线程间通信总结
- python中什么最重要_Python 3中被忽视了的三大重要功能
- 平板电脑可以插u盘吗_电视TV盒子安装app的六个方法,u盘/电脑/手机都可以安装...
- rm: 无法删除swap: 不允许的操作_safe-rm老板再也不用担心我删库跑路啦[视频]
- 计算机键盘打出来都是英语大写怎么办,电脑键盘上大小写怎么切换
- ERP数据口径不一,管理层不好决策?你该看看这5个数字化场景
- ubuntu emacs的安装
- [bzoj1008][HNOI2008]越狱-题解[简单组合数学]
- 基于UDP协议的Socket通信
- 数据科学研究的现状与趋势全解
- Excel论文画折线图
- 揭开 Xxl-job 的神秘面纱
- Hadoop环境配置(6)-MySQL安装
- 学习笔记,每日打卡,持续更新
- That引导定语从句和同位语从句的用法区别
- 良心整理!500G Java学习资料免费分享!
- Java核心类库之(网络编程:网络编程入门、UDP通信程序、TCP通信程序)
- Logstash数据处理服务的过滤插件GeoIP解析IP地址的地理位置
- FLASH动态文本无法显示问题
- 程序员面试前都要做哪些准备
热门文章
- 学Python前途如何,带你了解Python的优势!
- css倒序循环,不借助后台和 JS ,只用 CSS 让一个列表编号倒序
- 重磅!2021年考研国家线公布!
- 收藏 | 可能是最详尽的PyTorch动态图解析
- 收藏 | 深度学习调试经验
- python求正整数的百位部分_Python程序设计课后习题答案
- tensorflow的数据输入
- LSTM模型在问答系统中的应用
- php+js实现异步图片上传,JavaScript实现异步图像上传功能
- springboot并发上传文件_springboot实现单文件和多文件上传