本文主要内容是介绍EasyUI的一些常用组件的使用，都是一些非常基础的知识，适合入门者学习，主要包括Base（基础）、Layout(布局）、菜单和按钮、表单、窗口、表格和树等的使用。要求完全掌握这些内容，学会查阅文档，了解开发基本思想。如果想进一步深入学习，可以直接去官网进行学习，查阅文档等。
一、简介
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 href="https://www.jb51.net/themes/default/easyui.css" type="text/css" /> <link href="https://www.jb51.net/themes/icon.css" type="text/css" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/easyui-lang-zh_CN.js"></script>
文件引入的顺序不要错，那么到目前为止，开发的准备工作就已经完成了。
三、Base组件的使用
3.1 Pagination（分页）
使用$.fn.pagination.defaults重写默认值对象
.分页组件是一个比较常用的组件之一，我们可以有两种使用方式，一种是直接在标签上面添加相应的属性，另一种是通过js进行操作。
静态方式创建如下：
<div data-options="total:2000,pageSize:10" > </div>
动态方式：
<div></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 data-options="value:60"></div>
使用Javascript创建进度条。
<div ></div><br /> <input type="button" value="开始" /> <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 data-options="fit:true"> <!-- 上 --> <div data-options="region:'north',title:'上',split:true,iconCls:'icon-edit',minHeight:'100',maxHeight:'200'"></div> <!-- 下 --> <div data-options="region:'south',title:'South Title',split:true"></div> <!-- 右 --> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"></div> <!-- 左 --> <div data-options="region:'west',title:'West',split:true"></div> <!-- 中 --> <div data-options="region:'center',title:'center title' "></div> </div>
我们可以为其添加js的属性：