项目中要用到easyui，使用也有几年时间了，刚开始使用还不错，毕竟只是简单的增删改查数据，不过到后面越来越觉得easyui不如extjs了，好多复杂一点的问题，easyui表现就力不从心了，题外话就讲到这吧，下面看看这个问题是如何解决的：

$(function () {

   $.fn.zTree.init($("#tree"), setting);

    initTopoConfig();

    showTopo(0);

    stage.wheelZoom = 0.85; // 设置鼠标缩放比例

    $("#undo").hide();

});

//初始化拓扑图配置

function initTopoConfig() {

    $("#center").append('');

    var canvas = document.getElementById('canvas');

    $("#main").panel({

        onResize: function (w, h) {

            canvas.width = w-30;

            canvas.height = h - 20;

        }

    });

    stage = new JTopo.Stage(canvas);

    scene = new JTopo.Scene(stage);

    setScene();

}
<body onselectstart="return false" class="easyui-layout" style="margin: -1px;">

    <div id="myposition" data-options="region:'west',split:true,title:'交换机列表'" style="width: 250px;">

        <ul id="tree" class="ztree">

        </ul>

    </div>

    <div id="center" data-options="region:'center',border:false,fit:true">

        <div id="main" fit="true">

            <div id="tool" style="background-color: #f5f5f5; border-bottom: 1px solid #ddd">

                <table>

                    <tr>

                        <td>

                            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addRouter()">

                                添加路由</a>

                        </td>

                        <td>

                            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addChildrenTopo()">

                                添加子图</a>

                        </td>

                        <td>

                            <a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true" onclick="save()">

                                保存</a>

                        </td>

                        <td>

                            <a href="#" class="easyui-linkbutton" iconcls="icon-zoomin" plain="true" onclick="zoomout()">

                                放大</a>

                        </td>

                        <td>

                            <a href="#" class="easyui-linkbutton" iconcls="icon-zoomout" plain="true" onclick="zoomin()">

                                缩小</a>

                        </td>

                        <td>

                            <a href="#" class="easyui-linkbutton" iconcls="icon-resize" plain="true" onclick="fitContent()">

                                自适应</a>

                        </td>

                        <td>

                            <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" style="text-align: center"

                                data-options="iconCls:'icon-reload'" onclick="javascript:location.reload();">刷新页面</a>

                        </td>

                        <td id="undo">

                            <a href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="before()">

                                返回上一级</a>

                        </td>

                    </tr>

                </table>

            </div>

            <canvas id="canvas"></canvas>

        </div>

总结：要把id为tool的div放到main里面，要不然就会出现自适应不成功的问题。

easyui panel自适应问题的更多相关文章

  1. easyui panel自适应浏览器宽度

    一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...

  2. easyUI panel组件

    easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  4. 修改easyui panel 默认样式

    有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就 ...

  5. easyui tabs内容panel自适应窗体宽度方法

    废话不说,直接上代码: $('#Teacherwin_details').window({ title: '查看教职工信息', width: 800, height: 520, top: ($(win ...

  6. easyui 布局自适应

    最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局(easyui-layout)的问题,经过 ...

  7. EasyUI datagrid自适应问题解决

    在使用js 动态创建EasyUI datagrid时,如果设置fit为true,在显示的时候数据的高度为固定高度不能自适应 解决办法是把fit设为false. 但这样设置后又有个问题,如果把colum ...

  8. EasyUI - Panel 面板控件

    效果: html代码: <div id="p" style="padding: 10px;"> <p>panel content.< ...

  9. easyui panel异步获取后台数据在前台显示

    我在使用easyui的时候,想做一个向下图所示的效果,这个panel的样式已经做好了,想从后台异步获取json数据,然后填入到文本框中,不知道哪位大神能给点指导?万分感谢! 放入表单中,使用form对 ...

随机推荐

  1. 算法：图（Graph）的遍历、最小生成树和拓扑排序

    背景 不同的数据结构有不同的用途,像:数组.链表.队列.栈多数是用来做为基本的工具使用,二叉树多用来作为已排序元素列表的存储,B 树用在存储中,本文介绍的 Graph 多数是为了解决现实问题(说到底, ...

  2. Android Gradle Plugin指南（四）——測试

    原文地址:http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Testing 5.Testing(測试) 构建一个測试 ...

  3. mysql错误：this authentication plugin is not supported

    this authentication plugin is not supported 应用程序连接mysql docker一直报错:this authentication plugin is not ...

  4. 如何优化JAVA代码

    通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化.一般有两种方案:即优化代码或更改设计方法.我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性能 ...

  5. Kafka实现细节（三）

    如果你第一次看kafka的文章,请先看<分布式消息系统kafka初步> 之前有人问kafka和一般的MQ之间的区别,这个问题挺难回答,我觉得不如从kafka的实现原理来分析更为透彻,这篇将 ...

  6. 《Java核心技术 卷II 高级特性(原书第9版)》

    <Java核心技术 卷II 高级特性(原书第9版)> 基本信息 原书名:Core Java Volume II—Advanced Features(Ninth Edition) 作者: ( ...

  7. WKT

    WKT - 概念 WKT(Well-known text)是一种文本标记语言,用于表示矢量几何对象.空间参照系统及空间参照系统之间的转换.它的二进制表示方式,亦即WKB(well-known bina ...

  8. 25个精致的IPHONE 6和APPLE WATCH原型下载！

    自iPhone 6 和Apple Watch那场的发布会后,很多设计师开始创作相关的原型素材,值得感谢的是,这些作品有好多都无私分享到了网上,不仅可个人使用,也可商用.今天我们收集了从这组免费的素材中 ...

  9. IOS调试—断点调试以及动态输出

    在开发App的过程中,需要反复的修改和优化我们的代码,特别是当程序出现bug,需要快速的找出错误的原因,进行修改,以保证程序的正确执行. 断点调试,是最常用最简单的一种调试方式,可以一步步跟踪程序执行 ...

  10. python3 UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 30: illegal multibyte sequence

    昨天用用python3写个日志文件,结果报错UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 30: ...