zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    商城----项目宏观(1)
    Java动态代理-JDK自带实现
    git提交出现remote rejected master -> XX changes closed
    openstack认证实践
    转一篇Git代码回滚技巧
    线段树解决leetcode307. Range Sum Query
    The Skyline Problem leetcode 详解
    编程容易犯错的几个地方
    c++中小项堆声明和使用
    C++中int转为char 以及int 转为string和string 转int和字符串的split
  • 原文地址:https://www.cnblogs.com/shenchao/p/4653851.html
Copyright © 2011-2022 走看看