easyui设置界面的高度自适应

时间:2024-01-13 12:22:38

  单独设置界面中特定region区时,高度自适应失败;设置整个界面时成功。实现代码在script块中,具体代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="add_material.aspx.cs" Inherits="Truelore.Fare.Web.add_material" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script> <style type="text/css"> body{
position: relative;
left: %;
width: %;
} .line {
height:32px;
} </style> <script type="text/javascript">
$(function () {
$('#_content').layout();
setHeight();
});
function setHeight() {
var c = $('#_content');
var p = c.layout('panel', 'center'); // get the center panel
var oldHeight = p.panel('panel').outerHeight();
p.panel('resize', { height: 'auto' });
var newHeight = p.panel('panel').outerHeight();
c.layout('resize', {
height: (c.height() + newHeight - oldHeight)
});
}
</script> </head>
<body>
<div id="_content" class = "easyui-panel">
<div style="height:240px">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west'" style="width:60%">
<div class = "easyui-panel bottom-border" style="width:100%">
<div style="float:left;width:30%;">
<div class = "easyui-panel line none-border" style="text-align:center;">
<span>材料编码:</span>
</div>
</div>
<div style="float:left;width:70%">
<div class = "easyui-panel line left-border" data-options="fit:true" >
<span>(自动生成)</span>
</div>
</div>
</div>
<div class = "easyui-panel bottom-border" style="width:100%">
<div style="float:left;width:30%;text-align:center">
<div class = "easyui-panel line none-border" style="text-align:center;">
<span>材料名称:</span>
</div>
</div>
<div style="float:left;width:70%">
<div class = "easyui-panel line left-border" data-options="fit:true">
<input class="easyui-textbox" style="width:75%;" value ="xxxxx"/>
</div>
</div>
</div>
<div class = "easyui-panel bottom-border" style="width:100%" >
<div style="float:left;width:30%;text-align:center">
<div class = "easyui-panel line none-border" style="text-align:center;">
<span>规格型号:</span>
</div>
</div>
<div style="float:left;width:70%">
<div class = "easyui-panel line left-border" data-options="fit:true">
<input class="textbox easyui-textbox" style="width:75%;" value ="xx"/>
</div>
</div>
</div>
<div class = "easyui-panel bottom-border" style="width:100%">
<div style="float:left;width:30%;text-align:center">
<div class = "easyui-panel line none-border" style="text-align:center;">
<span>单位:</span>
</div>
</div>
<div style="float:left;width:70%">
<div class = "easyui-panel line left-border" data-options="fit:true" >
<input class="easyui-textbox" style="width:75%" value ="m"/>
</div>
</div>
</div>
<div class = "easyui-panel bottom-border" style="width:100%">
<div style="float:left;width:30%;text-align:center">
<div class = "easyui-panel line none-border" style="text-align:center;">
<span>预算价:</span>
</div>
</div>
<div style="float:left;width:70%">
<div class = "easyui-panel line left-border" data-options="fit:true" >
<input class="easyui-textbox" style="width:75%" value =""/>
</div>
</div>
</div>
<div class = "easyui-panel bottom-border" style="width:100%">
<div style="float:left;width:30%;text-align:center">
<div class = "easyui-panel line none-border" style="text-align:center;">
<span>市场价:</span>
</div>
</div>
<div style="float:left;width:70%">
<div class = "easyui-panel line left-border" data-options="fit:true" >
<input class="easyui-textbox none-border" style="width:75%" value =""/>
</div>
</div>
</div>
<div class = "easyui-panel bottom-border" style="width:100%">
<div style="float:left;width:30%;text-align:center">
<div class = "easyui-panel line none-border" style="text-align:center;">
<span>归属章节:</span>
</div>
</div>
<div style="float:left;width:70%">
<div class = "easyui-panel line left-border" data-options="fit:true" style="text-align:center">
<a href='#' class='easyui-linkbutton' style="margin:2px 15px" >选择</a>
<a href='#' class='easyui-linkbutton' style="margin:2px 15px" >新建</a>
</div>
</div>
</div>
</div>
<div data-options="region:'east'" style="width:40%">
<div class="easyui-panel none-border" style="padding:5px;" >
<ul class="easyui-tree" data-options="url:'jsons/add_material_tree.json',method:'get',animate:true" style="border:none"></ul>
</div>
</div>
</div>
</div>
<div class = "easyui-panel line none-border" >
<a href='#' class='easyui-linkbutton' style="margin:2px" >导入Excel</a>
</div>
<div style="height:100%;">
<div data-options="region:'center'">
<table id = "_dg_json" class="easyui-datagrid none-border" data-options="rownumbers:true,singleSelect:true,collapsible:true,url:'jsons/add_material_datagrid.json',method:'get'" >
<thead>
<tr>
<th data-options="field:'code',width:'20%',align:'center'">材料编码</th>
<th data-options="field:'name',width:'20%',align:'center'">材料名称</th>
<th data-options="field:'type',width:'8%',align:'center'">规格型号</th>
<th data-options="field:'uinit',width:'8%',align:'center'">单位</th>
<th data-options="field:'budgetary_price',width:'20%',align:'center'">预算价</th>
<th data-options="field:'market_price',width:'20%',align:'center'">市场价</th>
</tr>
</thead>
</table>
</div>
<div data-options="region:'south'" style="height:50px;">
<div style ="width:100%;text-align:center">
<a href='#' class='easyui-linkbutton' style="margin:10px 25px" >保存</a>
<a href='#' class='easyui-linkbutton' style="margin:10px 25px" >取消</a>
</div>
</div>
</div>
</div>
</body>
</html>