jQuery EasyUI基础教程之EasyUI常用组件(推荐)

本文主要内容是介绍EasyUI的一些常用组件的使用，都是一些非常基础的知识，适合入门者学习，主要包括Base（基础）、Layout(布局）、菜单和按钮、表单、窗口、表格和树等的使用。要求完全掌握这些内容，学会查阅文档，了解开发基本思想。如果想进一步深入学习，可以直接去官网进行学习，查阅文档等http://www.jeasyui.com/。

一、简介

EasyUI是一种第三方组织开发的，开源的，功能强大的，基于jquery的插件库。 主要可以用于web的后台前端。jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这里介绍的都是一些基本组件，项目中需要将其装配起来，方可构建完整的web页面，EasyUI只是众多前端WEB组件之一。

作用：快速基于现成的组件创建自己的web页面。组件：指已经有第三方写好的，直接可以使用的功能界面，例如：form,layout,tree等。

二、开发步骤

1、先去官网下载相应的插件：
2、在myeclipse中新建一个web工程

3、在WebRoot目录下创建js和themes目录，导入官方文件

4、新建一个helloword.html的网页，并引入下列文件：

<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" /> 
<link rel="stylesheet" href="themes/icon.css" type="text/css" /> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

文件引入的顺序不要错，那么到目前为止，开发的准备工作就已经完成了。

三、Base组件的使用

3.1 Pagination（分页）

使用$.fn.pagination.defaults重写默认值对象

.分页组件是一个比较常用的组件之一，我们可以有两种使用方式，一种是直接在标签上面添加相应的属性，另一种是通过js进行操作。

静态方式创建如下：

<div 
id="pagination" 
class="easyui-pagination" 
data-options="total:2000,pageSize:10" 
style="background:#efefef;border:1px solid #ccc;" 
> 
</div>

动态方式：

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 
<script> 
$("#pp").pagination({ 
"total":100, //表示总记录数 
"pageSize":10, //每页显示多少条记录 
"pageNumber":2, //当前页号 
"pageList":[10,20], // 
"buttons":[ 
{ 
iconCls:'icon-add', 
handler:function(){alert('add')} 
},'-',{ 
iconCls:'icon-save', 
handler:function(){alert('save') 
} 
}], 
"layout":['list','sep','first','prev','manual','next','last','links'], 
"showPageList":false, 
}); 
$("#pp").pagination({ 
"onSelectPage":function(pageNumber,b){ 
alert(pageNumber); 
alert(b) 
} 
})

我这里是添加了一些事件和方法的，可以依据实际情况进行增加或删除或修改里面的小的部分组件。大大方便了我们的开发。

3.2 ProgressBar（进度条）

使用$.fn.progressbar.defaults重写默认值对象。

使用HTML标签或程序创建进度条组件。从标签创建更加简单，添加'easyui-progressbar'类ID到<div/>标签。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

使用Javascript创建进度条。

<div id="p" style="width:400px;" ></div><br /> 
<input id="startID" type="button" value="开始" style="width:100px;height:30px" /> 
<script> 
$("#p").progressbar({ 
width:1000, 
height:40, 
value:0 
}); 
//获取1-9之间的随机数 
function getNum(){ 
return Math.floor(Math.random()*9)+1; 
} 
/* for(var i=0;i<20;i++){ 
var num=getNum(); 
document.write(num+"<br />"); 
} */ 
var timeID=null; 
function update(){ 
//获取随机值 
var num=getNum(); 
//获取进度条当前值 
var value=$("#p").progressbar("getValue"); 
if(value+num>100){ 
//设置进度条当前值为100，且停止运行 
$("#p").progressbar("setValue",100); 
window.clearInterval(timeID); 
$("#startID").removeAttr("disabled"); 
}else{ 
$("#p").progressbar("setValue",(value+num)) 
} 
} 
$("#startID").click(function(){ 
timeID=window.setInterval("update()",500); 
//按钮失效 
$(this).attr("disabled","disabled"); 
}); 
</script>

四、Layout组件的使用

4.1 layout的使用

布局是最常用的组件了，官方提供的是拥有5个布局方向的：北、南、东、西、中.

基本的使用方式如下：

<div 
id="layoutID" 
class="easyui-layout" 
data-options="fit:true" 
style="width:800px;height:500px"> 
<!-- 上 --> 
<div data-options="region:'north',title:'上',split:true,iconCls:'icon-edit',minHeight:'100',maxHeight:'200'" 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:200px;"></div> 
<!-- 中 --> 
<div data-options="region:'center',title:'center title' " style="padding:5px;background:#eee;"></div> 
</div>

我们可以为其添加js的属性：

<script> 
$(function(){ 
$('#layoutID').layout('collapse','north'); 
//休息3秒 
window.setTimeout(function(){ 
//将南边折叠 
$('#layoutID').layout("collapse","south"); 
//将北边展开 
$('#layoutID').layout('expand','north'); 
//将南边展开 
window.setTimeout(function(){ 
$("#layoutID").layout("expand","south"); 
},3000); 
},3000); 
}); 
</script>

对于布局来说，当然也还是可以进行嵌套处理的，我们可以摘除掉我们不需要的部分，然后将需要的部分进行再次组装。

<div id="layoutID" class="easyui-layout" data-options="fit:true" > 
<div data-options="region:'north',border:false" style="height:100px"></div> 
<div data-options="region:'center'"> 
<div class="easyui-layout" data-options="fit:true" > 
<div data-options="region:'west',border:false" style="width:180px"></div> 
<div data-options="region:'center'"> 
<div class="easyui-layout" data-options="fit:true"> 
<div data-options="region:'north'" style="height:100px"></div> 
<div data-options="region:'south'" ></div> 
</div> 
</div> 
</div> 
</div> 
</div>

效果如下：

4.2 面板的使用

第一种方式：通过标签直接创建。

<div 
id="panel" 
class="easyui-panel" 
title="我的第一个面板" 
data-options="iconCls:'icon-save',collapsible:'true',minimizable:true,maximizable:true" 
style="width:800px;height:300px;padding:15px" 
> 
easyui入门 
</div>

第二种方式：

<div id="p" style="padding:10px;"> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 
<script> 
$('#p').panel({ 
width:500, 
height:150, 
title: 'My Panel', 
tools: [{ 
iconCls:'icon-add', 
handler:function(){alert('new')} 
},{ 
iconCls:'icon-save', 
handler:function(){alert('save')} 
}] 
}); 
<div id="p" style="padding:10px;"> 
<p>panel content.</p> 
<p>panel content.</p> 
</div> 
$('#p').panel({ 
width:500, 
height:150, 
title: 'My Panel', 
tools: [{ 
iconCls:'icon-add', 
handler:funct