easyUI学习第二天

最新推荐文章于 2024-11-11 00:03:55 发布

snailisBigbull

最新推荐文章于 2024-11-11 00:03:55 发布

阅读量151

点赞数

分类专栏： easyUI JS 文章标签： easyUI js java 前端

本文链接：https://blog.csdn.net/snailisBigbull/article/details/96778906

版权

JS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

easyUI

2 篇文章 0 订阅

订阅专栏

1.easyui常用的组件

tabs 选项卡

message消息窗口

alert 提示 confirm确认 prompt 输入 progress 进度条

form表单组件

datagrid表格组件

layout布局组件

验证组件 : easyui-validatebox

下拉列表：easyui-combobox

2.easyui完善综合练习

2.1 easyui综合练习布局

使用layout

<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 删除功能

思路：

(1) 在删除数据之前，判断是否选择的表格里面行，如果没有选中，提示选中行数据

如果选中，在使用confirm确认提示是否要真的删除

(2) 如果点击确定，根据id发送ajax请求删除数据

(3)删除完数据之后，重新加载表格

代码

						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 新增功能

2.6.1 新增弹出功能

弹出对话框表单

(1)清空表单数据

(2)弹出对话框

(3)在弹出的时候，开启密码的验证

代码

				add:function(){
						//清空表单数据
						$('#operateForm').form('clear');
						//添加放出来
						$("tr[pwd=true]").show();
						//启动密码验证
						$("tr[pwd=true] input").validatebox('enableValidation');
						//弹出dialog对话框
						$("#formDlg").dialog('open');
					}

2.6.2 新增保存操作

思路：

（1）提交form表单，调用form(‘submit’,{})

（2） doSubmit：做的验证，如果全部验证通过之后，才提交表单数据，如果只要有一个没有通过，返回false，不会提交表单

（3）success: 成功之后，处理方法

得到返回的json数据。取出json里面success这个字段，判断如果是true，就操作成功，加载表格数据

如果是false，操作失败

			save:function(){
						//取出隐藏域里面id值，如果不为null 修改
						/*var url = "/save";
						var id = $("#id").val();
						if(id){
							url = "/update";
						}*/
						//提交表单
						$('#operateForm').form('submit', {    
						    url:'json/success.json',    
						    onSubmit: function(){    
						        //做提交之前的验证
						        return $(this).form('validate');  
						    },    
						    success:function(data){    
						        //不是json对象 
						       var result =  $.parseJSON(data);
						       if(result.success){
						       		$.messager.alert('温馨提示:','操作成功','info');
						       		//重新加载数据
						       		$("#employee-grid").datagrid('reload');
						       		//关闭对话框
						       		$("#formDlg").dialog('close');
						       }else{
						       		$.messager.alert('温馨提示:','操作失败','error');
						       }
						    }    
						}); 
						
					}

2.7 修改功能

2.7.1 修改弹出回显功能

（1）修改之前判断是否选中数据，如果没有选中，提示用户选择数据

如果选中的数据,进行修改回显

（2）修改的处理密码，把密码隐藏，隐藏同时，禁用验证框

(3) 部门的回显

(4) 加载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
						//部门回显 input name = "department.id" row.department.id
						if(row.department){
							row["department.id"] = row.department.id;
						}else{
							row["department.id"] = "";
						}
						//修改 --弹出对话框 回显数据
						$("#formDlg").dialog('open');
						//数据回显
						$('#operateForm').form('load',row);
						
					}

2.7.2 修改保存

修改保存操作和新增保存是类似，唯一的区别修改的时候有id值，新增没有id值

save:function(){
						//取出隐藏域里面id值，如果不为null 修改
						/*var url = "/save";
						var id = $("#id").val();
						if(id){
							url = "/update";
						}*/
						//提交表单
						$('#operateForm').form('submit', {    
						    url:'json/success.json',    
						    onSubmit: function(){    
						        //做提交之前的验证
						        return $(this).form('validate');  
						    },    
						    success:function(data){    
						        //不是json对象 
						       var result =  $.parseJSON(data);
						       if(result.success){
						       		$.messager.alert('温馨提示:','操作成功','info');
						       		//重新加载数据
						       		$("#employee-grid").datagrid('reload');
						       		//关闭对话框
						       		$("#formDlg").dialog('close');
						       }else{
						       		$.messager.alert('温馨提示:','操作失败','error');
						       }
						    }    
						}); 
						
					}
				}

2.8 验证功能

本身easyui 已经提供的验证，只有4个验证功能，这些功能不能满足的需要，引入的easyui扩展功能来验证

引入的时候，需要加载对应的js文件和 css文件

	<!-- jquery.jdirk.js-->
		<script type="text/javascript" src="easyui/plugin/jquery.jdirk.js"></script>
		
		<!--引入验证功能 -->
		<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">

在输入框里面使用验证功能

使用原则：

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]'" //范围验证

2.9 table

<table id="employee-grid" class="easyui-datagrid"
   data-options="rownumbers:true,toolbar:'#tb',fit:true,singleSelect:true,collapsible:true,fitColumns:true,url:'json/employee.json',method:'get',pagination:true">
    <thead>
	    <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>
    </thead>
    <tbody>
    </tbody>
</table>

	<div id="tb" style="padding:5px;height:auto">
	<div style="margin-bottom:5px">
		<a href="#" data-method='add' class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
		<a href="#" data-method='edit' class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
		<a href="#" data-method='remove' class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
	</div>
	<div>
		<form id="searchForm">
		用户名: <input id="username" name='username' class="easyui-textbox" style="width:80px">
		部门: 
		<input id="departmentId" name='deptmentId' class="easyui-combobox" data-options="    
        method:'get',
        valueField: 'id',    
        textField: 'name',    
        url: 'json/dept.json',
        panelHeight:'auto'" /> 
		<a href="#" data-method='search' class="easyui-linkbutton" iconCls="icon-search">搜索</a>
		</form>
	</div>
</div>

3.0 弹出form表单

用户名:
密码:
确认密码:
邮件:
年龄:

            <td>部门:</td>
            <td>
            	
                <select name="department.id" class="easyui-combobox" style="width:100px"
                        data-options="
                        method:'get',
                       required:true,
                       url:'json/dept.json',
                       valueField:'id',
                        textField:'name',
                        panelHeight:'auto'
                    "
                >
                </select>
            </td>
        </tr>
    </table>
</form>