• 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
  • 相关阅读:
    LeetCode 225 Implement Stack using Queues 用队列实现栈
    LeetCode 232 Implement Queue using Stacks 两个栈实现队列
    LeetCode 583 Delete Operation for Two Strings 删除两个字符串的不同部分使两个字符串相同,求删除的步数
    LeetCode 230 Kth Smallest Element in a BST 二叉搜索树中的第K个元素
    LeetCode 236 Lowest Common Ancestor of a Binary Tree 二叉树两个子节点的最低公共父节点
    LeetCode 148 Sort List 链表上的归并排序和快速排序
    LeetCode 069 Sqrt(x) 求平方根
    webpack新版本4.12应用九(配置文件之模块(module))
    webpack新版本4.12应用九(配置文件之输出(output))
    webpack新版本4.12应用九(配置文件之入口和上下文(entry and context))
  • 原文地址:https://www.cnblogs.com/shenchao/p/4653851.html
Copyright © 2020-2023  润新知