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');
}

效果圖: