EasyUI 增删改查完全详细

本实例使用EasyUI创建表格，元素，窗口，以及各种请求。增加，修改，查询及其他知识基本涵盖完全。有用到js创建和html创建.

整体概览：

多条件的分页查询

dialog对话框实现添加功能，加入验证

window弹窗多条件分页查询

修改信息

导入：

<pre name="code" class="html"><%@ page contentType="text/html; charset=utf-8"  import="java.util.*" language="java" %>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css"  href="/portal/css/use.css"  />
<link rel="stylesheet" type="text/css"  href="/portal/css/style.css">
<link rel="stylesheet" type="text/css"  href="/portal/js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"  href="/portal/js/jquery-easyui/themes/icon.css">
<script type="text/javascript" 	src="/portal/js/jquery-easyui/jquery-1.6.min.js"></script>
<script type="text/javascript"  src="/portal/js/jquery-easyui/jquery.easyui.min.js"></script>

前端js:

<script type="text/javascript">
	/* 启动时加载 */
	$(function(){
		$('#movement_ode').combobox({    
		    url:'/portal/goodsMovingTypeAction.do?type=query',    
		    valueField:'movement_types',    
		    textField:'summary'   
		});
		$("#goods_tab").datagrid({
	        title: '货品移动填报',
	        checkOnSelect: false,
	        pagination:true,
			pageSize:20,
			pageNumber:1,
			toolbar: '#tb',
	        url: '/portal/queryGoodsMovementAction.do',
	        loadMsg:'加载中...',
	        fit: true,
	        columns: [[
	            { field: 'id', checkbox: true},
	         	{ field: 'moveid', title: '编号', width:60 },
	         	{ field: 'postingdate', title: '过帐日期', width:80},
	         	{ field: 'transferreno', title: '移动单号', width:100 },
	         	{ field: 'movementcodename', title: '移动类型信息说明', width:150 },
	         	{ field: 'fromstoragelocation', title: '来源库位', width:60 },
	         	{ field: 'tostoragelocation', title: '接受库位', width:60 },
	         	{ field: 'frommaterial', title: '商品编码', width:80 },
	         	{ field: 'frombatchnumber', title: '商品批号', width:80 },
	         	{ field: 'quantity', title: '数量', width:60 },
	         	{ field: 'reasoncodename', title: '原因代码说明', width:120 },
	         	{ field: 'documentdatetime', title: '创建时间', width:80 },
	         	{ field: 'del_flag', title: '记录状态', width:80,
	         		formatter: function(value,row,index){
						if (value=='0'){							
							return '<a  href="javascript:void(0);" style="color: #000000;" οnclick="updateDelFlag('+value+','+row.moveid+');">有效</a>';
						} 
						if (value=='1'){
							return '<a  href="javascript:void(0);" style="color: #ff0000;" οnclick="updateDelFlag('+value+','+row.moveid+');">无效</a>';
						}
					}
	         	},
	         	{ field: 'exec_flag', title: '同步状态', width:80,
	         		formatter: function(value,row,index){
						if (value=='0'){
							return '未同步';
						} 
						if (value=='1'){
							return '已同步';
						}
					}
	         	}
	        ]]	        
	    }); 
		
		/* 选择ERP商品信息 */
		$("#select_erp_win").window({
			title:'选择ERP商品信息',
		    width:640,    
		    height:400,    
		    modal:true   
		}).window("close");  
		
		$("#select_erp_tab").datagrid({
			url:"/portal/queryerpgoodsAction.do",
			loadMsg:'加载中...',
			singleSelect:true,
			pagination:true,
			pageSize:10,
			pageNumber:1,
			columns:[[
				{field:'com_goods_id',title:'com_goods_id',width:100,checkbox:true},    
				{field:'goods_opcode',title:'ERP商品操作码',width:100},    
				{field:'goods_name',title:'ERP商品名称',width:100},    
				{field:'goods_desc',title:'ERP商品规格',width:100},    
				{field:'product_location',title:'ERP商品厂商',width:100},    
				{field:'unit_name',title:'ERP商品单位',width:75},    			
				{field:'package_num',title:'ERP商品包装数',width:75}     
				
			]]
		});
		
		/* 选择商品批号 */
		$("#select_batchnumber_win").window({
			title:'选择ERP商品信息',
		    width:480,    
		    height:400,    
		    modal:true   
		}).window("close");  
		
		$("#select_batchnumber_tab").datagrid({
			url:"/portal/queryerpGoodsBatchNumberAction.do",
			loadMsg:'加载中...',
			singleSelect:true,
			pagination:true,
			pageSize:10,
			pageNumber:1,
			columns:[[
				{field:'com_lot_id',title:'com_lot_id',width:100,checkbox:true},    
				{field:'lot_no',title:'商品批号',width:100},    
				{field:'produce_date',title:'生效日期',width:150},    			
				{field:'expire_date',title:'到期日期',width:150}  				
			]]
		});
		/* 移动类型改变启用原因代码 */
		$('#tb_movement_code').combobox({			
			onSelect: function(record){
				var value = $(this).combobox('getValue'); 
				$('#tb_reasoncode').combobox({    
				    url:'/portal/getAllParameterAction.do?type=reason&movement_types='+value,    
				    valueField:'reason_code',    
				    textField:'reason_name'   
				});
				$("#tb_reasoncode").combobox("enable");
			}
		});

		
	});
	
	/* 查询数据条件 */
	function checkInputQuery(){
		var startDate = $('#startDate').datebox('getValue');
		var endDate = $('#endDate').datebox('getValue');
        var movingCode = $('#movement_ode').combobox('getValue'); 
        $('#goods_tab').datagrid('options').url='/portal/queryGoodsMovementAction.do';
		$('#goods_tab').datagrid('load',{
			startDate:startDate,
			endDate:endDate,
			movingCode:movingCode,
		});        
    }
	
	/* 修改记录状态 */
	function updateDelFlag(value,row){
		$.ajax({
	        method : 'post',
	        url : '/portal/updateGoodStatusAction.do',
	        data:{ 
	        	type : "del",
	        	moveid : row,
	        	del_flag : value
	    	}, 
	        async : false,
	        dataType : 'json',
	        success : function(data) {
	            if(data){
	    			$('#goods_tab').datagrid('reload'); 
	            }else{
	            	$.messager.alert('提示',"更改记录状态失败！");
	            }
	        },
	        error : function() {
	            $.messager.alert('异常','更改记录状态异常！');
	        }
	    });
	}
	
	/* 修改同步状态，单条或多条 */
	function updateExecFlag(){
		var checkedItems = $('#goods_tab').datagrid('getSelections');
		var moveid = [];
		$.each(checkedItems, function(index, item){
			moveid.push(item.moveid);
		}); 
		var str =moveid.toString();
		if(moveid!=""){
			$.ajax({
		        method : 'post',
		        url : '/portal/updateGoodStatusAction.do',
		        data:{    
		        	type : "exec",
		        	moveids : str
		    	},