easyui正常表单和可编辑表单级联问题

hanfeng 发布于 2014/07/14 17:47
阅读 1K+
收藏 1

如下图:供应商和商品是属于级联关系。当我们选择供应商后,商品下拉框只显示选定供应商的商品。如供应商1只有商品1和商品2,供应商2有商品3和商品4这样的。

我的代码如下: 供应商下拉框数据


//供应商选择
	$("#supplierBox").combogrid({
		//value:'SP00001', //默认供应商
		panelWidth:500,
		pagination:true,//底部分页
		rownumbers:true,//显示行数
        fitColumns:false,//自适应列宽
        striped:true,//显示条纹
        pageSize:10,//每页记录数
	    url: '${ctx}/base/supplierCombogrid.action',
	    idField:'spCode',
	    textField:'spName',
	    mode:'remote',
	    fitColumns:true,
	    columns:[[
			{field:'spCode',title:'供应商编号',width:80},    
			{field:'spName',title:'供应商名字',width:100} 
	    ]],
	    
	    onHidePanel: function(){  
	    	spCode = $('#supplierBox').combobox('getValue'); 
	   	 	console.info("供应商sp:"+spCode);
	    }
	});



可编辑商品列:



{ field: 'gdCode',  title: '商品编号', width: 70, formatter:function(value,row){
                 return row.gdName;
             } ,editor: {
						 type:"combogrid",
						 options:{
							cache:false,
							required:true,
							panelWidth:500,
							pagination:true,//底部分页
							rownumbers:true,//显示行数
					        fitColumns:false,//自适应列宽
					        striped:true,//显示条纹
					        pageSize:10,//每页记录数
						    //url: goodsUrl,
						    idField:'gdCodeCn',
						    textField:'gdNameCn',
						    //mode:'remote',
						    fitColumns:true,
						    columns:[[
						           {field:'gdCodeCn',title:'商品编码',width:60},    
		                                      {field:'gdNameCn',title:'商品名称',width:100}, 
		                                      {field:'price',title:'采购价',width:100}, 
						    ]],
						    onSelect:function(rowIndex, rowData){
						    	//alert(rowData.price);
						    	//选择商品 填充表单
						    	//填充默认数量
						    	var edGdamount = purchaseOrderDetail.datagrid('getEditor', {index:editIndex_spGoods,field:'amount'});
						    	$(edGdamount.target).numberbox("setValue",1);
						    	
						    	//填充单价
						    	var edGdPrice = purchaseOrderDetail.datagrid('getEditor', {index:editIndex_spGoods,field:'price'});
						    	$(edGdPrice.target).numberbox("setValue",rowData.price);
						    	 
						    	 //填充税率
						    	var edGdtaxRate = purchaseOrderDetail.datagrid('getEditor', {index:editIndex_spGoods,field:'taxRate'});
					    	 	$(edGdtaxRate.target).numberbox("setValue",0);
						    },
						    onLoadSuccess:function(data){
						    	console.log("2==>"+goodsUrl);
						    }
		
					     }} },



新增商品:



//新增商品
function addPOGoods(){
	if (endEditing()){		
		purchaseOrderDetail.datagrid('appendRow',{});
        editIndex_spGoods = purchaseOrderDetail.datagrid('getRows').length-1;
        purchaseOrderDetail.datagrid('beginEdit', editIndex_spGoods);    
        
        //var edGoods = purchaseOrderDetail.datagrid('getEditor', {index:editIndex_spGoods,field:'gdCode'});
        //$(edGoods.target).combogrid("grid").datagrid('loadData' , goodsData);  
        loadGoodsCombogrid(editIndex_spGoods);//加载商品数据
    }
}


新增商品开启可编辑,加载商品数据:



function loadGoodsCombogrid(index){
	 console.log("1");
	 spCode = $('#supplierBox').combobox('getValue'); 
	 console.info("供应商:"+spCode);
     var edGoods = purchaseOrderDetail.datagrid('getEditor', {index:index,field:'gdCode'});
     goodsUrl = "${ctx}/base/supplierGoods!supplierGoodsComboGrid.action?spCode="+spCode;
     console.log("地址:"+goodsUrl);
     $.ajax({  
    	 async:false,
    	 cache: false,
         url:url,  
         dataType : 'json',  
         type : 'POST',  
         success: function (data){  
             $(edGoods.target).combogrid("grid").datagrid('loadData' , data);  
        	 //$("#goodsComboGrid").combogrid("grid").datagrid('loadData' , data);
         }  
   	}); 
}

spCode为选择供应商时的供应商编号,为全局参数。

如果直接在editor里面使用

goodsUrl = "${ctx}/base/supplierGoods!supplierGoodsComboGrid.action?spCode="+spCode;
spCode不是我选择供应商时选择的供应商编号,而是页面第一次加载第一次选择的编号。不知道为啥。

对于上述问题求解。如果有更好的级联方式请讨论下。谢谢


加载中
返回顶部
顶部