easyui设置界面的高度自适应

  单独设置界面中特定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: 10%;
             80%;
        }

        .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="60%">
                    <div class = "easyui-panel  bottom-border" style="100%">
                        <div style="float:left;30%;">
                            <div  class = "easyui-panel line none-border" style="text-align:center;">
                                <span>材料编码:</span>
                            </div>
                        </div>
                        <div style="float:left;70%">
                            <div  class = "easyui-panel line left-border" data-options="fit:true" >
                                <span>(自动生成)</span>
                            </div>
                        </div>
                    </div>
                    <div class = "easyui-panel  bottom-border" style="100%">
                        <div style="float:left;30%;text-align:center">
                            <div  class = "easyui-panel line none-border" style="text-align:center;">
                                <span>材料名称:</span>
                            </div>
                        </div>
                        <div style="float:left;70%">
                            <div  class = "easyui-panel line left-border" data-options="fit:true">
                                <input class="easyui-textbox"  style="75%;" value ="xxxxx"/>
                            </div>
                        </div>
                    </div>
                    <div class = "easyui-panel  bottom-border" style="100%" >
                        <div style="float:left;30%;text-align:center">
                            <div  class = "easyui-panel line none-border" style="text-align:center;">
                                <span>规格型号:</span>
                            </div>
                        </div>
                        <div style="float:left;70%">
                            <div  class = "easyui-panel line left-border" data-options="fit:true">
                                <input class="textbox easyui-textbox" style="75%;" value ="xx"/>
                            </div>
                        </div>
                    </div>
                    <div class = "easyui-panel  bottom-border" style="100%">
                        <div style="float:left;30%;text-align:center">
                            <div  class = "easyui-panel line none-border" style="text-align:center;">
                                <span>单位:</span>
                            </div>
                        </div>
                        <div style="float:left;70%">
                            <div  class = "easyui-panel line left-border" data-options="fit:true" >
                                <input class="easyui-textbox" style="75%" value ="m"/>
                            </div>
                        </div>
                    </div>
                    <div class = "easyui-panel  bottom-border" style="100%">
                        <div style="float:left;30%;text-align:center">
                            <div  class = "easyui-panel line none-border" style="text-align:center;">
                                <span>预算价:</span>
                            </div>
                        </div>
                        <div style="float:left;70%">
                            <div  class = "easyui-panel line left-border" data-options="fit:true" >
                                <input class="easyui-textbox" style="75%" value ="200"/>
                            </div>
                        </div>
                    </div>
                    <div class = "easyui-panel  bottom-border" style="100%">
                        <div style="float:left;30%;text-align:center">
                            <div  class = "easyui-panel line none-border" style="text-align:center;">
                                <span>市场价:</span>
                            </div>
                        </div>
                        <div style="float:left;70%">
                            <div  class = "easyui-panel line left-border" data-options="fit:true" >
                                <input class="easyui-textbox none-border" style="75%" value ="300"/>
                            </div>
                        </div>
                    </div>
                    <div class = "easyui-panel  bottom-border" style="100%">
                        <div style="float:left;30%;text-align:center">
                            <div  class = "easyui-panel line none-border" style="text-align:center;">
                                <span>归属章节:</span>
                            </div>
                        </div>
                        <div style="float:left;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="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','20%',align:'center'">材料编码</th>
                                <th data-options="field:'name','20%',align:'center'">材料名称</th>
                                <th data-options="field:'type','8%',align:'center'">规格型号</th>
                                <th data-options="field:'uinit','8%',align:'center'">单位</th>
                                <th data-options="field:'budgetary_price','20%',align:'center'">预算价</th>
                                <th data-options="field:'market_price','20%',align:'center'">市场价</th>
                            </tr>
                        </thead>
                    </table>
            </div>
            <div data-options="region:'south'" style="height:50px;">
                <div style ="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>
View Code
原文地址:https://www.cnblogs.com/shenchao/p/4653851.html