JQueryEasyUI学习简单Demo
一.Layout布局
声明：此文档参考了jQuery EasyUI官方文档
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
1.通过以下代码可以构建下图的效果：
aaarticlea/png;base64,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" alt="" width="419" height="209" />
<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>
2.折叠布局面板
//获得id=‘cc’的布局面板
$('#cc').layout();
// collapse the west panel
//coolapse表示折叠布局方法，west表示那个方向的面板
$('#cc').layout('collapse','west');
3.布局属性
fit属性：如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大。默认false
4.区域面板属性
5.用tree的形式布局west区域的菜单
代码如下：
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>部门管理</span>
<ul>
<li>
<span><a href="#" onclick="doclickMenu('deplist.jsp','部门列表')">部门列表</a></span>
</li>
<li>
<span><a href="#" onclick="doclickMenu('depadd.jsp','部门添加')">部门添加</a></span>
</li>
<li>
<span><a href="#">部门审核</a></span>
</li>
<li>
<span><a href="#">部门统计</a></span>
</li>
</ul>
</li>
<li>
<span>员工管理</span>
<ul>
<li>
<span><a href="#">员工列表</a></span>
</li>
<li>
<span><a href="#">员工添加</a></span>
</li>
<li>
<span><a href="#">今日打卡</a></span>
</li>
<li>
<span><a href="#">个人统计</a></span>
</li>
</ul>
</li>
<li>
<span>邮箱管理</span>
<ul>
<li>
<span><a href="#">邮件列表</a></span>
</li>
<li>
<span><a href="#">编写邮件</a></span>
</li>
<li>
<span><a href="#">接收邮件</a></span>
</li>
<li>
<span><a href="#">垃圾箱</a></span>
</li>
</ul>
</li>
<li>
<span>请假管理</span>
<ul>
<li>
<span><a href="#">请假列表</a></span>
</li>
<li>
<span><a href="#">请假申请</a></span>
</li>
<li>
<span><a href="#">请假审核</a></span>
</li>
<li>
<span><a href="#">请假统计</a></span>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
6.选项卡如下图：
代码如下：
/********点击west区域的菜单栏，在center区域添加新标签******/
function doclickMenu(surl, title) {
//判断选项卡是否选中
if($('#tt1').tabs('exists',title)) {
$('#tt1').tabs('select',title);//选中title这个选项卡
} else { $('#tt1').tabs('add',{
title:title,
content:'<iframe id="myfrm" src="'+surl+'" frameborder="0" height="100%" width="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>', });
}
} <li>
----------------------------------------------------------------------------------
<span><a href="#" onclick="doclickMenu('deplist.jsp','部门列表')">部门列表 </a></span>
</li> ---------------------------------------------------------------------------------
<div id="tt1" class="easyui-tabs" fit='true' style="width:500px;height:250px;"> </div>
7.datagrid（数据表格树）
如下图：
代码：
<link rel="stylesheet" href="easyui/themes/default/easyui.css"
type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="easyui/jquery-1.9.1.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function() { var data = [
{'sid':'1','uname':'张飞','sex':'男','address':'西安','birthday':'1990-01-01'},
{'sid':'2','uname':'关羽','sex':'男','address':'西安','birthday':'1990-01-01'},
{'sid':'3','uname':'魏延','sex':'男','address':'西安','birthday':'1990-01-01'},
{'sid':'4','uname':'赵云','sex':'男','address':'西安','birthday':'1990-01-01'},
{'sid':'5','uname':'黄忠','sex':'男','address':'西安','birthday':'1990-01-01'}
]; $("#tt").datagrid({
data:data, //设置json格式数据
width:'fit', //设置面板宽度为父容器的宽度
singleSelect:true, //这允许选中一行
pagination:true,//如果为true，则在DataGrid控件底部显示分页工具栏
pageList:[5,10,15,20],//在设置分页属性的时候 初始化页面大小选择列表
pageSize:5,//在设置分页属性的时候初始化页面大小
loadMsg:'正在加载数据...',
columns:[[
{field:'sid',title:'编号',width:100,checkbox:true},
{field:'uname',title:'姓名',width:100},
{field:'sex',title:'性别',width:100,align:'right'},
{field:'address',title:'地址',width:100,align:'right'},
{field:'birthday',title:'生日',width:100,align:'right'},
{field:'option',title:'操作',width:100,align:'right',
formatter:function(value,row,index){
return '<input type="button" name="button" id="button" value="删除" onclick="doDel('+ row.sid +')"/><input type="button" name="button" id="button" value="更新" />';
}} ]]
}); });
//删除
function doDel(sid) {
alert(sid);
}
</script>
</head> <body>
部门列表
<table id="tt"> </table> </body>
说明：formatter是datagrid的列属性，用法：
$('#dg').datagrid({
columns:[[
{field:'userId',title:'User', width:80,
formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}
}
]]
});
JQueryEasyUI学习简单Demo的更多相关文章
- PHP多进程学习(一)__来初步了解一下PHP多进程及简单demo
php是一门单进程弱类型的语言,PHP处理多并发主要是依赖服务器或PHP-FPM的多进程及它们进程的复用,多进程的作用优点大家可以去网上了解,PHP实现多进程在实际项目中意义也是不容小觑的.比如:日常 ...
- 初试JqueryEasyUI（附Demo）
写在前面 准备 布局Layout 菜单树Tree 内容页Tabs 右键菜单Menu 表单Form 对话框Dialog 示例Demo下载 关于easyui不多说,对于我们这样没有美术功底的程序员来说,简 ...
- angular实现了一个简单demo，angular-weibo-favorites
前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...
- Android学习小Demo（19）利用Loader来实时接收短信
之前写过一篇文章<Android学习小Demo(13)Android中关于ContentObserver的使用>,在里面利用ContentOberver去监測短信URI内容的变化.我们先来 ...
- Android JNI学习(五)——Demo演示
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
- Django实战(一)之简单Demo
菜鸟教程上Django安装可供参考: 参考链接: http://www.runoob.com/django/django-install.html 菜鸟教程上如果不行的话,下面博客网址可以供参考 Li ...
- 设计模式之单例模式的简单demo
/* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...
- Spring的简单demo
---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...
- 使用Spring缓存的简单Demo
使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...
随机推荐
- python 读取Excel（二）之xlwt
今天由于在接口测试报告中感觉自己写的接口测试报告特别low,Excel的连个颜色都不加,就想着怎么去想办法给整整,自己根据API一次次调试,感觉很慢,于是乎,百度,可惜没有找到,去官网,官网给的也特别 ...
- 一篇文章介绍GItHub的基础使用
最近复习了一下Git的使用,简单总结了一些.以供以后查阅和同行参考. 一,安装 首先是Linux下: 打开shell ,输入 sudo apt-get install git-core 之后回车输入密 ...
- [附录]Discuz X2.5程序模块source功能处理目录注释
/source/admincp后台管理 /source/admincp/cloud云平台项目 /source/admincp/menu后台扩展菜单目录 /source/admincp/moderate ...
- oracle表的简单操作
版权声明:本文为博主原创文章,转载时请注明原文链接. 1.创建表 ) ) not null,primary key(num)); 创建了一个两个字段的表,num和name,都设置为非空,num设为主键 ...
- linux中常用的命令
1.向某个ip发送文件 scp name.tar root(身份)@ip:/lujing 2.重启系统 init 6 3.如果修改了ifcfg-eth0类似于网卡配置文件,修改网口,ip等设置: 需要 ...
- 深入理解 JavaScript 事件循环（二）— task and microtask
引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...
- EF架构~codeFirst从初始化到数据库迁移
一些介绍 CodeFirst是EntityFrameworks的一种开发模式,即代码优先,它以业务代码为主,通过代码来生成数据库,并且加上migration的强大数据表比对功能来生成数据库版本,让程序 ...
- Linux 开机引导流程
Linux 开机启动流程 BIOS(Basic Input Output System)是 PC 机启动时加载的第一个软件.其实,它是一组固化到计算机主板上一个芯片上的程序,它保存着计算机最重要的输入 ...
- php第三方类库定时任务
<?php /** * Created by PhpStorm. * User: hanks * Date: 5/27/2017 * Time: 3:11 PM */ //2 .常驻内存的各种P ...
- 使用c#解析json库
写了个c#版的json解析库,提供了json到hashtable以及hashtable到json字符串的转换 受惠于c#的语法特性,hashtable到json的解析变得非常简单 先判断传入的obje ...