文章目录
1easyui常用组件
1.1 Tabs选项卡面板页签
1.2 Messager（消息窗口）
//消息对话框,本质就是一个window(dialog),只是我们使用他的时候不需要手动创建.
setTimeout(function(){
/**
showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
showSpeed：定义窗口显示的过度时间。默认：600毫秒。
width：定义消息窗口的宽度。默认：250px。
height：定义消息窗口的高度。默认：100px。
title：在头部面板显示的标题文本。
msg：显示的消息文本。
style：定义消息窗体的自定义样式。
timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的数，消息窗体将在超时后自动关闭。默认：4秒。
**/
$.messager.show({
title:'温馨提示',
width:350,
showSpeed:5000,
msg:'你在不好好学习,就只有天天咋家撸(LOL)',
showType:'slide', //show=从右下角往左上角 slide=滑动 fade=淡入
timeout:0
});
},3000);
//进度条
$(function(){
$.messager.progress({
title:'Please waiting',
msg:'Loading data...'
});
//延迟5秒后,关闭进度条.
setTimeout(function(){
$.messager.progress('close');
},5000);
});
//对话框
$(function(){
/*
显示警告窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
icon：显示的图标图像。可用值有：error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数。
*/
$.messager.alert("友情提示","别说话,直接来","error");
});
//确认框
$(function(){
/*
$.messager.confirm
title：在头部面板显示的标题文本。
msg：显示的消息文本。
fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。
*/
$.messager.confirm("提示","你确定删除吗?",function(b){
if(b){
console.debug("删除操作....");
}
});
});
1.3 form组件
1.4 DataGrid面板
1.5 layout布局组件
验证组件 : easyui-validatebox
下拉列表：easyui-combobox
2 easyui综合练习(CRUD)
2.1 页面布局
引入easyui文件
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
//树型菜单
$("#treeMenu").tree({
url:'json/menuTree.json',
method:'get',
onClick:function(node){
//解决父级不应该添加选项卡
if(node.url){
//先判断选项卡里面是否存在当前的菜单，如果存在，不应该添加
if(!$("#tabsId").tabs('exists',node.text)){
//点击菜单的时候，添加选项卡
$('#tabsId').tabs('add',{
title: node.text,
closable:true,
content:"<iframe frameborder=0 style='width:100%;height:100%' src='"+node.url+"'></iframe>"
});
}else{
//选择当前这个页签
$('#tabsId').tabs('select',node.text);
}
}
}
});
<body class="easyui-layout">
<div class="northCls" data-options="region:'north',split:true">
<div style="font-size:30px;margin-top: 20px;float:left">
智能销售管理系统
</div>
<div style="font-size:15px;float:right;margin-top:60px ;">
欢迎<span style="color:red;">XXX</span>进入
<a href="#">注销</a>
</div>
</div>
<div data-options="region:'south',split:true" style="height:100px;">
版权信息等内容
</div>
<div id="treeMenu" data-options="region:'west',title:'菜单信息',split:true" style="width:230px;">
主要存放菜单信息(树菜单)
</div>
<div id="tabsId" class="easyui-tabs" data-options="region:'center'" style="background:#eee;">
</div>
</body>
2.2 easyui加载树菜单和加载页签
//树型菜单
$("#treeMenu").tree({
url:'json/menuTree.json',
method:'get',
onClick:function(node){
//解决父级不应该添加选项卡
if(node.url){
//先判断选项卡里面是否存在当前的菜单，如果存在，不应该添加
if(!$("#tabsId").tabs('exists',node.text)){
//点击菜单的时候，添加选项卡
$('#tabsId').tabs('add',{
title: node.text,
closable:true,
content:"<iframe frameborder=0 style='width:100%;height:100%' src='"+node.url+"'></iframe>"
});
}else{
//选择当前这个页签
$('#tabsId').tabs('select',node.text);
}
}
}
});
2.3 绑定按钮点击事件
//统一给a标签绑定事件
$("a").on('click',function(){
//获取到 a标签里面配置 data-method=‘add/edit/search’
var methodName = $(this).data('method');
if(methodName){
itsource[methodName]();
}
});
var itsource = {
add:function(){
alert('add');
},
edit:function(){
alert('edit');
},
remove:function(){
alert('remove');
},
search:function(){
//思路 获取input里面的数据
//var username = $("#username").val();
//console.log(username);
var params = $("#searchForm").serializeObject();
//搜索 发送请求 (表格路径url-springmvc)把参数
$("#employee-grid").datagrid('load',params);
}
}
2.4 搜索
/**
* 搜索：(1)获取搜索表单添加内容值
(2)调用load方法加载表格，就发送请求查询数据返回json，加载到表格里面去
*/
search:function(){
//思路 获取input里面的数据
//var username = $("#username").val();
//console.log(username); jquery 的扩展的jquery.jdirk.js
var params = $("#searchForm").serializeObject();
//搜索 发送请求 (表格路径url-springmvc)把参数
$("#employee-grid").datagrid('load',params);
}
2.5 删除功能
删除思路：
- 在删除之前 先判断是否选中一行 如果没有选中，就提示先选中一行
如果选中了 提示用户是否真的删除 - 确认删除 通过ajax发送数据到后台 确认删除
- 删除完数据之后 重新加载表格数据
remove: function() {
//删除方法 获取表格里面是否选中行
var row = $("#employee-grid").datagrid('getSelected');
//判断如果没有选中一行
if(!row) {
$.messager.alert("温馨提示", "亲，你要先选中一行才能删除额！", "info");
return;
}
$.messager.confirm("温馨提示", "亲，你舍得删除我吗？", function(r) {
//如果点击确定 为真
if(r) {
//删除数据 发送ajax请求 删除数据
$.get("json/success.json", { "id": row.id }, function(result) {
if(result.success) {
$.messager.alert("温馨提示", "删除成功", "info")
//删除成功后 刷新界面
$("#employee-grid").datagrid('reload');
} else {
$.messager.alert("温馨提示", "删除失败", "info")
}
})
}
})
}
2.6 新增功能
思路：
- 新增和修改用的一个dialog对话框，新增之前先弹出对话框
- 每次新增之前 先清空form表单的数据
- 添加弹出对话框时，将密码框放出来 启动密码验证
add: function() {
//清空form表单数据
$("#operateForm").form('clear');
//添加的时候讲密码放出来
$("tr[pwd=true]").show();
//启动密码验证
$("#tr[pwd=true] input").validatebox('enableValidation');
//弹出dialog对话框
$("#formDlg").dialog("open");
}
2.7修改功能
思路：
- 修改之前先判断用户是否选中一行数据 如果没有 提示用户选中
- 修改时 将密码框隐藏 验证框禁用
- 部门回显
- 加载row数据 完成回显
edit:function() {
//修改方法 获取表格里面是否选中行
var row = $("#employee-grid").datagrid('getSelected');
//判断如果没有选中一行
if(!row) {
$.messager.alert("温馨提示", "亲，你要先选中一行才能修改额！", "info");
return;
}
//隐藏密码框
$("tr[pwd=true]").hide();
//禁用密码框
$("tr[pwd=true] input").validatebox('disableValidation');
//部门回显
//row对象 row.department.id = 1/2/3
if(row.department){
row["department.id"] = row.department.id;
}else{
row["department.id"] = "";
}
//修改的时候 弹出对话框 回显数据
$("#formDlg").dialog('open');
//数据回显
$("#operateForm").form('load',row);
}
2.8保存功能
修改和新增保存差不多，区别是新增没有id值，修改有id值，判断一下
思路：
- 提交form表单 ，调用form(‘submit’,{})
- doSubmit：验证，必须表单里的数据全部填写完毕才能提交表单，否则不提交
- success: 成功之后，处理方法
- 得到返回的json数据，根据json数据做判断，为真则保存成功 反之保存失败
save:function(){
//提交表单
$("#operateForm").form('submit',{
//提交的路径
url:"json/success.json",
onSubmit:function(){
//在做提交之前验证
//表单里面的数据是否全部填写完毕
return $(this).form('validate');
},
success:function(data){
//不是json对象
//转换为json对象
var result = $.parseJSON(data);
//判断
if(result.success){
$.messager.alert("温馨提示：","操作成功","info")
//重新加载数据
$("#employee-grid").datagrid('reload');
//关闭对话框
$("#formDlg").dialog('close');
}else{
$.messager.alert("温馨提示：","操作失败","error")
}
}
})
}
2.9 form表单验证
easyui本身提供了验证，但是只提供了四个简单的验证功能，入股偶想要扩展验证功能
就需要引入easyui扩展
引入的时候 需要加载对应的js文件和css文件
<!-- jquery.jdirk.js-->
<script type="text/javascript" src="js/jquery.jdirk.js"></script>
<!--验证功能-->
<script type="text/javascript" src="js/jeasyui.extensions.validatebox.rules.js"></script>
<!--引入css-->
<link rel="stylesheet" type="text/css" href="css/jeasyui.extensions.validatebox.css" />
在输入框里面使用验证：
data-options="required:true,validType:'length[4,12]'" //必填和字符长度验证
data-options="required:true,validType:'minLength[6]'" //最小长度验证
validType="equals['#password','jquery']" //确认密码验证
data-options="required:true,validType:'email'" //email的验证
data-options="required:true,validType:'integerRange[18,60]'" //范围验证
10万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
