EasyUI经常使用组件（基础）
---------------------------------------------------------------------------------------------------------------
[版权申明：本文系做者原创，转载请注明出处]
文章出处：http://blog.csdn.net/sdksdk0/article/details/51914553
做者：朱培 ID：sdksdk0
---------------------------------------------------------------------------------------------------------------javascript
本文主要内容是介绍EasyUI的一些经常使用组件的使用，都是一些很是基础的知识，适合入门者学习，主要包括Base（基础）、Layout(布局）、菜单和按钮、表单、窗口、表格和树等的使用。要求彻底掌握这些内容，学会查阅文档，了解开发基本思想。若是想进一步深刻学习，能够直接去官网进行学习，查阅文档等http://www.jeasyui.com/。css
1、简介
EasyUI是一种第三方组织开发的，开源的，功能强大的，基于jquery的插件库。 主要能够用于web的后台前端。jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上创建程序页面。 这里介绍的都是一些基本组件，项目中须要将其装配起来，方可构建完整的web页面，EasyUI只是众多前端WEB组件之一。html
做用：快速基于现成的组件建立本身的web页面。组件：指已经有第三方写好的，直接可使用的功能界面，例如：form,layout,tree等。前端
2、开发步骤
一、先去官网下载相应的插件：
二、在myeclipse中新建一个web工程java
三、在WebRoot目录下建立js和themes目录，导入官方文件jquery
四、新建一个helloword.html的网页，并引入下列文件：git
<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>
文件引入的顺序不要错，那么到目前为止，开发的准备工做就已经完成了。github
3、Base组件的使用
3.1 Pagination（分页）
使用$.fn.pagination.defaults重写默认值对象web
.分页组件是一个比较经常使用的组件之一，咱们能够有两种使用方式，一种是直接在标签上面添加相应的属性，另外一种是经过js进行操做。ajax
静态方式建立以下：
<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>
4、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:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
</script>
4.3 Accordion（分类）
使用$.fn.accordion.defaults重写默认值对象。
分类空间容许用户使用多面板，但在同一时间只会显示一个。每一个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容能够经过指定的'href'属性使用ajax方式读取面板内容。用户能够定义一个被默认选中的面板，若是未指定，那么第一个面板就是默认的。
<div
id="adID"
class="easyui-accordion"
data-options="fit:false,border:true,multiple:false,selected:-1"
style="width:300px;height:200px;"
>
<div title="北京" data-options="iconCls:'icon-save'"
style="overflow:auto;padding:10px;">
朝阳区
</div>
<div title="湖南" data-options="iconCls:'icon-reload'"
style="padding:10px;">衡阳市
</div>
<div title="北京" data-options="iconCls:'icon-save'"
style="overflow:auto;padding:10px;">
<p>朝阳区</p>
</div>
<div title="湖南" data-options="iconCls:'icon-reload'"
style="padding:10px;">
<p>衡阳市</p>
<p>长沙市</p>
</div>
</div>
<script>
$(function(){
//增长一个面版
$("#adID").accordion("add",{
"title":"广东省",
"iconCls":"icon-add",
"content":"广州",
"selected":false
});
window.setTimeout(function(){
$("#adID").accordion("remove","北京");
$("#adID").accordion("unselect",0);
},3000);
});
</script>
4.4 Tabs（选项卡）
使用$.fn.tabs.defaults重写默认值对象。
选项卡显示一批面板。但在同一个时间只会显示一个面板。每一个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其余自定义按钮。
<div
id="tt"
class="easyui-tabs"
data-options="plain:false,fit:false,border:true,tools:[
{
iconCls:'icon-add',
handler:function(){
alert('添加')
}
},
{
iconCls:'icon-sava',
handler:function(){
alert('保存')
}
}
],toolPosition:'right',tabPosition:'top',selected:2"
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>
5、Menu 和Button组件的使用
LinkButton（按钮）
使用$.fn.linkbutton.defaults重写默认值对象。
按钮组件使用超连接按钮建立。它使用一个普通的<a>标签进行展现。它能够同时显示一个图标和文本,或只有图标或文字。按钮的宽度能够动态和折叠/展开以适应它的文本标签。
<a id="btn_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'sex',toggle:true,iconAlign:'right'">增长部门</a><br />
<a id="btn_find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',group:'sex',toggle:true"">查找部门</a><br />
<a id="btn_update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',group:'sex',toggle:true"">修改部门</a><br />
<a id="btn_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',group:'sex',toggle:true"">删除部门</a><br />
<script>
$("a").click(function(){
//获取单击的按钮的标题
var title=$(this).text();
//去空格
title=$.trim(title);
alert(title);
});
</script>
6、Form组件的使用
6.1 ValidateBox（验证框）
使用$.fn.validatebox.defaults重写默认值对象。
validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。若是用户输入了无效的值，它将会更改输入框的背景颜色，而且显示警告图标和提示信息。该验证框能够结合form(表单)插件并防止表单重复提交。
姓名:<input id="nameID" /><br />
邮箱:<input id="emailID" /><br />
密码:<input id="pwdID" />
<script>
$("#nameID").validatebox({
required:true,
//validType:'length[1,6]'
validType:['length[1,6]','chinese'],
delay:200,
tipPosition:'left'
});
//自定义规则，验证是否为汉字
$.extend($.fn.validatebox.defaults.rules,{
chinese:{
//validator表示用户在文本框中输入的内容
validator:function(value){
var reg=/^[\u4e00-\u9fa5]/;
if(reg.test(value)){
return true;
}
},
//若是不符合中文规则，
message:'姓名必须是中文'
}
});
$("#emailID").validatebox({
required:true,
validType: ['length[1,30]','email']
});
$("#pwdID").validatebox({
required:true,
validType: ['length[6,6]','pwdnum']
});
//自定义规则，验证是否为密码
$.extend($.fn.validatebox.defaults.rules,{
pwdnum:{
//validator表示用户在文本框中输入的内容
validator:function(value){
var reg=/^[0-9]/;
if(reg.test(value)){
return true;
}
},
//若是不符合中文规则，
message:'密码必须为数字'
}
});
</script> 对于表单验证，咱们能够对其进行自定义规则。这个时候若是加上正则验证，就彻底能够写出一个很是好的验证功能的了。在上面的这个属性中，还能够对提示框的位置进行改变，可使用的属性是left和right。下面图片中显示的就是一个提示框在left的状况，通常状况下使用默认的right就能够了。
6.2 ComboBox（下拉列表框）
扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。
下拉列表框显示一个可编辑文本框和下拉式列表，用户能够选择一个值或多个值。用户能够直接输入文本到列表顶部或选择一个或多个当前列表中的值。
静态方法建立：
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select>
动态方法建立：
<input id="cityID" name="city" value="1"/>
<script>
$("#cityID").combobox({
url:"json/city.json",
valueField:"id",
textField:"name"
});
$(function(){
$("#cityID").comcobox("setValue","长沙");
});
</script>
6.3 DateBox（日期输入框）
扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。
日期输入框结合了一个可编辑的文本框控件和容许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期而后填充到文本框中。选定的日期也能够被格式化为预约格式。
日期：
<input id="dd" type="text"></input>
<script>
$('#dd').datebox({
required:true
});
$("#dd").datebox({
onSelect:function(mydate){
var year=mydate.getFullYear();
var month=mydate.getMonth()+1;
var date=mydate.getDate();
alert(year+"年"+month+"月"+date+"日");
}
});
</script>
6.4 Slider（滑动条）
使用$.fn.slider.defaults重写默认值对象。
滑动条容许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户能够经过设置其属性自定义滑块。
学生成绩:<span id="tip" ></span>
<hr />
<div id="ss" style="height:400px;width:400px">
</div>
<script>
$("#ss").slider({
mode:"h",
min:0,
max:100,
rule:[0,'|',25,'|',50,'|',75,'|',100],
showTip:true,
value:60
});
$("#ss").slider({
onChange:function(newValue){
if(newValue==60){
$("#tip").text("合格").css("color","yellow");
}else if(newValue==70){
$("#tip").text("中等").css("color","pink");
}else if(newValue==80){
$("#tip").text("良好").css("color","blue");
}else if(newValue==90){
$("#tip").text("优秀").css("color","green");
}
}
})
</script>
6.5 NumberSpinner（数字微调）
数字微调控件的建立是基于微调控件和数值输入框控件的。他能够转换输入的值，好比：数值、百分比、货币等。它也容许使用上/下微调按钮调整到用户的指望值。
商品数量：
<input id="ss" style="width:100px"> <br />
你一共买了<span id="num">1</span>件商品
<script>
$('#ss').numberspinner({
value:1,
min:1,
max:100
});
$('#ss').numberspinner({
onSpinUp:function(){
var value=$("#ss").numberspinner("getValue");
//将当前值设置到span标签
$("#num").text(value).css("color","red");
},
onSpinDown:function(){
var value=$("#ss").numberspinner("getValue");
//将当前值设置到span标签
$("#num").text(value).css("color","red");
}
});
//添加键盘事件
$('#ss').keyup(function(event){
//获取按键的unicode编码
var myevent=event;
var code=myevent.keyCode;
if(code==13){
var value=$(this).val();
//将当前值设置到span标签
$("#num").text(value).css("color","red");
}
});
</script>
7、窗口组件的使用
7.1 Window（窗口）
扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。
窗口控件是一个浮动和可拖拽的面板能够用做应用程序窗口。默认状况下,窗口能够移动,调整大小和关闭。它的内容也能够被定义为静态html或要么经过ajax动态加载。
静态方法建立：
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
动态建立：
<input type="button" value="打开窗口1" id="open1"/>
<input type="button" value="打开窗口2" id="open2"/>
<div id="win1"></div>
<div id="win2"></div>
<script>
$("#open1").click(function(){
$('#win1').window({
width:600,
height:400,
modal:false ,
minimizable :false,
maximizable:false,
title:"个人窗口"
});
});
$("#open2").click(function(){
$('#win2').window({
width:600,
height:400,
modal:false ,
minimizable :false,
maximizable:false,
title:"个人窗口"
});
});
</script>
7.2 Dialog（对话框窗口）
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户能够配置对话框的行为显示其余工具,如collapsible,minimizable,maximizable工具等。
<input type="button" value="打开对话框" id="open1"/>
<div id="win1"></div>
<script>
$("#open1").click(function(){
$('#win1').dialog({
width:400,
height:400,
modal:false ,
minimizable :false,
maximizable:false,
title:"个人对话框",
toolbar:[
{
text:'编辑',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'帮助',
iconCls:'icon-help',
handler:function(){alert('help')}
}
],
buttons:[
{
text:'保存',
handler:function(){alert("保存");}
},{
text:'关闭',
handler:function(){
//关闭对话框
$("#win1").dialog("close");
}
}
],
href:"/EasyUi/form.html"
});
});
</script>
7.3 Messager（消息窗口）
消息窗口提供了不一样的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。全部的消息框都是异步的。用户能够在交互消息以后使用回调函数去处理结果或作一些本身须要处理的事情。
<input type="button" value="确认框" /><br />
<input type="button" value="警告框" /><br />
<input type="button" value="输入框" /><br />
<input type="button" value="显示框" /><br />
<script>
$("input").click(function(){
//定位button按钮，提供单击事件
var tip=$(this).val();
tip=$.trim(tip);
if("警告框"==tip){
$.messager.alert("警告框","警告处分","waring",function(){
//alert("关闭");
});
}
if("确认框"==tip){
$.messager.confirm("确认框","你确认要删除么",function(value){
alert(value);
});
}
if("输入框"==tip){
$.messager.prompt("输入框","请输入你的姓名",function(name){
alert(name);
});
}
if("显示框"==tip){
$.messager.show({
showType: "slide",
showSpeed: 600,
width:300,
height:300,
title:"显示框",
timeout:5000,
msg:'消息将在5秒后关闭。'
}
);
}
});
</script>
8、表格和树组件的使用
使用$.fn.tree.defaults重写默认值对象。
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
<ul id="treeID" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一节</span>
<ul>
<li>
<span>第一条</span>
</li>
<li>
<span>第二条</span>
</li>
</ul>
</li>
<li>
<span>第二节</span>
</li>
</ul>
</li>
<li>
<span>第二章</span>
</li>
</ul>
<script type="text/javascript">
$(function(){
//收起全部的选项
$("#treeID").tree("collapseAll");
});
</script>
咱们还能够引入外部文件，使用json格式的文件来添加到这个tree中。
<ul id="treeID"></ul>
<script type="text/javascript">
$("#treeID").tree({
url : "/EasyUi/json/pro.json"
});
</script>
json格式为：
[
{
"id":1,
"text":"广东",
"state":"closed",
"children":[
{
"id":11,
"text":"广州" ,
"state":"closed",
"children":[
{
"id":111,
"text":"天河"
},
{
"id":112,
"text":"越秀"
}
]
},
{
"id":12,
"text":"深圳"
}
]
},
{
"id":2,
"text":"湖南"
}
]
总结：任何一门技术的学习，仍是要有学会查阅文档的基本能力，要学会触类旁通，我前面分享的内容也都是很是简单的一些例子，有的是从官方文档中进行改装，加入了个人一些东西，虽说着些东西都是很是简单的内容，可是咱们仍是须要提升警戒，知识面仍是要到位的。我深深的知道，比我牛的人不少，比我菜的人也不少，在这个行业中，惟有保持不断学习的态度，不断的吸取知识，才能让本身成长，不要老是去鄙视别人，有些看上去简单的东西实际操做起来仍是有一些困难的，人无完人，但愿和你们一块儿成长，共同进步！
相关文章
- 1. Linux经常使用的基础组件
- 2. easyui---基础组件：panel
- 3. easyui---基础组件：window
- 4. EasyUI组件使用
- 5. easyUI 经常使用操做
- 6. JavaScript：经常使用基础
- 7. 经常使用基础类
- 8. mysql 经常使用基础
- 9. 1.1.5Angular2经常使用组件
- 10. react 经常使用组件
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • Composer 安装与使用
- • 常用的分布式事务解决方案
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Linux经常使用的基础组件
- 2. easyui---基础组件：panel
- 3. easyui---基础组件：window
- 4. EasyUI组件使用
- 5. easyUI 经常使用操做
- 6. JavaScript：经常使用基础
- 7. 经常使用基础类
- 8. mysql 经常使用基础
- 9. 1.1.5Angular2经常使用组件
- 10. react 经常使用组件