EasyUI Tabs全攻略

完全的实例，主要涉及EasyUi DataGrid和tabs两大功能，其中涉及多种知识点：根据页面地址获取参数，datagrid内部传参和列显示，tabs选项卡的添加和初始化，格式化列，字符的截取以及循环，按钮的多条件禁用启用，json字符串的拼接及解析，ajax等功能细节。

如需详细的EasyUi DataGrid请参考推荐文章

前端JS：

<script type="text/javascript">
	$(function(){
		var url = window.location;//获取上一jsp页面的传值
	    function getUrlParam(url,name){
	        var pattern = new RegExp("[?&]" + name +"\=([^&]+)","g");//name的值
	        var matcher = pattern.exec(url);
	        var items = null;
	        if(matcher != null){
	            try{
	                items = decodeURIComponent(decodeURIComponent(matcher[1]));   
	            }catch(e){
	                try{
	                    items = decodeURIComponent(matcher[1]);
	                }catch(e){
	                    items = matcher[1];
	                }
	            }
	        }
	        return items;
	    }
	    var batch_name = getUrlParam(url,'name');
	    $("#batch_name").val(batch_name);
	    //加载订单库存信息
	    $("#dgStock").datagrid({
			url:"/portal/listGskOrderDetailAction.do",
			loadMsg:'加载中...',
			singleSelect:true,
			queryParams: {
				type: 'stock',
				batch_name: batch_name
			},
			columns:[[
				{field:'goods_opcode',title:'品种',width:80},    
				{field:'goods_name',title:'名称',width:155},    
				{field:'qty',title:'订单',width:50},    			
				{field:'stock_qty',title:'库存',width:50}  				
			]]
		}); 
	    //查询选项卡
	    $.ajax({
	        method : 'post',
	        url : '/portal/listGskOrderDetailAction.do',
	        data:{ 
	        	type: 'order',
				batch_name: batch_name
	    	}, 
	        async : false,
	        dataType : 'json',
	        success : function(data) {
	            if(data){
	    			$.each(data,function(index,item){
	    				//添加选项卡
	    				addTabs(item.orderno,item.client,index);
	    			});
	            }else{
	            	$.messager.alert('提示',"订单信息加载失败！");
	            }
	        },
	        error : function() {
	            $.messager.alert('异常','订单信息加载异常！');
	        }
	    }); 
	    
		function addTabs(orderno,client,index){
			$("#tt").tabs('add',{    
		        title:orderno+":"+client,    
		        //content:'<table id="dg'+index+'" ><input id="in'+index+'" type="hidden" value="'+orderno+'"/></table>', 
		        content:'<table id="dg'+orderno+'" ></table>',//添加表格用于<span style="font-family: Arial, Helvetica, sans-serif;">datagrid</span><span style="font-family: Arial, Helvetica, sans-serif;">实时加载</span>
		        scrollIncrement:300,
		        fit: true,
		        closable:false   
		    });
		}
		var valid=true;//是否可以发送订单（按钮状态）
		//初始化点击事件
		$('#tt').tabs({    
		    border:false,    
		    onSelect:function(title,index){
		    	var orderno = title.split(":")[0];
				$("#title_tb").val(title);
		    	//加载该选项卡订单信息
		    	$("#dg"+orderno).datagrid({
					url:"/portal/listGskOrderDetailAction.do",
					loadMsg:'加载中...',
					singleSelect:true,
					toolbar: [{//在页面创建的话会出现问题（关闭选项卡后菜单也会关闭）
						text: '创建销售订单（TO_GSK）订单',
						handler: function(){createSaleOrders();}
					}],
					fit: true,
					queryParams: {
						type: 'info',
						orderno: orderno,
						batch_name: batch_name
					},
					columns:[[
						{field:'szedct',title:'类型',width:50,
							formatter: function(value,row,index){//格式化列
								if (value=='SO'){
									return '销售';
								} 
								if (value=='SC'){
									return '退货';
								}
								if (value=='SZ'){
									return '赠样';
								}
							}	
						}, 
						{field:'field1',title:'GSK文件_客户名称',width:150},    			
						{field:'szdate',title:'日期',width:80},				
						{field:'szvr01',title:'客户订单号',width:80},    
						{field:'szlitm',title:'GSK的SKU号',width:100},  
						{field:'szdsc1',title:'GSK的SKU描述',width:200},
						{field:'szuorg',title:'数量',width:60},
						{field:'szlotn',title:'批号',width:60},
						{field:'client_opcode',title:'客户码',width:100},
						{field:'goods_ids',title:'商品码集合',width:200,hidden: true},
						{field:'goods_opcode',title:'商品码',width:200,
							formatter: function(value,row,index){
								//多个商品码
								var ids = row.goods_ids;
					            if(ids != ''){
					            	var array = ids.split(",");//后台数据（以,分割成数组）
					            	var str="";
					            	for (i in array){//循环取出数据，添加单选按钮并默认
					            		if(array[i] == value){
											str += "<input type='radio' name='"+row.id+"' οnclick='checkStock("+row.szuorg+","+array[i]+","+row.id+","+row.client_id+",\""+row.szvr01+"\");' value='"+array[i]+"' checked='checked' />"+array[i];
										}else{
											str += "<input type='radio' name='"+row.id+"' οnclick='checkStock("+row.szuorg+","+array[i]+","+row.id+","+row.client_id+",\""+row.szvr01+"\");' value='"+array[i]+"' />"+array[i];
										}
					            	}
					            	return str;
								}else{//给按钮状态赋值
									valid=false;
									return value;
								}
							}
						},
						{field:'sale_valid',title:'销售关系',width:60,
							formatter: function(value,row,index){
								//判断关系并添加ID为多商品码查询用
								if (value=='0'){
									valid=false;
									return '<span id="sale_valid'+row.id+'"><img src="/portal/images/X5.gif" alt="" /><input name="sale_vlid" type="hidden" value="0" /></span>';
								} 
								if (value=='1'){
									return '<span id="sale_valid'+row.id+'"><img src="/portal/images/X3.gif" alt="" /><input name="sale_vlid" type="hidden" value="1" /></span>';
								}
							}
						},
						{field:'goods_stock',title:'库存',width:60,
							formatter: function(value,row,index){
								var szuorg = row.szuorg;
								//判断库存信息并添加ID为多商品码查询用
								if(value>=szuorg){
					            	return "<span id='stock"+row.id+"'><font color='black'>"+value+"</font></span>";
								}else{
									valid=false;
									return "<span id='stock"+row.id+"'><font color='red' >"+value+"</font></span>";
								}
								//取其他列进行判断
								/* var rows = $('#dg'+indexMain).datagrid('getRows');
								var total = 0;
						        for (var i = 0; i < rows.length; i++) {
						            total = rows[i]['szuorg'];
						            if(value>=total){
						            	return "<font color='black'>"+value+"</font>";
									}else{
										valid=false;
										return "<font color='red' >"+value+"</font>";
									}
						        }  */
							}
						}
					]],onLoadSuccess : function(){
				    	if(valid){//禁用启用按钮
				    		$("#tba").linkbutton("enable");//enable
				    	}else{
				    		$("#tba").linkbutton("disable");
				    	}
					}
				}); 
		    	
		    }  
		});
		
		
		
		
		
		
	});
	//单选按钮检查库存和关系
	function checkStock(szuorg,opcode,id,client,order){
		$.ajax({
			url:"/portal/listGskOrderStockDetailAction.do",
			type:'post',
			data:{goods_opcode:opcode,client_id:client},
			dataType:"json",
			success:function(data){
				var s = parseInt(data.stack);
				 if(s >= szuorg){
					$("#stock"+id).html("<font color='black' name='stock_color'>"+data.stack+"</font>");
				}else{
					$("#stock"+id).html("<font color='red' name='stock_color'>"+data.stack+"</font>");
				}
				if(data.sale_valid > 0){
					$("#sale_valid"+id).html("<img src='/portal/images/X3.gif' /><input name='sale_valid' type='hidden' value='1' />");
				}else{
					$("#sale_valid"+id).html("<img src='/portal/images/X5.gif' /><input name='sale_valid' type='hidden' value='0' />");
				}
				//检查库存和关系是否启用按钮
				checkError(); 
			},
			error:function(){
				alert("操作失败,请重试！");
			}
		});
	}
	
	function checkError(){
		var plan = true;
		 $("input[name='sale_valid']").each(function(index,item){//验证关系
			if($(this).val()!=1){
				plan = false;
			}
	 	});
		$("font[name='stock_color']").each(function(index,item){//验证库存
			var color = ($(this).attr("color"));
			if(color == "red"){
				plan = false;
			}
	 	});
		if(plan){
			$("#tba").linkbutton("enable");
		}else{
			$("#tba").linkbutton("disable");
		} 
	}
	
	function createSaleOrders(){
		var title = $("#title_tb").val();
		var orderno = title.split(":")[0];//以：分割的第1个参数
		if(confirm('将 ,     '+title+'      订单发送给GSK确认!')){
			var values='[';
		    var checked = $("input:checked");//检查单选框并拼接为json格式
			if(checked.length<1){
				values='';
			}else{
		    	for(var i=0;i<checked.length;i++){
					values+='{code:"'+checked[i].value+'",id:"'+checked[i].name+'"},';
		    	}
				values=values.substring(0,values.length-1); 
				values+=']';
			}
			var batch_name = $("#batch_name").val();
			$.ajax({
		        method : 'post',
		        url : '/portal/createGskOrderAction.do',
		        data:{ 
		        	goods: values,
		        	orderno: orderno,
		        	batch_name : batch_name
		    	}, 
		        //async : false,
		        dataType : 'json',
		        success : function(data) {
		            if(data){
		            	$.messager.alert('提示',"创建销售订单成功！"); 
		            	$('#tt').tabs('close',title);
		            	$("#tba_span").css("display",true);
		            }else{
		            	$.messager.alert('提示',"创建销售订单失败！");
		            }
		        },
		        error : function() {
		            $.messager.alert('异常','创建销售订单异常！');
		        }
		    }); 
		} 
	}
	
	
