EASYUI如何把普通的一个<div>和datagrid放到一起,只出现一个滚动条

需求:

一个div里面放入元素,紧跟着这个div后面是一个easyui的datagrid,要求只出现一个滚动条,并且datagrid没有空白部分

• 主要是高度不够,north北部面板的各个元素需要紧挨在一起
• 不能在north里面的div和datagrid再套一层layout的north和center,因为layout的north和center是单独显示滚动条的

因为easyui的datagrid如果fit为true,那么它的高度为它的父节点的高度,父节点的高度是多少,它的高度也是多少,不会管父节点里面有没有其他的元素.这样会导致父节点的实际高度会多出很多,在datagrid的后面有很多空白部分,如何处理?

解决办法:

首先布局:div和datagrid放在一个layout里面,例如:

<div id="zdyLayout" class="easyui-layout"  data-options="fit: true">
     <div id="northPanel" data-options="region: 'north', border: false" style="height: 190px; overflow: auto;border-bottom-width: 1px;">
           <div id="isEndStepBtn2" style="height:180px">
              ......文字
           </div>
           <div style="height:20px" id="yslbDiv"><!-- 这个高度随便写,主要是给datagrid定义一个父元素,重新给高度用 -->
				<table id="yslb"></table>
	    	</div>
     </div>
     <div data-options="region: 'center', border: false,title: '',iconCls:''" style="border-right-width: 0px;padding:2px" id="myCener">
            ....中部面板
     </div>
</div>

然后咋datagrid的onloadSuccess里面加入函数(就是让datagrid加载出来数据了,好计算实际需要的高度)

$(function(){
   $("#yslb").datagrid({
      onLoadSuccess:function(data){
         clearNorthEmptyHeightForCenter();
      }
   });
});

/**
 * 让north北部部分各元素紧挨在一起,并且计算center最小高度,center不能出现滚动条
 * @returns
 */
function clearNorthEmptyHeightForCenter(){
	var $isEndStepBtn2 = $('#isEndStepBtn2');
	var isEndStepBtn2Height = 0;
	if($isEndStepBtn2.length > 0 && !$isEndStepBtn2.is(":hidden")){//如果隐藏了则不计算高度
		isEndStepBtn2Height = $isEndStepBtn2.height();
	}
	//判断是否有isEndStepBtn2
	var $isEndStepBtn2 = $('#isEndStepBtn2');
	var $thead = $('#northPanel').find(".datagrid-view2 .datagrid-header");
	var $body = $('#northPanel').find(".datagrid-view2 .datagrid-btable");
	var needDatagridHeight = $thead.height() + $body.height();//datagrid需要的高度
	var minNorthHeight = needDatagridHeight + isEndStepBtn2Height + 12;//north不出现滚动条旗的需要的最小高度为:datagrid的实际高度+上一个的div的高度
	layout = $('#zdyLayout');
	var datagridHeight = $('#northPanel').find('.datagrid-view').height();//datagrid的实际高度
	var panel = layout.layout('panel','north');  //get the north panel
	var northHeight = panel.height();
	var isScrollFlag = false;//标记north是否需要center提供高度
	if(minNorthHeight < northHeight){
		//north高度足够,超出不出现滚动条的最小高度,此时缩小north的高度,以增大center的高度,让center和north紧凑在一起
		panel.panel('resize',{height:minNorthHeight}); //设置north panel 新高度
		layout.layout('resize');
	}else{
		//north高度不够,出现滚动条,此时判断center是不是高度多余,如果有多余的高度,则center给出多余高度
		isScrollFlag = true;
	}
	//此时布局datagrid的父节点为datagrid的实际高度,让datagrid没有滚动条
	$('#yslbDiv').height(needDatagridHeight + 10);
	
	var minCenterHeight = window.$('#table11').height();//122
	var centerHeight = layout.layout('panel','center').height();
	//center不能出现滚动条
	if(centerHeight < minCenterHeight){
		//center高度不够,所以north给出最低宽度
		var sub = minCenterHeight - centerHeight;//给中部保留足够的宽度
		var panel = layout.layout('panel','north');  //get the north panel
		var allHeight = panel.height() - sub;
		panel.panel('resize',{height:allHeight}); //设置north panel 新高度
	}else{
		//center有多余高度,需要给north高度
		if(isScrollFlag){
			var sub = centerHeight - minCenterHeight;
			var panel = layout.layout('panel','north'); 
			panel.panel('resize',{height:northHeight + sub}); 
		}
	}
	layout.layout('resize');
}

效果图: