关于easyui的datagrid detailview的初次点击出现的重叠错位问题

先上问题的效果图

由上图可以知道，当点击按钮的时候，会出现详情页将下面的数据挤出到别的位置，正确的效果图，应该是这样子的：

我们来看代码是怎么写的：

      
			      view: detailview,   
			      detailFormatter:function(index,row){    
				        return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';    
				    },    
			    onExpandRow: function(index,row){  
			    	var dishid= $(this).datagrid('getRows')[index].dishid; 
			        $('#ddv-'+index).datagrid({    
			        	url:"../tDcglDcrz/selectDcDetail.action",
			        	queryParams:{'e.dishid':dishid},
			    		columns:[[
			    			        {field:'username',title:'点餐人'},
			    			        {field:'dishname',title:'菜肴名称'} ,
			    			        {field:'amount',title:' 菜肴数量'},
			    			        {field:'price',title:'菜肴价格'} ,
			    			        {field:'rzrq',title:'点餐日期'} ,
			    		]],
			    		onLoadSuccess:function(){    
			                $('#_list_tj').datagrid('fixDetailRowHeight',index);    
		                    setTimeout(function () {
			                        $('#' + id).next().css('height', tr.height());//设置没展开的前部分的高度，由于启用了计时器，会闪一下
		                     }, 0);
			            }    
			        });    
			    } 
			});	

网上找了很多的datagrid detailview的例子，最后终于在参考了神贴之后找到解决问题的方法：

    view: detailview,   
			      detailFormatter:function(index,row){    
				        return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';    
				    },    
			    onExpandRow: function(index,row){  
			    	var o=$('#ddv-'+index);
			    	var dishid= $(this).datagrid('getRows')[index].dishid; 
			        $('#ddv-'+index).datagrid({    
			        	url:"../tDcglDcrz/selectDcDetail.action",
			        	queryParams:{'e.dishid':dishid},
			    		columns:[[
			    			        {field:'username',title:'点餐人'},
			    			        {field:'dishname',title:'菜肴名称'} ,
			    			        {field:'amount',title:' 菜肴数量'},
			    			        {field:'price',title:'菜肴价格'} ,
			    			        {field:'rzrq',title:'点餐日期'} ,
			    		]],
			    		onLoadSuccess:function(){    
			                $('#_list_tj').datagrid('fixDetailRowHeight',index);    
		                    setTimeout(function () {
		                    	  var tr=o.closest('tr');
					                id = tr.prev().attr('id'); //此子表格父行所在行的id
			                        id = id.replace(/-2-(\d+)$/, '-1-$1'); //detailview没有展开的前部分的id是有规则的
			                        //通过下面的这2个示例你应该不难看出改变的是什么
			                        //datagrid-row-r1-1-0
			                        //datagrid-row-r1-2-0
			                        $('#' + id).next().css('height', tr.height());//设置没展开的前部分的高度，由于启用了计时器，会闪一下
		                     }, 0);
			            }    
			        });    
			    } 
			});