easyui点开页面，根据tabs到其他页面时，再回到这个页面。easyui-dataGrid才会自适应改变宽度长度

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui点开页面，根据tabs到其他页面时，再回到这个页面。easyui-dataGrid才会自适应改变宽度长度相关的知识，希望对你有一定的参考价值。

是属性设置的不正确吗。TD的长度宽度都没错，设置的dataGrid的高宽也是100%，但是就是少一点，第二次加载这个页面，才会填充满

第一加载的时候 在table上右键审查元素，看布局。。上图吧 骚年 参考技术A 如何让网页适应不同分辨率
解决思路：
在不同分辨率下看到的网页版面格式有很大差别，甚至有可能错位。导致这种差别的原因，主要是因为网页中用了绝对定位的层，并且页面内容设置为居中，这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的分辨率，然后让页面或排版做出相应变化。
方法一：做为不同的分辨率做不同的页，然后做个引导页，获取到客户端屏幕的分辨率后转向到相应页
具体步骤：
1. 先捕获用户的分辨率。

水平分辨率：screen.width
垂直分辨率：screen.height

2.再用页面跳转的方法转到相应页。

location.replace(screen.width+".htm")

或者：

location.replace(screen.height+".htm")

3.完整代码。

<script language="javascript">
<!--
location.replace(screen.width+".htm");
//-->
</script>

技巧：screen.width 也可以改成 screen.availWidth。
提示：
l language="JavaScript" 指定脚本所用语言为 JavaScript,大部分浏览器的默认客户端脚本语言就是 JavaScript，所以也可以省略不写。
l <!-- 和 //--> 两个标识的作用是通知不支持 JavaScript 浏览器忽略两标识间的所有 JavaScript 代码，一般情况下可以省略不写。
l JavaScript 语句与 C 语言一样用分号”;”结束，但也可以省略不写，每一新行表示开始一条新语句。
l screen.width+".htm" 在进行字符串连接后得到诸如 800.htm，1024.htm 之类的文件名。
l 可以在把完整代码存成单独一页作为引导页。
试一试：读者可以试着用assign方法实现页面跳转。
方法二：根据文档显示区域宽度重新调整层的定位。
具体步骤：
1. 获取文档显示区域的宽度。

document.body.offsetWidth

2.判断对象是否为层。

function isLayer(obj)
with(obj.currentStyle)
return (position=="absolute"&&left!="")


3.完整代码。

<script language="JavaScript">
<!--
function isLayer(obj) //判断对象是否为层的函数
/*不用 style 而用 currentStyle 的原因是因为有些层不是直接在标签内写 CSS 的，这时用 style 取不到值*/
with(obj.currentStyle) //返回布尔值true或false
return (position=="absolute"&&left!="")

//800为800X600分辨率下窗口最大化时document.body.offsetWidth的值
var iWidth=800
window.onload=function init()
//匹配页面中所有标签名为DIV元素，以数组形式返回对象
var divs=document.getElementsByTagName("DIV")
for(var i=0;i<divs.length;i++)//遍历所有DIV标签
if(isLayer(divs[i]))//判断对象是否为层，是则调整它的 X 坐标
divs[i].runtimeStyle.posLeft=parseInt(divs[i].currentStyle.left)+(document.body.offsetWidth-iWidth)/2
iWidth=document.body.offsetWidth //保存当前文档显示区域的宽度

//-->
</script>
<body onresize="init()">
<div id=demo style="position:absolute;left:50px;top:100px;width:200px;height:200px;border:1px solid #000">Layer1</div>
<div id=demo1 style="position:absolute;left:250px;top:50px;width:200px;height:200px;border:1px solid #000">Layer2</div>

注意：
l 必须确保所有层的标签为 DIV。
l 程序中的 demo 和 demo1 两个层只是测试用的，在实际就用时可以删掉。
技巧：如果所有层都是直接在标签内的定义的，可以把 currentStyle 和runtimeStyle 改成 style。
提示：
l JavaScript 的单行注释是以一对正斜杠”//”开始，多行注释以一个正斜杠加一个星号的组合(/*)开始,并以其逆向顺序 (*/)结束。
l window.onload 表示在页面加载完成后触发。
l onresize="init()" 表示在窗口大小改变时触发名为 init 的函数。
分析：屏幕分辨率先是影响到文档显示区域宽度(document.body.offsetWIdth)大小，然后文档显示区域宽度大小进一步影响到层的X轴定位和页面内容居中部分的相对位置，所以只要根据文档显示区域宽度大小来重新调整层的X轴坐标就行了。
特别提示
Javascript脚本的代码原则上是要求放在代码的 <head> 与 </head> 间，但放到其它标签窗口内也可以正常运行，方法二中代码运行后效果如图 3.1 和 3.2 所示：

