如果让子页面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');
}

 

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