1.easyui常用的组件
常用组件请查阅api
1、tabs 选项卡
2、message消息窗口
alert 提示 confirm确认 prompt 输入 progress 进度条
3、form表单组件
4、datagrid表格组件
datagrid:数据表格控件
fitColumns:true -> 使列自动展开/收缩到合适的DataGrid宽度
如果加了这个，th中的width就是权重了
singleSelect:true：只能选择一条数据
ctrlSelect:true：ctrl多选(多选打开才有用)
pagination:true:分页
rownumbers:true:行号
5、layout布局组件
6、验证组件 : validatebox
属性：validType：验证内容
7、下拉列表：combobox
下拉列表：easyui-combobox属性：
url 数据来源
valueField 据值名称 绑定到下拉框（id）
textField 字段名称绑定到该下拉列表框
panelHeight:'auto' 下来框高度
8、对话框Dialog组件
modal:模态框 buttons：引用按钮
我们这里主要引入form表单到对话框中去
2.easyui完善综合练习
2.1 easyui综合练习布局
使用layout总体给body布局
<body class="easyui-layout"><!--总体给body设置样式-->
<div data-options="region:'north',split:true" style="height:100px;">
<div style="font-size:30px;float:left;color: red;margin-top: 20px;background-color: paleturquoise;background-image:url(img/top图片.jpg)">
XXXXX管理系统
</div>
<div style="float: right;margin-top: 60px;">
欢迎<span style="color:palevioletred;">XXX</span>进入
<a href="#" style="color: mediumpurple;">注销 </a>
</div>
</div>
<div data-options="region:'south',split:true" style="height:100px;">
版权信息等内容
</div>
<div id="menuTree" data-options="region:'west',title:'菜单信息',split:true" style="width:230px;">
树形菜单
</div>
<div id="center" class="easyui-tabs" data-options="region:'center',title:'欢迎你个球！！！'" style="background:#eee;">
<!--错误，没有把这个标签变成一个页签选项卡，上面添加肯定不行-->
</div>
</body>
2.2 easyui加载树菜单和加载页签
tabs页签中add方法中：跳转页面——使用
/*左侧树形菜单栏*/
$(function(){
$("#menuTree").tree({ //引入id忘了加#
url:"json/menuTree.json", //这个路径/符号用成了\了
method:'get',
//点击菜单的时候，添加选项卡
//获取点击节点里面的node.txt，
onClick:function(node){
/*测试获取 选项卡中的点击node对象（里面封装了tree所有属性，
* Tabs 选项卡需要获得text属性去主体框创建页签）
* 测试通过：
* console.log(node),
alert(node.text)*/
/*2、解决主选项被选中的情况——系统管理、员工管理
* 他们两个是父级标签，其中没有url这个属性，判断
* 如果有url，不选中，没有就选中
*/
if(node.url){//有，就选中，并添加页签
/*1、解决选项卡重复问题
先判断选项卡里面是否存在当前的菜单，如果存在，不应该添加
使用页签中的exists(which)方法:'which'参数可以是选项卡面板的标题或索引。
*/
if($("#center").tabs('exists',node.text)){//存在的话就不添加，返回当前页签
//页签select方法
$("#center").tabs('select',node.text)
}else{//不存在就添加
//在center创建选项卡
$('#center').tabs('add',{
title: node.text,
closable:true,//取消按钮
//这里面应该加载我们的数据页面employee.html使用iframe标签
//面板panel组件，方法content，跳转页面——src农村node.url，直接去里面的地址employee.html，然后跳转
//frameborder：规定是否显示框架周围的边框。
//以后url跳转就是写的全是跳转后台的springMVC的controller了。
content:"<iframe frameborder=0 style='width:100%;height:100%' src='"+node.url+"'></iframe>"
});
}
}
}
})
})
2.3 绑定按钮点击事件
精巧的设计：
-
给a标签自定义属性data-method=“add/edit/remove/search/save”
-
获取data-method属性中的对应的值
-
额外添加一个对象cc，里面的属性分别是add/edit/remove/search/save，后面紧跟自己的函数（已备调用）
-
判断：根据获取到的不同的名字，拿到对应的属性名，从而调用相应的函数
/*给所有a标签绑定事件
点击的时候出来不同的效果
1、给对应的a标签自定义属性：data-method="add"
2、根据data-method中的具体的值选择调用不同的方法
3、设置一个对象，绑定事件方法从中
* */
//给a绑定事件
$("a").on("click",function(){
//获取到 a标签里面配置的自定义属性 data-method
var methodName = $(this).data("method");//？什么意思
//alert(methodName)
//根据获取到的不同的名字，调用cc对象中的不同的方法
if(methodName){//如果拿到的是add，那就add是true，进入
cc[methodName]();
}
})
//弄一个对象,给对象添加不同的属性（add，edit，remove）
//如：add属性，后面跟了一个函数，会调用这个函数的。
var cc = {
add:function(){
alert('add');
},
edit:function(){
alert('edit');
},
remove:function(){
alert('remove');
},
search:function(){
alert('测试搜索');
}
save:function(){
alert('测试保存');
}
}
2.4显示部门、头像
1.因为部门是二级属性，所以不能直接显示其名字；给头像添加img标签才能显示
2.给表头（thead）中的头像、部门设置自定义属性：formatter=“headImgFormatter/deptFormatter”
3.创建相应的JS函数
//搞部门、搞头像
//部门，给表头设置 自定义属性：formatter='deptFormatter'
//使用JS函数创建 deptFormatter 方法将数据弄进去
function deptFormatter(obj){
//判断这一行是否有 department 属性，有这个属性就取出其中的name值
//因为部门是二级属性，所以不能直接显示其名字
if(obj){
//console.log(obj.name)
//取出name并返回
return obj.name;
}else{
return "实习……";
}
}
//头像——思路：给头像添加img标签
//给头像列自定义属性formatter='headImgFormatter'
function headImgFormatter(value){
//console.log(value);
if(value){
return '<img src='+value+'></img>';
}else{
return "没有头像……";
}
}
//表格中的自定义属性formatter
<tr>
<th data-options="field:'username',width:80">用户名</th>
<th data-options="field:'email',width:80">邮箱</th>
<th data-options="field:'age',width:80,align:'right'">年龄</th>
<th data-options="field:'headImage',width:80,align:'right'" formatter='headImgFormatter'>头像</th>
<th data-options="field:'department',width:80" formatter='deptFormatter'>部门</th>
</tr>
2.5搜索
(1)获取搜索表单添加内容值
——使用jQuery扩展功能jdirk可以把表单中的所有值封装成对象返回给后台：
1.引入 jquery.jdirk.js
2.把各种box（如：textbox普通、combobox下拉）必须放在from中才能使用
3.获取其中的所有数据返回给后台
<!-- 引入高速搜索封装数据-->
<script type="text/javascript" src="easyui/plugin/jquery.jdirk.js"></script>
(2)调用form中的load方法加载表格，就发送请求查询数据返回json，加载到表格里面去
/**
* 搜索：(1)获取搜索表单添加内容值
使用扩展功能：引入 jquery.jdirk.js
必须放在from中才能使用
获取其中的所有数据
(2)调用load方法加载表格，就发送请求查询数据返回json，加载到表格里面去
*/
search:function(){
//思路 获取input里面的数据
//var username = $("#username").val();
//console.log(username); jquery 的扩展的jquery.jdirk.js
var params = $("#searchForm").serializeObject();
//搜索 发送请求到后台，后台返回数据后
console.log(params);
//load——加载数据到数据表格中去。
$("#employee-grid").datagrid('load',params);
}
//高级搜索的所有box（填写数据的）都放在这个表单中
<form id="searchForm">
<div>
用户名: <input class="easyui-textbox" id="username" name='username' style="width:80px">
部门: <!--注入属性：把部门数据取出来-->
<input class="easyui-combobox" id="deptment" name='deptment' style="width:80px"
data-options="
method:'get',
url:'json/dept.json',
valueField: 'id',
textField: 'name',
panelHeight:'auto'
"
>
<a href="#" class="easyui-linkbutton" data-method="search" iconCls="icon-search">搜索</a>
</div>
</form>
2.5 删除功能
思路：
(1) 在删除数据之前，判断是否选择的表格里面行，如果没有选中，提示选中行数据
如果选中，在使用confirm确认提示框提示是否要真的删除
(2) 如果点击确定，根据id发送ajax请求 删除数据
(3)删除完数据之后，重新加载表格
代码
//3删除数据
remove:function(){
/*思路：
(1) 在删除数据之前，判断是否选择的表格里面行，如果没有选中，提示选中行数据
如果选中，在使用confirm确认提示是否要真的删除
(2) 如果点击确定，根据id发送ajax请求 删除数据
(3)删除完数据之后，重新加载表格*/
//删除方法 获取表格里面是否选中行
//datagrid中方法：getSelected -- 返回选中行，没有则为null
var re = $("#employee-grid").datagrid("getSelected")
if(re){//选中才删除 confirm 确认对话框
//console.log(re)
//提示是否要删除
//r是取得true、false
$.messager.confirm("提示：","真的要干掉我？",function(r){
if(r){//删除
//alert(1)
//删除数据 发送ajax请求 删除数据
//把id发送过去
$.get("json/success.json",{"id":re.id},function(result){
if(result.success){
$.messager.alert("提示：",result.message,"info");
}else{
$.messager.alert("提示：","删除失败","info");
}
})
}else{
$.messager.alert("提示：","还没想好？","error");
}
});
}else{//没有选中
//alert(re)
$.messager.alert("提示:","选择一条数据，暴君！","info");
}
},
2.6 新增功能（附加密码验证）
2.6.1 新增弹出功能
(1)弹出对话框 Dialog组件，把表单放入这个对话框中
(2)清空表单数据
(3)由于修改数据中隐藏了密码：把添加密码放出来
(4)由于修改数据中关闭了密码验证：启动密码验证
(5)弹出对话框，填写用户数据，点击提交——提交到save中保存数据
2.6.2 validatebox中的密码验证
1.引入密码验证扩展库
2.使用验证的给validatebox添加属性 validType:‘minLength[3]’ 添加最小长度3
代码
//1添加数据
add:function(){
//alert("add");
//清空表单数据
$('#operateForm').form('clear');
//由于修改数据中隐藏了密码：把添加密码放出来
$("tr[pwd=true]").show();
//由于修改数据中关闭了密码验证：启动密码验证
$("tr[pwd=true] input").validatebox("enableValidation");
//弹出对话框
$("#formDlg").dialog('open');
},
//密码验证
<!--引入验证功能 -->
<script type="text/javascript" src="easyui/plugin/jeasyui.extensions.validatebox.rules.js"></script>
<!--引入css -->
<link rel="stylesheet" type="text/css" href="easyui/plugin/jeasyui.extensions.validatebox.css">
//使用验证的 validType:'minLength[3]' 添加最小长度3
//使用 输入的字符必须是指定的内容相同 验证“确认密码”和“密码”一致
// validType="equals['#password','jquery']"
//不能有两个验证在同一个框中
<tr data-save="true">
<td>密码:</td>
<td><input id="password" class="easyui-validatebox" type="text" name="password" data-options="required:true,validType:'minLength[3]'"></input></td>
</tr>
<tr data-save="true">
<td>确认密码:</td>
<td><input class="easyui-validatebox" type="text" name="configPassword"
validType="equals['#password','jquery']"
data-options="required:true,validType:'minLength[3]'"></input></td>
</tr>
2.6.2 新增保存操作
（1）这里准备修改保存——根据是否有id决定是修改还是添加数据
（2）提交form表单 ，调用form(‘submit’,{})
（3） onSubmit：做的验证，如果全部验证通过之后，才提交表单数据，如果只要有一个没有通过，返回false，不会提交表单
（4）success: 成功之后，处理方法
得到后台返回的json数据。取出json里面success这个字段，判断如果是true，就操作成功，
//重新加载表格数据
//关闭对话框
如果是false，操作失败
//5保存数据
save:function(){
//取出隐藏域里面id值，如果不为null 就是修改，否则是新增
//把 operateForm 这个表格里面的数据提交到后台去
/*var url = "/save";
var id = $("#id").val();
if(id){
url = "/update";//后台更新
}else{
//后台新增数据
}
*/
//提交表单 方法：submit
$("#operateForm").form("submit",{
url:'json/success.json',//提交的路径
onSubmit: function(){
//提交前验证：方法：validate
return $(this).form('validate');
},
//提交后的回调函数 获取到后台响应过来的数据，但是不是json对象
success: function(data){
//不是json对象 ，转换
var result = $.parseJSON(data);
if(result.success){//true
//操作成功，提示
$.messager.alert('温馨提示:','操作成功','info');
//datagrid的重新加载数据reload方法
$("#employee-grid").datagrid("reload");
//关闭对话框
$("#formDlg").dialog('close');
}else{
$.messager.alert('温馨提示:','操作失败','error');
}
}
})
}
2.7 修改功能
2.7.1 修改弹出回显功能
（1）修改之前 判断是否选中数据，如果没有选中，提示用户选择数据如果选中的数据,进行修改回显
（2）修改的处理密码
/*
1.给两个密码框设置自定义属性pwd="true"，获取这两个密码框后方法：hiend()隐藏密码框
2.隐藏密码框
//隐藏密码框，不能修改
$("tr[pwd=true]").hide();
3.解除提交前验证密码：
form中提交前验证方法：validate
return $(this).form('validate');
解除：validatebox 中方法：disableValidation
4.*注意这里隐藏和解除密码验证了之后，添加中的密码框也隐藏了。需要去显示和启用密码验证
*/
把密码隐藏，隐藏同时，禁用验证框
(3) 部门的回显
/*
1.row对象中封装了一行的中所有属性
2.department是row中的一个对象属性，其中有部门名字
3.部门使用combobox中的属性： textField:'name'——这是根据name来显示数据
而name=department.id
department.id又等于row.department.id获取到的id
valueField属性根据id值去查找对应的部门name就获取到了
*/
(4) 加载row数据，完成回显
//2修改数据
edit:function(){
//alert("edit");
//1、提示选择数据
//获取到row一行的对象
var row = $("#employee-grid").datagrid('getSelected');
if(!row){//判断如果没有选择一行，就提示选择一行
$.messager.alert('温馨提示:','亲，你要选择一行数据进行修改','info');
return;
}
//选择了数据，获取id修改该条数据即可
//2、
//关闭密码框，不能修改
$("tr[pwd=true]").hide();
//禁用密码框的验证 validatebox中方法：disableValidation
$("tr[pwd=true] input").validatebox("disableValidation");
//3、回显数据
//部门回显——row对象中封装了一行的中所有属性
//department是row中的一个对象属性，其中有部门名字
/*部门使用combobox中的属性： textField:'name'——这是根据name来显示数据
而name=department.id
department.id又等于row.department.id获取到的id
valueField属性根据id值去查找对应的部门name就获取到了
* */
//row.department.id 能取到id值,给row新增一个属性department.id
//判断有的话,就添加属性
if(row.department){//不为null就有部门
//row["department.id"] 新增属性
row["department.id"] = row.department.id;
}else{
row["department.id"]="";
}
//console.log(row)
//4、弹出修改框——修改数据
$("#formDlg").dialog('open');
//5、回显数据（数据就是这一行row的数据），上面已经改变了这一行的属性
//——回显到form中，方法：load加载数据
$("#operateForm").form("load",row);
},
2.7.2 修改保存
修改保存操作和新增保存是类似，唯一的区别 修改的时候有id值，新增没有id值
到时候判断有无id即可
/*代码与添加保存一样*/
2.8 验证功能加强
validatebox组件
属性：required：true 必填项
validType:‘验证内容’ 要验证什么
1.本身easyui 已经提供的验证，只有4个验证功能，这些 功能不能满足的需要。
2.引入的easyui扩展功能来验证（直接查看源码使用）
引入的时候，需要加载对应的js文件和 css文件
<!--引入验证功能 -->
<script type="text/javascript" src="easyui/plugin/jeasyui.extensions.validatebox.rules.js"></script>
<!--引入css -->
<link rel="stylesheet" type="text/css" href="easyui/plugin/jeasyui.extensions.validatebox.css">
在validatebox的输入框里面使用验证功能
常用验证：
"required:true,validType:'length[4,12]'" //必填和字符长度验证
"required:true,validType:'minLength[6]'" //最小长度验证
validType="equals['#password','jquery']" //确认密码验证
"required:true,validType:'email'" //email的验证
"required:true,validType:'integerRange[18,60]'" //范围验证
/**
附件：高级搜索包—jdirk包、验证（validatebox）组件包、EasyUI 1.5API 中文
百度网盘地址：https://pan.baidu.com/s/1KQVneuwuHX8NXJTjT70xSg
提取码：osg5
*/
扫一扫
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
