zoukankan      html  css  js  c++  java
  • easyui panel自适应问题

    项目中要用到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=" 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里面,要不然就会出现自适应不成功的问题。

  • 相关阅读:
    几道php基础面试题
    【转载】VMware下LINUX的虚拟机增加磁盘空间
    【转载】给VM虚拟机增加硬盘容量
    虚拟机扩大硬盘的方法
    【转载】Linux i386+源码中常见宏标识tag的定义
    【转载】Linux下编辑生成.mo文件
    【转载】解决 Subversion 的 “svn: Can't convert string from 'UTF-8' to native encoding” 错误
    【转载】Ubuntu下SVN安装和配置
    【转载】关于shell中的basename
    tar的-t参数使用
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/4760780.html
Copyright © 2011-2022 走看看