easy ui 可编辑datagrid 动态生成combobox 和动态计算机连个numberbox 中的值

代码比较简单，只是最开始用的时候有很多地方不是很懂，记录下来以便日后忘记了。

1、第一个combobox 是在页面加载的时候直接发送请求返回的的数据显示

2、第二个是根据第一个选中项来动态加载，通过onSelect方法来调用getGoodsTypes(thisid)

方法里先通过 var ed = $('#indexGoods').datagrid('getEditor', { index: lastIndex, field: 'goods_type_name' });来获取当前正在编辑当前行的goods_type_name这个列

然后通过ajax发送请求返回数据，然后通过$(ed.target).combobox('loadData',goodsTypeNames);这行代码把数据动态加载出来。

3、总价的计算和这个道理一样，只是有写地方没有想明白，后台查询帮助文档知道numberbox有一个onChange事件。

<script>
		var goodsNames="";
		var lastIndex;
		$.ajax({    
	        url:'Goods?type=getGoodsName',    
	        dataType : 'json',    
	        type : 'POST',    
	        async:false,  
	        success: function (data){
	        	goodsNames = data;  
	        }    
	  	}); 
	  	function goodsNamesFormatter(value){
	  	debugger;
			for(var i=0; i<goodsNames.length; i++){
				if (goodsNames[i].id == value) return goodsNames[i].goods_name;
			}
			return value;
		} 
	  	var goodsTypeNames = "";
	  	function getGoodsTypes(thisid){
	  		var ed = $('#indexGoods').datagrid('getEditor', {
		        index: lastIndex,
		        field: 'goods_type_name'
		    });
	  		$.ajax({    
		        url:'Goods?type=getGoodsTypeName&goodsid='+thisid,    
		        dataType : 'json',    
		        type : 'POST',    
		        async:false,  
		        success: function (data){
		        	goodsTypeNames = data;
		        	$(ed.target).combobox('loadData',goodsTypeNames);
		        	for(var i=0; i<goodsTypeNames.length; i++){
		        		$(ed.target).combobox('select',goodsTypeNames[i].id);
		        		return;
					}
		        }    
	  		});  
	  	}
	  	
	  	function goodsTypeNamesFormatter(value){
	  	debugger;
			for(var i=0; i<goodsTypeNames.length; i++){
				if (goodsTypeNames[i].id == value) return goodsTypeNames[i].type_name;
			}
			return value;
		}
		
		var indexId = $("#indexId").val();
		$(function(){
			$('#indexGoods').datagrid({
				//url:"Activity?type=IndexGoodsList&id="+indexId,
				fit:true,
				width:'650px',
				height:'auto',
				iconCls:'icon-edit' ,
				singleSelect:false,
        		rownumbers:true,//行号
				columns:[[   
	                {
		                field:'goods_name',
	                	title:'商品名称',
	                	width:440,
	                	align:'left',
	                	formatter:goodsNamesFormatter,
	                	editor:{type:'combobox',
	                			options:{valueField:'id',textField:'goods_name',data:goodsNames,required:true,
	                						onSelect:function(rec){
	                							getGoodsTypes(rec.id);
	                						}
	                					}
	                		   } 
	                },
	                {
	                	field:'goods_type_name',
	                	title:'商品类型',
	                	width:120,
	                	align:'left',
	                	formatter:goodsTypeNamesFormatter,
	                	editor:{type:'combobox',options:{valueField:'id',textField:'type_name',data:goodsTypeNames,required:true,panelHeight:'auto'}}  
	                },
	                {field:'goodscount',
	                 title:'数量',
	                 width:80,
	                 align:'left',
	                 editor:{type:'numberbox',
	                 		 options:{onChange:function(newValue,oldValue){setEditingZd();}}
	                 		}
	                },
		            {field:'goodsprice',
		             title:'单价',
		             width:80,
		             align:'left',
		             editor:{type:'numberbox',
		                	 options:{onChange:function(newValue,oldVale){setEditingZd();}}
		                	}
	                },
	                {field:'price',title:'总价',width:80,align:'left',editor:'numberbox'},
	                {field:'id',hidden:true }
			    ]],
				toolbar:[{
					text:'添加',
					iconCls:'icon-add',
					handler:function(){
					debugger;
					$('#indexGoods').datagrid('endEdit', lastIndex);
						$('#indexGoods').datagrid('appendRow',{
							goods_name:'',
							goods_type_name:'',
							goodscount:'',
							goodsprice:'',
							price:'',
							id:''
						});
						lastIndex = $('#indexGoods').datagrid('getRows').length-1;
						$('#indexGoods').datagrid('selectRow', lastIndex);
						$('#indexGoods').datagrid('beginEdit', lastIndex);
					}
				},'-',{
					text:'删除',
					iconCls:'icon-remove',
					handler:function(){
						debugger;
						//var row = $('#indexGoods').datagrid('getSelected');
						var rows = $('#indexGoods').datagrid('getSelections');
						if (rows.length){
							if(confirm("确定要删除所选数据吗？")){
								var jsonStr = "[";
								for(var i=0;i<rows.length;i++){
									var index = $('#indexGoods').datagrid('getRowIndex', rows[i]);
									$('#indexGoods').datagrid('deleteRow', index);
									jsonStr +="{goodsList_id:"+rows[i].id+"},"; 
								}
								jsonStr = jsonStr.substr(0,jsonStr.length-1);
								jsonStr +="]";
								delSpec(jsonStr);
							}
						}else{
							alert("请选择要删除数据！");
						}
					}
				},'-',{
					text:'保存',
					iconCls:'icon-save',
					handler:function(){
							debugger;
							var typeSub = $("#cc").val();
							if(typeSub==0){
								alert("请选择单据类型");
								return;
							}
							var userName = $("#userName").val();
							var userId = $("#userId").val();
							var type = 1;
							var stoageJson = "[{type:'"+type+"',typeSub:'"+typeSub+"',person:'"+userName+"',personId:'"+userId+"'}]";
							//只有新选择select的时候下面的Value的方式才会好使
							var edS = $('#indexGoods').datagrid('getEditor', {index:lastIndex,field:'goods_name'});
               				<span style="white-space:pre">		</span>var goodsName = $(edS.target).combobox('getText');
                			<span style="white-space:pre">		</span>var goodsValue = $(edS.target).combobox('getValue');
					<span style="white-space:pre">		</span>var ed = $('#indexGoods').datagrid('getEditor', {index:lastIndex,field:'goods_type_name'});
               				<span style="white-space:pre">		</span>var typeName = $(ed.target).combobox('getText');
                			<span style="white-space:pre">		</span>var typeValue = $(ed.target).combobox('getValue'); 

                			$('#indexGoods').datagrid('acceptChanges');
							var rows = $('#indexGoods').datagrid('getSelections');
							var jsonStr="[";
							var jsonUp="[";
							for(var i=0;i<rows.length;i++){
								var id = rows[i].id;
								if(id==""){
									jsonStr += "{goodsId:'"+rows[i].goods_name+"',typeId:'"+rows[i].goods_type_name+"',goodsCount:'"+rows[i].goodscount+"',goodsPrice:'"+rows[i].goodsprice+"',price:'"+rows[i].price+"'},";
								}else{
									jsonUp += "{indexGoodsId:'"+id+"',index_id:'"+indexId+"',goods_id:'"+rows[i].goods_id+"',goods_type_id:'"+rows[i].goods_type_id+"',goods_name:'"+goodsName+"',goods_type_name:'"+typeName+"',status:'"+rows[i].status+"',sort:'"+rows[i].sort+"'},";
								}
							}
							jsonStr = jsonStr.substr(0,jsonStr.length - 1);
							jsonStr +="]";
							jsonUp = jsonUp.substr(0,jsonUp.length - 1);
							jsonUp +="]";
							if(jsonStr.length>1){
								saveSpec(jsonStr,stoageJson);
							}
							if(jsonUp.length>1){
								upSpec(jsonUp);
							}
						}
				},'-',{
					text:'取消',
					iconCls:'icon-undo',
					handler:function(){
						$('#indexGoods').datagrid('rejectChanges');
					}
				}],
				onClickRow:function(rowIndex){
					if (lastIndex != rowIndex){
						$('#indexGoods').datagrid('endEdit', lastIndex);
						$('#indexGoods').datagrid('beginEdit', rowIndex);
					}
					//setEditing(rowIndex);
					lastIndex = rowIndex;
				}
			});
		});
		
		function setEditingZd(){
			debugger;
			var goodscount = $('#indexGoods').datagrid('getEditor', { index: lastIndex, field: 'goodscount'});
			var goodsprice = $('#indexGoods').datagrid('getEditor', { index: lastIndex,  field: 'goodsprice'});
			var price = $('#indexGoods').datagrid('getEditor',{index: lastIndex, field: 'price' });
		    <span style="white-space:pre">	</span>var cost = goodscount.target.val() * goodsprice.target.val();   
	        <span style="white-space:pre">	</span>$(price.target).numberbox('setValue',cost);  
		}
		
		function saveSpec(rows,main){
			debugger;
			  $.ajax({
		          url:"Goods",
		          data:"type=addMallStorage&&shuzu="+rows+"&&s_str="+main,
		          type:'post',
		          async:false,
		          success:function(data){
				  if(data==1){
					  	alert("商品入库成功！");
					  	$("#indexGoods").datagrid("reload");
					  	$("#tt").tabs('close','入库单');
					  	window.parent.parent.closeTab("入库单");
					  	
		              }else{
					  	alert("系统故障，联系开发人员");
		              }
		          }
		      });
		}
		
		function goodsTypeList(thisid){
			var url = "Activity?type=gotoIndexGoodsList&id="+thisid;
			window.parent.parent.addTab("商品列表", url);
		}
		
	</script>