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%;

            width: 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="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 ="200"/>

                            </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 ="300"/>

                            </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>
View Code

 

你可能感兴趣的:(easyui)