图 3.1 窗口最大化时层的

图 3.2 窗口缩小后的层的位置

特别说明

方法一中用到了 location 对象的 replace 和 assign 方法来加载目标文档。
1. location对象的replace方法是将指定的文档替换当前文档。
2. location对象的assign方法是装入新的html文档。
方法二中用了 currentStyle、runtimeStyle 和 style 三个对象来捕获目标对象的样式设置。
1. currentStyle对象代表在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
2. runtimeStyle对象代表居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
3. style对象代表给定元素所有可能的内嵌样式的当前设置

EasyUI创建异步树形菜单和动态添加tab页面

创建异步树形菜单

  1. 创建树形菜单的ul标签 
    <ul class="easyui-tree" id="treeMenu">
</ul>
    View Code
  2. 写js代码，对菜单的ul标签元素使用tree函数 
    $(function(){
    $(\'#treeMenu\').tree({
        url:\'tree_data.json\'  //url的值是异步获取数据的页面地址 
    });
});
    View Code
  3. 写用来异步获取数据的php页面(tree_data.json页面)。
    返回的需是Json值(此处用数组代替从数据库获取的数据，以省略连接数据库过程) 
    $result = [];

//节点一
$prodArr = [
    "id" => 1,
    "text" => "商品管理",
    "state" => "open",
    "children" => [
        [
            "id" => 2,
            "text" => "添加商品",
            "state" => "open",
            "attributes" => [
                "url" => "http://abc.com/test.php"
            ]
        ],
        [
            "id" => 3,
            "text" => "修改商品",
            "state" => "open",
            "attributes" => [
                "url" => "http://abc.com/test2.php"
            ]
        ]
    ]
];

//节点二
$newsArr = [
    "id" => 10,
    "text" => "新闻管理",
    "state" => "open",
    "children" => [
        [
            "id" => 12,
            "text" => "添加新闻",
            "state" => "open"
        ],
        [
            "id" => 13,
            "text" => "修改新闻",
            "state" => "open"
        ]
    ]
];

//节点三
$userArr = [
    "id" => 20,
    "text" => "用户管理",
    "state" => "open",
    "children" => [
        [
            "id" => 22,
            "text" => "添加用户",
            "state" => "open"
        ],
        [
            "id" => 23,
            "text" => "修改用户",
            "state" => "open"
        ]
    ]
];

Array_push($result, $prodArr, $newsArr, $userArr);
echo json_encode($result);
    View Code

    说明：
    节点的属性：
    id：节点ID,可以作为参数来异步向页面地址获取子节点数据
    text：节点文本
    state：节点状态。取值为open(缺省默认值)或close。当设置为close时,会自动异步获取子节点的数据
    checked：指明节点是否被选中。
    attributes：自定义属性
    children：以数组的形式包含子节点       (更多细节知识可查看easyui官网中tree知识点)

 到这，异步树形菜单就完成了。

 

动态添加标签页tab

  1.  创建用来包裹标签页tab的外层标签 
    <div id="contentTabs" class="easyui-tabs" style="width:100%;height:100%;">
</div>
    View Code
  2. 在js中定义addTab函数 
    function addTab(title, url){
    if ($(\'#contentTabs\').tabs(\'exists\', title)){
        $(\'#contentTabs\').tabs(\'select\', title);
    } else {
        var content = \'<iframe scrolling="auto" frameborder="0"  src="\'+url+\'" style="width:100%;height:100%;"></iframe>\';
        $(\'#contentTabs\').tabs(\'add\',{
            title:title,
            content:content,
            closable:true
        });
    }
}
    View Code
  3. 在树形菜单的点击事件函数中调用addTab函数 
    $(function(){
    $("#treeMenu").tree({
        onClick:function(node){
            if (node.attributes !== undefined && node.attributes.url !== undefined) {
                addTab(node.text,node.attributes.url);    
            }                                                                
        }
    });
});
    View Code

 

最后，如图显示

以上是关于easyui点开页面，根据tabs到其他页面时，再回到这个页面。easyui-dataGrid才会自适应改变宽度长度的主要内容，如果未能解决你的问题，请参考以下文章

easyui tab标签页 怎么在页面加载的时候一次性把三个标签页的内容全部加载完？

JavaScript提高：006：ASP.NET使用easyUI TABS标签updatepanel

09. easyui-tabs 配合 iframe 使用，请求两次等问题

关于easyui的layout内页面跳转的问题...

EasyUI Tabs + Yii2.0实现iframe方式打开页面（解决共用静态文件引入加载的问题）

easyui两个页面的TAB显示问题