EasyUI DataGrid 窗口大小自适应怎么解决

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CRM.WebForm1" %>
<!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>CRM界面</title>
   <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/jquery.easyui.min.js"></script>
    <link href="Scripts/themes/default/easyui.css" rel="stylesheet" />
    <link href="Scripts/icon.css" rel="stylesheet" />
    <script src="Scripts/locale/easyui-lang-zh_CN.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
        }
        #a1 {
            background-image: url('Images/Top/logo_bg.jpg');
        }
        #a2 {
            background-image: url('Images/Top/CRM.jpg');
            height: 50px;
            width: 100%;
            background-repeat: no-repeat;
            background-size: 125px;
        }
        #aa ul li {
            border: 1px solid #c7c7c7;
            background-color: #ede7e7;
        }
            #aa ul li a {
                font-size: 20px;
            }
    </style>
    <script type="text/javascript">
        $(function () {
            //第一个节点
            var date = [{
                "id": "1",
                "text": "销售机会管理",
                "attributes": { "url": "sal_change.html" }
            }, {
                "id": "2",
                "text": "客服开发计划",
                "attributes": { "url": "" }
            }];
            function addmenu() {
                $("#a").tree({
                    data: date,
                    onClick: function (node) {
                        if (node.attributes != null) {
                            addpanel(node);
                        }
                    }
                });
            };
            //第二个节点
            var dat = [{
                "id": "3",
                "text": "客服信息管理",
                "attributes": { "url": "" }
            }, {
                "id": "4",
                "text": "客服流失管理",
                "attributes": { "url": "" }
            }];
            function addmen() {
                $("#b").tree({
                    data: dat,
                    onClick: function (node) {
                        if (node.attributes != null) {
                            addpanel(node);
                        }
                    }
                });
            };
            //第三个节点
            var datq = [{
                "id": "5",
                "text": "服务创建",
                "attributes": { "url": "" }
            }, {
                "id": "6",
                "text": "服务分配",
                "attributes": { "url": "" }
            }, {
                "id": "7",
                "text": "服务处理",
                "attributes": { "url": "" }
            }, {
                "id": "8",
                "text": "服务归档",
                "attributes": { "url": "" }
            }];
            function addmenq() {
                $("#c").tree({
                    data: datq,
                    onClick: function (node) {
                        if (node.attributes != null) {
                            addpanel(node);
                        }
                    }
                });
            };
            //第四个节点
            var datw = [{
                "id": "9",
                "text": "客服贡献分析",
                "attributes": { "url": "" }
            }, {
                "id": "10",
                "text": "客服构成分析",
                "attributes": { "url": "" }
            }];
            function addmenw() {
                $("#d").tree({
                    data: datw,
                    onClick: function (node) {
                        if (node.attributes != null) {
                            addpanel(node);
                        }
                    }
                });
            };
            //第五个节点
            var datf = [{
                "id": "11",
                "text": "数据词典管理",
                "attributes": { "url": "" }
            }, {
                "id": "12",
                "text": "客服构成管理",
                "attributes": { "url": "" }
            }];
            function addmene() {
                $("#e").tree({
                    data: datf,
                    onClick: function (node) {
                        if (node.attributes != null) {
                            addpanel(node);
                        }
                    }
                });
            };

            //第六个节点
            var datr = [{
                "id": "13",
                "text": "用户管理",
                "attributes": { "url": "" }
            }, {
                "id": "14",
                "text": "角色管理",
                "attributes": { "url": "" }
            }];
            function addmenr() {
                $("#f").tree({
                    data: datr,
                    onClick: function (node) {
                        if (node.attributes != null) {
                            addpanel(node);
                        }
                    }
                });
            };
            function addpanel(treenode) {
                console.info(treenode);
                $("#tt").tabs("add", {
                    title: treenode.text,
                    href: treenode.attributes.url,
                    loadingMessage: "数据加载中",
                    closable: true
                });
            }
            addmenw();
            addmene();
            addmenr();
            addmenq();
            addmen();
            addmenu();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="cc" class="easyui-layout" style="width: 600px; height: 750px;" data-options="fit:true">
                <div data-options="region:'north'" style="height: 70px;" id="a1">
                    <div id="a2">
                        <p style="margin: 20px 130px; font-size: 30px; color: #2e5d9d; float: left;">美斯坦福客户关系管理系统</p>
                    </div>
                </div>
                <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"></div>
                <div data-options="region:'west'" style="width: 250px;">
                    <div  class="easyui-accordion" style="width: 248px; height: 579px;">
                        <div id="a" title="营销管理" data-options="iconCls:'icon-save'" style="overflow: auto;"> </div>
                        <div id="b" title="客户管理" data-options="iconCls:'icon-reload'">
                          <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                        </div>
                        <div id="c" title="服务管理" data-options="iconCls:'icon-reload'">
                         
                        </div>
                        <div id="d" title="统计报表" data-options="iconCls:'icon-reload'">
                       
                        </div>
                        <div id="e" title="基础数据" data-options="iconCls:'icon-reload'">
                           
                        </div>
                        <div id="f" title="权限管理" data-options="iconCls:'icon-reload'">
                           
                        </div>
                    </div>
                </div>  
                <div id="tt" data-options="region:'center',fit:true" class="easyui-tabs" style=" background: #eee; background-image: url('Images/Shared/welcome.gif');">
                    <div title="Tab1" style="padding: 20px; display: none;">
                        tab1   
                    </div>
                    <div title="Tab2" data-options="closable:true" style="overflow: auto; padding: 20px; display: none;">
                        tab2   
                    </div>
                    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding: 20px; display: none;">
                        tab3   
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

当你的datagrid从另一个页面嵌进来时出现塌陷 须在id="tt"这里将 fit:true修改为fit:false
完美显示

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

EasyUI DataGrid 窗口大小自适应怎么解决

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