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>

时间： 2024-10-07 20:24:26

easyui设置界面的高度自适应的相关文章

关于UIWebView设置高度自适应的问题

- (void)viewDidLoad { [super viewDidLoad]; _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 66, 320, 480)]; //中间还有其他控件 //创建webView时要设置一个临时的frame,不然的话webViewDidFinishLoad代理方法中设置webView高度自适应之后,webView会有很多空白 _webView = [[UIWebView alloc]in

jquery easyui combobox 高度自适应

data-options="required:true,editable:false,panelHeight:'auto'"  加上panelHeight:'auto'即可 列合并的情况 columns: [ [ { field: 'nj', title: '年级', width: 80, align: 'center',rowspan:2 }, { field: 'bj', title: '班级', width: 80, align: 'center',rowspan:2 }, {

textarea高度自适应（可设置最大高度）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

设置背景图片的两种方式，并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

android设置GridView高度自适应，实现全屏铺满效果

使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gridView ) { // 获取gridView的adapter ListAdapter adapter = gridView.getAdapter(); if (adapter == null) { return; } // 固定列宽,有多少列 int col = 2;// gridView.ge

input高度自适应。

转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时,输入框的高度会随着改变,直到输入完毕.顿时觉得这个细节做得挺不错的,可以效仿下.下面分享2种实现textarea高度自适应的做

跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.这

iOS UITableView+FDTemplateLayoutCell 配合AutoLayout分分钟教你实现动态高度自适应

UITableView里面的Cell固定高度那是基本不可能了,很多功能和界面都会涉及到高度自适应,而且电商类的尤其普遍,之前都是自己算啊算,代码写的非常多,逻辑还没写,光这布局UI和高度计算都能接近1000了,写完之后关键出点Bug整个人都不好了 当时的是这样的: 突然在github上看到UITableView+FDTemplateLayoutCell这个库 传送门:点击打开链接 刚看到的时候是这样的: 能  用   么 ??? 真  的  这  么 叼 ??? 第一次用的时候是这样的: 哥们,

textarea如何实现高度自适应？

转自:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时,输入框的高度会随着改变,直到输入完毕.顿时觉得这个细节做得挺不错的,可以效仿下.下面分享2种实现textarea高度自适应的做