easyui_03_增加

1：添加增加的按钮

（1）添加按钮的属性

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('编辑按钮')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('帮助按钮')}
	}]
});

（2）图标的显示

	iconCls: 'icon-edit'
	找到 /themes/icon.css 文件中的样式、
	
	.icon-edit{
		background:url('icons/pencil.png') no-repeat center center;
	}

（3）展示效果

toolbar: [{
				iconCls: 'icon-add',
				text:'增加',
				handler: function(){
					
				}
			},'-',{
				iconCls: 'icon-no',
				text:'删除',
				handler: function(){
					
				}
			},'-',{
				iconCls: 'icon-edit',
				text:'修改',
				handler: function(){
					
				}
			}]

2：点击按钮，弹出弹框

（1）依赖关系

在dialog组件中使用 closed 属性，但是在  dialog组件中没有明确closed 属性。
能够使用，是因为dialog依赖其他的组件，则可以使用其他组件的属性。

（2）增加弹框的方法

	<!-- 增加的div -->
	<div id="addDiv" style="display: none;">Dialog Content.</div>  

	/* 展示增加的弹框 */
	function showAddDialog(){
		$('#addDiv').dialog({    
		    title: '增加数据',    
		    width: 400,    
		    height: 300,    
		    closed: false,    
		    cache: false,    
		    modal: true   
		}); 
	}
	
	（1）将div隐藏起来，
	（2）通过href去加载增加页面

3：在弹框中显示增加表单

<form id="ff" method="post">   
		    <table cellpadding="5">
	    		<tr>
	    			<td>Name:</td>
	    			<td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>type：</td>
	    			<td>
	    				<input type="radio" name="type" value="1">收入
	    				<input type="radio" name="type" value="2">支出
	    			</td>
	    		</tr>
	    		<tr>
	    			<td>cg:</td>
	    			<td>
	    				<select id="cg" class="easyui-combobox" name="cg" style="width:200px;">   
						    <option value="0">请选择</option>   
						    <option value="1">餐饮</option>   
						    <option value="2">交通</option>   
						    <option value="3">购物</option>   
						</select>  
	    			</td>
	    		</tr>
	    		<tr>
	    			<td>price:</td>
	    			<td><input class="easyui-validatebox" name="price" data-options="required:true" ></input></td>
	    		</tr>
	    		<tr>
	    			<td>time:</td>
	    			<td>
						<input  id="time"  name="time" type= "text" class= "easyui-datetimebox" required ="required"> </input>  	    				
	    			</td>
	    		</tr>
	    		<tr>
	    			<td>img:</td>
	    			<td>
						<input class="easyui-filebox" style="width:300px">  	    				
	    			</td>
	    		</tr>
	    	</table> 
		</form>  

4：添加，提交表单，后台增加数据

（1）dialog添加按钮

buttons:[{
				text:'保存',
				handler:function(){
					alert("保存")
				}
			},{
				text:'关闭',
				handler:function(){
					alert("关闭")
				}
			}]

（2）点击保存提交数据

提交的方法

$.messager.progress();	// 显示进度条
$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){
		var isValid = $(this).form('validate');
		if (!isValid){
			$.messager.progress('close');	// 如果表单是无效的则隐藏进度条
		}
		return isValid;	// 返回false终止表单提交
	},
	success: function(){
		$.messager.progress('close');	// 如果提交成功则隐藏进度条
	}
});

后台增加方法

@ResponseBody
	@RequestMapping("addBook")
	public String addBook(Book book) {
		try {
			
			bookservice.addBook(book);
			return "success";
		} catch (Exception e) {
			e.printStackTrace();
			return "error";
		}
	}

5：提示，刷新数据

//增加方法
	function addBook(){
		$.messager.progress();	// 显示进度条
		$('#addForm').form('submit', {
			url: "addBook.do",
			onSubmit: function(){//在表单提交之前的方法
				//当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。
				var isValid = $(this).form('validate');//validate方法的作用：对表达进行验证
				alert(isValid );
				if (!isValid){
					$.messager.progress('close');	// 如果表单是无效的则隐藏进度条
				}
				return isValid;	// 返回false终止表单提交、true提交表单
			},
			success: function(data){
				if(data == "success"){
					$.messager.alert('提示','增加成功');    
				}else{
					$.messager.alert('提示','增加失败');
				}
				$.messager.progress('close');	// 如果提交成功则隐藏进度条
				//关闭弹框
				$('#addDiv').dialog("close");
				//刷新表格
				$('#bookList').datagrid('reload');
				
				//刷新表单 addForm  reset
				$('#addForm').form('reset');
			}
		});
	}

6：文件上传

(1)样式

<tr>
 	<td>img:</td>
			<td>
	<input class="easyui-filebox" name="fileImg" style="width:300px">  	    				
			</td>
 	</tr>

（2）表单属性

<form id="addForm" method="post" enctype="multipart/form-data">   

（3）增加的方法

	@ResponseBody
	@RequestMapping("addBook")
	public String addBook(Book book,
			@RequestParam(value="fileImg",required=true) MultipartFile file,
			HttpServletRequest request) {
		try {
			//上传
			String url = MyFileUtil.uploadFile(file, request);
			//获取到路径，添加在book对象中
			book.setUrl(url);
			bookservice.addBook(book);
			return "success";
		} catch (Exception e) {
			e.printStackTrace();
			return "error";
		}
	}

package com.mr.util;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.multipart.MultipartFile;

/**
 * 文件上传
 */
public class MyFileUtil {

	/**
	 * 文件上传，返回路径
	 * @return
	 */
	public static String uploadFile(MultipartFile file,HttpServletRequest request) {
		
		String name = "";
		//文件不为null
		if(!file.isEmpty()) {
			
			//设置文件的存放路径，并且设置文件的文件名
			//获取到的是当前服务器的更路径
			String path = request.getServletContext().getRealPath("/");
			//设置唯一文件名
			name = UUID.randomUUID().toString()+ "_" +file.getOriginalFilename();
			
			File f = new File(path,name);
			
			try {
				file.transferTo(f);
			} catch (IllegalStateException | IOException e) {
				e.printStackTrace();
			}
		}
		return name;
	}
	
}