如果讓子頁面iframe裏面的easyui的datagrid的不出現滾動條,而在父頁面出現滾動條

父頁面 : 

父頁面有一個id爲easyIframe的iframe,iframe裏面是一個datagrid

<div class="easyui-layout" id="myLayout" data-options="fit:true,border:false"  >
	<div data-options="region: 'center', border: false,title: '',iconCls:''" >
       <div>
           <iframe id="easyIframe" src="queryQuestionNorm?dataType=<s:property value='dataType'/>" 
              frameborder="0" scrolling="auto" height="170px" width="100%"></iframe>
       <div style="text-align: center" id="btnDiv">
 	   <a onClick="appendTextareas();" href="javascript:void(0);"  class="easyui-linkbutton" data- 
            options="plain: true, iconCls: 'icon-add'">添加定額</a>
    </div>
</div>

父頁面js :

/*添加定額按鈕點擊事件*/
function appendTextareas(){
	$('#easyIframe')[0].contentWindow.appendTextareas();
}

子頁面 : 

<div class="easyui-layout" data-options="fit: true" id="iframeLayout">
	<div data-options="region: 'center', border: false,fit: false,title: '',iconCls:''" id="centerLayout">
		<table id="myTabel"></table>
	</div>
</div>

子頁面 js: 

$(function() {
   $('#myTabel').datagrid({
       ......
       onLoadSuccess:function(data){
          setHeight();//根據子頁面的datagrid的實際高度,來設置父頁面iframe的高度
       }
   });
});

/**
 * 不讓datagrid出現滾動條,自適應高度
 * @returns
 */
function setHeight() {
    var height = initIframeHeight();
    //重置父頁面的layout
	resizeHeight(height);
}

/**
 * 設置子頁面的layout的center的高度,以及設置子頁面iframe所在父頁面的parent元素的高度
 * @returns
 */
function initIframeHeight(){
    //獲取iframe對象
	var $iframe = window.parent.$('#easyIframe');
    //獲取iframe的實際高度
	var height = getIframeHeight($iframe[0].contentWindow.document);
    //獲取iframe所在父元素裏面的其他元素的高度
	var height2 = window.parent.$('#btnDiv').height();
    //設置iframe的高度爲子頁面不出現滾動條的高度
	$iframe.height(height);
    //子頁面iframe裏面設置layout的center高度
	$('#centerLayout').height(height);
    //重置子頁面iframe的layout
	$('#iframeLayout').layout('resize');
    //設置父頁面iframe的parent父元素的高度
	$iframe.parent().height(height + height2);
	return height;
}

/**
 * 獲取iframe不出現滾動條的實際高度
 * @param doc
 * @returns
 */
function  getIframeHeight(doc) {
	var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
	var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
    //獲取iframe的原有的body的高度
	var height  = Math.max(cHeight, sHeight)
    //返回值爲iframe的body的高度和datagrid不出現滾動條需要額外加上的高度
	return  height+getDatagridTableHeight();
}

/**
 * 獲取datagrid的實際高度(不出現滾動條的高度)
 * @param doc
 * @returns
 */
function getDatagridTableHeight(){
    //這個不是滾動條所在頁面,不是datagrid的實際高度
	//var datagridHeight = $('#myTabel').parents('.datagrid-view').height();
    //這個是datagrid的實際高度
	var datagridHeight = $('#myTabel').parents('.datagrid-view').find('.datagrid-view2').find(".datagrid-btable").height();
	//datagrid-btable是沒有包括datagrid的頭部的,這裏把頭部的高度加上去,頭部高度是25
	datagridHeight += 25;
	var layoutHeight = $('#myTabel').parents('.layout-body').height();//獲取中部center的高度
	var subHeight = 0;//默認不出現滾動條,即額外增加的高度爲0
	if(layoutHeight < datagridHeight){
		//如果小於,即出現了滾動條,此時高度返回爲兩者之差,即中部center還需要增加這麼高的高度,纔不會出現滾動條
		subHeight = datagridHeight - layoutHeight;//不出現滾動條需額外增加的高度
	}else{
		//layout高度高了,改爲和datagrid一致
		//subHeight = layoutHeight - datagridHeight;
        //暫不處理,如果沒出現滾動條,就保持原高度,不改變center的高度爲datagrid的高度
	}
	return subHeight;
}

/**
 *重置父頁面的layout
 */
function resizeHeight(height){
	window.parent.$('#myLayout').layout('resize');
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章