</script>

JSP:

<body >
	<div id="cc" class="easyui-layout" data-options="fit:true">
		<input type="hidden" id="batch_name" /> 
	    <input type="hidden" id="title_tb" /> 
	    <div data-options="region:'west',title:'订单商品库存',split:true" style="width:350px;">
	    	<table id="dgStock"></table>
	    </div>   
	    <div data-options="region:'center',title:'订单详细'" style="padding:5px;background:#eee;">
	    	<div id="tt" class="easyui-tabs" fit="true"></div>
	    </div>   
	</div> 
</body> 

STRUTS：

<span style="white-space:pre">	</span>    <action path="/listGskOrderAction" scope="request" type="portal.sysweb.gsk2.action.ListGskOrderAction" validate="false">
	      <forward name="" path="" />	      
	    </action>
	    <action path="/listGskOrderDetailAction" scope="request" type="portal.sysweb.gsk2.action.ListGskOrderDetailAction" validate="false">
	      <forward name="" path="" />
	    </action>
	    <action path="/listGskOrderStockDetailAction" scope="request" type="portal.sysweb.gsk2.action.ListGskOrderStockDetailAction" validate="false">
	      <forward name="" path="" />
	    </action>
	    <action path="/createGskOrderAction" scope="request" type="portal.sysweb.gsk2.action.CreateGskOrderAction" validate="false">
	      <forward name="" path="" />
	    </action>

Action:

public class ListGskOrderAction extends Action {
	
	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		ActionForm_UserInfo userInfo = (ActionForm_UserInfo) request
				.getSession().getAttribute("UserInfo");
		int page = Integer.parseInt(request.getParameter("page"));
		int rows = Integer.parseInt(request.getParameter("rows"));
		Gsk2Dao dao = new Gsk2Dao();		
		Pagination pagination = dao.listUploadGskOrder(page,rows,userInfo.getUserid(),userInfo.getCompany_id());
		JSONObject json = new JSONObject();
		json.put("total", pagination.getMaxElements());
		json.put("rows", pagination.getPaginationList());
		json = JSONObject.fromObject(json);
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(json.toString());
		response.getWriter().flush();
		response.getWriter().close();
		return null;
	}

}

public class ListGskOrderDetailAction extends Action{
	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		ActionForm_UserInfo userInfo = (ActionForm_UserInfo) request
				.getSession().getAttribute("UserInfo");
		List<Hashtable> list = null;
		Gsk2Dao dao = new Gsk2Dao();		
		String batch_name = request.getParameter("batch_name");
		String type = request.getParameter("type");
		if("1".equals(request.getParameter("update_flag")))
		new InterfaceFactory().dealUploadGSKInterface(null,null,batch_name,null);
		if(type.equals("stock"))
			list = dao.listGskOrderCheckStock(batch_name);	
		if(type.equals("order"))
			list = dao.listUploadGskOrderDetail(userInfo.getUserid(), userInfo.getCompany_id(),batch_name);	
		if(type.equals("info")){
			String orderno = request.getParameter("orderno");
			list = dao.listUploadGskOrderInfo(userInfo.getUserid(), userInfo.getCompany_id(),batch_name,orderno);
		}
		JSONArray arr = JSONArray.fromObject(list);
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(arr.toString());
		response.getWriter().flush();
		response.getWriter().close();
		return null;
	}
}

public class ListGskOrderStockDetailAction extends Action{
	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		String goods_opcode = request.getParameter("goods_opcode");
		String client_id = request.getParameter("client_id");
		Gsk2Dao dao = new Gsk2Dao();
		ActionForm_UserInfo actionForm_UserInfo = (ActionForm_UserInfo) request
				.getSession().getAttribute("UserInfo");
		String company_id = actionForm_UserInfo.getCompany_id();
		//String stack = dao.queryGoodsStackByCompanyId(goods_opcode,company_id);
		String stack = dao.queryGoodsStackByCompanyId(goods_opcode);
		int sale_valid = dao.queryGoodsCompanyRefByCompanyId(client_id, company_id, goods_opcode);
		StringBuffer strb = new StringBuffer();
		strb.append("{")
		.append("\"stack\":").append("\""+stack+"\"")
		.append(",\"sale_valid\":").append("\""+sale_valid+"\"")
		.append("}");
		response.getWriter().write(strb.toString());
		response.getWriter().flush();
		response.getWriter().close();
		return null;
	}
}

public class CreateGskOrderAction extends Action {
	
	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		ActionForm_UserInfo actionForm_UserInfo = (ActionForm_UserInfo) request
				.getSession().getAttribute("UserInfo");
		String msg = "false";
		Gsk2Dao dao = new Gsk2Dao();
		try {
			String order_no = request.getParameter("orderno");
			String batch_name = request.getParameter("batch_name");
			String jsonStr = request.getParameter("goods");
			if(null != jsonStr && !"".equals(jsonStr)){
				JSONArray jsonArray = JSONArray.fromObject(jsonStr);
				for(int i=0;i<jsonArray.size(); i++){
					JSONObject jsonJ = jsonArray.getJSONObject(i);
					String goods_opcode = jsonJ.getString("code");
					int id = jsonJ.getInt("id");
					int goods_id = dao.queryGoodsIdByCode(goods_opcode);
					boolean flag = dao.updateGskOrderCodeAndGoodIdById(goods_id, goods_opcode, id);
				}
			}
			dao.createGskOrder(order_no, batch_name);
			msg="true";
		} catch (Exception ex1) {
			ex1.printStackTrace();
		}
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(msg.toString());
		response.getWriter().flush();
		response.getWriter().close();
		return null;
	}

}

Dao:

public List listUploadGskOrderInfo(String user_id, String sys_provide_id,
			String batch_name,String orderid) {
		String sql = " select * " + " from v_gsk_order t "
				+ " where t.USER_ID = '" + user_id + "' "
				+ " and t.COMPANY_ID = '" + sys_provide_id + "' "
				+ " and t.EXEC_FLAG = 'UPLOAD' " + " and t.BATCH_NAME = '"
				+ batch_name + "' and t.SZVR01 = '"+orderid+"' order by t.SZVR01,t.SZEDCT,t.ID";
		//System.out.println("listUploadGskOrderInfo:"+sql);
		List list = null;
		try {
			DataManage db = new DataManage();
			list = db.executeQuerys(sql);
		} catch (Exception ex) {
			ex.printStackTrace();
		}
		return list;
	}

public boolean updateGskOrderCodeAndGoodIdById(int goods_id,String goods_opcode,int id){
		String strSql = "update gsk_order gor set "
				+ "gor.szlitm='"+goods_opcode+"',gor.goods_id='"+goods_id+"',gor.goods_opcode='"+goods_opcode+"'"
				+ " where gor.id='"+id+"'";
		try {
			DataManage db = new DataManage();
			System.out.println("updateGskOrderCodeAndGoodIdById："+strSql);
			db.exeUpdate(strSql);
			return true;
		} catch (Exception ex) {
			ex.printStackTrace();
		}
		return false;
	}

public int queryGoodsCompanyRefByCompanyId(String client_id,String company_id,String goods_opcode){
		String sql = "select count(*) from  goods_company_ref gcr "
				+ "where  gcr.client_id = "+client_id+" "
				+ "and gcr.provide_id = "+company_id+" "
				+ "and gcr.goods_id = (select cg.goods_id  "
				+ "from com_goods cg "
				+ "where cg.goods_opcode = '"+goods_opcode+"' "
				+ "and cg.org_id =1001) ";
		int num = 0;
		DataManage db = null;
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;
		try {
			db = new DataManage();
			//System.out.println("queryGoodsCompanyRefByCompanyId："+sql);
            conn = db.getConnection();
            conn.setAutoCommit(false);
            stmt = conn.createStatement();
            rs = stmt.executeQuery(sql);
            if (rs.next()) {
            	num = rs.getInt(1);
            }
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			try {
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return num;
	}