EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库,封装了许多实用的控件和功能,并且是完美支持HTML5网页的框架。提供的控件包括数据表格,树形表格,菜单,进度条,选项卡,日期组合框,调节器,对话框等等。
EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript,也不要对CSS样式有深入的了解,开发者只需要了解一些简单的Html标签(table标签、form标签、div标签等)即可。
EasyUI开发前端页面的好处:
下载地址:http://www.jeasyui.net
下载完成后直接解压缩,其目录结构如下图所示:
在页面中引入下面文件:
<link rel="stylesheet" href="css/themes/bootstrap/easyui.css" />
<link rel="stylesheet" href="css/themes/icon.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/locale/easyui-lang-zh_CN.js" >script>
<script type="text/javascript">
$(function(){
$.messager.alert("提示信息","这是我的第一个EasyUI程序","info");
});
</script>
messager提供了不同类型的消息框。例如:confirm、alert、p’rompt等等。所有消息框都是异步的,用户可以使用messager回调函数进行交互。
(1)消息提示框
<script type="text/javascript">
$(function(){
$.messager.show({
title:'消息提示',
msg:'添加数据成功',
showType:'slide',
timeout:2000
});
});
</script>
$.messager.alert('消息', '这里是消息文本的地方');
$.messager.confirm('系统提示','确定要删除这条记录吗?',function(r){
if(r){
$.messager.alert('系统提示','确定删除','info');
}
});
对话框是一个特殊类型的窗口。它在顶部有一个工具栏,在底部有一个按钮栏。默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具(比如:可折叠 collapsible、可最小化 minimizable、可最大化 maximizable,等等)。
方式一: 通过DOM节点标签创建;
方式二:通过javascript脚本创建;
(1)DOM节点创建对话框
<div id="d1" class="easyui-dialog" title="DOM节点创建的方式" style="width: 400px;height: 200px;" data-options = "iconCls:'icon-save',resizable:true,modal:true">
DOM节点创建的方式
</div>
(2)js脚本创建对话框
//在body标签追加一个id=”dd”的div标签
$('body').append('');
$('#dd').dialog({
title:'My Dialog',
width:400,
height:200,
closed:false,
cache:false,
modal:true,
href:'index.html',
buttons:[{
text:'保存',
handler:function(){$.messager.alert('系统提示','这里是点击保存触发的事件');}
},{
text:'取消',handler:function(){$('#dd').dialog('destroy'); }
}]
});
注意:href属性只是引入被引用
标签之间的内容。所以被引入页面的css、js是继承使用父页面的。另外一个值得大家注意的地方是,父页面和子页面标签的id不能出现重复,否则会被替换。布局(layout)是有五个区域(北区 north、南区 south、东区 east、西区 west 和中区 center)的容器。中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板。
例如:
<div id="cc" class="easyui-layout" data-options="fit:true">
<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>
属性说明:
数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。
创建表格的三种方式:
<table class="easyui-datagrid" data-options="fit:true">
<thead>
<tr>
<th data-options="field:'code'">编码</th>
<th data-options="field:'name'">名称</th>
<th data-options="field:'price'">价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>
<table class="easyui-datagrid"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true,fit:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
datagrid_data.json文件的内容是一个json数组格式的数据。
[{
'code':1,
'name:'电冰箱',
‘price’:1999
}, {
'code':2,
'name:'洗衣机',
‘price’:1599
}, {
'code':3,
'name:'空调',
‘price’:2999
}]
首先定义一个table标签。
<table id="dg">table>
然后通过js脚本初始化表格。
<script>
$(function(){
$('#dg').datagrid({
url:'datagrid_data.json',
method:'get',
fit:true,
columns:[[
{field:'code',title:'编号',width:100},
{field:'name',title:'名称',width:100},
{field:'price',title:'价格',width:100,align:'right',formatter:function(value,row,index) {
return value + "元";
}}
]]
});
});
</script>
表格属性:
数据列属性:
load:载入并显示第一页记录,通常用于执行条件查询功能;
$('#table').datagrid('load', {'参数名':'参数值', ...});
reload:重载表格数据,与load方法的功能相同。但是重载的是当前页面,而不是第一页;
$('#table').datagrid('reload');
getSelected:返回被选择的记录。例如:
{
text:'修改',
iconCls:'icon-edit',
handler:function(){
var row = $('#dg').datagrid('getSelected');
$.messager.alert('你选择的值是:', row.code);
}
}
树形菜单用于web页面以一个树形结构显示分层数据,它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
<ul id="tt" class="easyui-tree">
<li>
<span>Folderspan>
<ul>
<li><span>Sub Folder 1span>
<ul><li> <span><a href="#">File 11a>span>li>ul>
li>
ul>
li>
<li>
<span>File21span>
li>
ul>
$(function(){
$('#tt').tree({
url:'tree_data.json'
});
});
<ul id="tt"></ul>
tree_data.json文件内容的数据格式:
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
属性说明:
form控件提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候,还可以调用validate方法检查表单是否合法。
<form id="ff" method="post">
<div>
<label for="name">Name:label>
<input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
div>
<div>
<label for="email">Email:label>
<input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
div>
form>
validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。
方式一:通过DOM标签创建验证框
<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />
方式二:通过js脚本创建验证框
<input id="email" />
$('#email').validatebox({
required: true,
validType: 'email'
});
<body>
<script type="text/javascript">
$(function(){
$('#email').validatebox({
required: true,
validType: 'URL'
});
});
script>
邮箱地址:<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /><br/>
body>
TextBox(文本框)是一个增强的输入字段组件, 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,如:combo,databox、spinner等。
方式一:通过标签创建输入框
<input class="easyui-textbox" data-options="iconCls:'icon-search',required: true" style="width:300px">
方式二:通过js脚本创建输入框
<input id="tt" />
$('#tt').textbox({
required: true,
iconCls:'icon-man',
iconAlign:'left'
});
<body>
<script type="text/javascript">
$(function(){
$('#tt1').textbox({
required: true, //必填
validType:'email',//验证邮箱
buttonText:'搜索',//追加按钮
iconCls:'icon-man', //追加图标
iconAlign:'left' //图标位置(left、right)
});
});
script>
<form id="ff" method="post">
<div><label for="name">用户名:label><input id="tt1"/>div>
<div><label for="password">密码:label><input id="tt2" class="easyui-textbox" data-options="required:true" />div>
form>
body>
数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型,比如:数字、百分比、货币等。
方式一:通过标签创建;
<input class="easyui-numberbox" data-options="iconCls:'icon-search',required: true,min:0,precision:2" style="width:300px">
方式二:通过js脚本创建;
// 验证必填、最小值为0、有两位小数
$('#tt').numberbox({
required: true,
min:0,
precision:2,
iconAlign:'left'
});
<body>
<script type="text/javascript">
$(function(){
$('#tt1').numberbox({
required: true, //必填
min:0,//最小值
precision:2 //保留两位小数
});
});
script>
<form id="ff" method="post">
<div><label for="name">人数有:label><input id="tt1" style="width:300px"/>div>
<div><label for="password">平均分:label><input class="easyui-numberbox" data-options="iconCls:'icon-search',required: true,min:0,precision:2" style="width:300px"> div>
form>
body>
日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。
方式一:通过标签创建;
<input id="dd" type="text" class="easyui-datebox" required="required">input>
方式二:通过js脚本创建;
<input id="tt" />
$('#tt').datebox({
required: true
});
<body>
<script type="text/javascript">
$(function(){
$('#tt1').datebox({
required: true //必填
});
});
script>
<form id="ff" method="post">
<div><label for="name">出生日期:label>
<input id="tt1" style="width:300px"/>div>
<div><label for="password">入学时间:label>
<input class="easyui-datebox" data-options="iconCls:'icon-search',required: true" style="width:300px"> div>
form>
body>
下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
方式一:通过标签创建;
<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.json'" />
get_data.json文件内容的格式:
[{
"id":1,
"text":"Java",
"desc":"Write once, run anywhere"
},{
"id":2,
"text":"C#",
"desc":"One of the programming languages designed for the Common Language Infrastructure"
},{
"id":3,
"text":"Ruby",
"selected":true,
"desc":"A dynamic, reflective, general-purpose object-oriented programming language"
},{
"id":4,
"text":"Perl",
"desc":"A high-level, general-purpose, interpreted, dynamic programming language"
},{
"id":5,
"text":"Basic",
"desc":"A family of general-purpose, high-level programming languages"
}]
方式二:通过js脚本创建;
<input id="cc" name="dept">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
方式三:通过select元素创建一个预定义结构的下拉框;
<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>
方式四:创建2个有依赖关系的下拉框;
<input id="cc1" class="easyui-combobox" data-options="
valueField: 'id',
textField: 'text',
url: 'getData',
onSelect: function(rec){
var url = 'getData?id='+rec.id;
$('#cc2').combobox('reload', url);
}"/>
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />