本文介绍了EasyUI，一个基于jQuery的UI框架，用于快速开发功能丰富的前端界面。文章涵盖EasyUI的核心优势，如丰富的控件库、简单易用和跨浏览器支持。重点讲解了布局控件、数据网格(DataGrid)及其主要方法，以及表单控件，包括验证框、输入框、数值输入框和日期输入框等。
一、概述
1.1 EasyUI是什么？
EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。
EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不要对CSS样式有深入的了解，开发者只需要了解一些简单的Html标签（table标签、form标签、div标签等）即可。
EasyUI开发前端页面的好处：
丰富的jQuery插件库
使用简单，可以快速开发出原型界面
支持html5，实现跨浏览器等等
二 常见控件
详情可以参考easyUI的官方文档 这里只是总结一些个人用的比较多的控件
布局控件
布局（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）的设计目的是减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。
创建表格的三种方式：
从现有表格元素基础上创建DataGrid
通过table标签创建DataGrid
通过js脚本创建DataGrid
这里只样式JS的方法
<table id="dg"></table>
-----------------------------------
$('#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 + "元";
}}
]]
});
});
DataGrid的主要方法
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);
}
}
表单控件
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>
验证框
<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" />
输入框
TextBox(文本框)是一个增强的输入字段组件， 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件，如：combo，databox、spinner等。
<input class="easyui-textbox" data-options="iconCls:'icon-search',required: true" style="width:300px">
数值输入框
<input class="easyui-numberbox" data-options="iconCls:'icon-search',required: true,min:0,precision:2" style="width:300px">
日期输入框
<input id="dd" type="text" class="easyui-datebox" required="required"></input>
自己写的一些demo
<script type="text/javascript">
var url;
var st = new Array();
st.push("普通用户");
st.push("管理员");
st.push("系统管理员");
var sex = new Array();
sex.push("男");
sex.push("女");
//模糊搜索
function search() {
var account=$("#account").textbox('getValue');
var Mname=$("#Mname").textbox('getValue');
$("#dd").datagrid('load',{
'mname': Mname,
'account':account
})
}
//管理员内容展示
$(function () {
$("#dd").datagrid({
url:"/manager/findManager",
method: 'post',
fitColums: true,
columns:[[
{'field': 'mid','title':'编号 ' ,width: 50},
{'field': 'account','title':'账号 ',width: 200},
{'field': 'password','title':'密码 ',width: 200},
{'field': 'mname','title':'姓名 ',width: 180},
{'field': 'type','title':'职责 ',width: '60px',formatter: function(value) {
return st[value] ;
}},
{'field': 'sex','title':'性别 ',width: '50px',formatter: function(value) {
return sex[value] ;}},
{'field': 'email','title':'邮箱 ',width: '200px'},
{'field': 'birthday','title':'生日 ',width: '200px'}
]],
pagination:true,
pageSize:10,
pageList: [10,20,50,100],
singleSelect:true,
toolbar:
[{
iconCls: 'icon-add',
text:'添加',
handler: function(){
$("#duihua").dialog("open");
url="/manager/addManager";
}
},'-',{
iconCls: 'icon-edit',
text:'修改',
handler: function(){var rowDate=$("#dd").datagrid("getSelected");if(rowDate==null){
$.messager.alert("提示","请选择要需要改的记录");
return; }
url="/manager/updateManager"; //获取数据
var mid=rowDate.mid;
var account=rowDate.account;
var password=rowDate.password;
var mname=rowDate.mname;
//var type=st[rowDate.type];
//var sex1=sex[rowDate.sex];
var email=rowDate.email;
var birthday=rowDate.birthday;
//填充数据到对话框
$("#mid").val(mid);
$("#Eaaccount").textbox('setValue',account);
$("#Epassword").textbox('setValue',password);
$("#Ename").textbox('setValue',mname);
//$("#type").textbox('setValue',type);
//$("#sex").textbox('setValue',sex1);
$("#email").textbox('setValue',email);
$("#birthday").textbox('setValue',birthday);
$("#duihua").dialog("open");
}
},'-',{
iconCls: 'icon-remove',
text:'删除 ',
handler: function(){var rowDate=$("#dd").datagrid("getSelected");if(rowDate==null){
$.messager.alert("提示","请选择要需要改的记录");
return; }
$.messager.confirm('警告', '确认删除吗？', function(b) {
if (b) {
var mid=rowDate.mid;
$.post("/manager/removeManager", "mid=" + mid, function(rt) {
if (rt.status == "success") {
// 刷新表格
$("#dd").datagrid("reload");
}
$.messager.alert('提示', rt.msg);
}, "json");
}
});
}
}]
})
});
//对话框
$("#duihua").dialog({
title:'管理员信息',
closed:true,
width:500,
height:400,
modal:true, //对话框遮挡背景
buttons: [{
'text': '保存', // 按钮文本
handler: function() { // 按钮事件
//判断表单是否正确输入
var b=$("#addManager").form("validate");
if(b){
//验证表单
var date=$("#addManager").serialize();
$.post(url,date,function(rs){
if(rs.status=="success"){
//刷新表格
$("#dd").datagrid("load");
//关闭对话框
$("#duihua").dialog('close');
//清空表单
$("#addManager").form("clear");
}else{
$.messager.alert('提示',rs.msg);
}
},"json");
}
}
},{
text:'取消',
handler : function(){
$("#duihua").dialog('close');
}
}
]
});
</script>
扫一扫
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
