EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

来源：互联网发布：python 运维管理系统编辑：程序博客网时间：2024/05/21 17:43

EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

tabs代码如下：

复制代码代码如下:

<div id="tabs" class="easyui-tabs"> 
　　<div title="tabs1"> 
　　tabs1 
　　</div> 
<div title="tabs2"> 
　　tabs2 
　　</div> 
</div> 

如果id="tabs"的div未设置宽度和高度，easyUI默认的宽度和高度是auto，这样在google浏览器下显示正常，但是在IE下默认不显示任何内容，并且和dialog还有冲突（dialog无法弹出窗口）。

无奈去google搜索，找到一个解决方法如下：
1. 去掉div里的class="easyui-tabs"
2. 加上一段JS

复制代码代码如下:

<script type="text/javascript"> 
$(function(){ 
　　$("#tabs").tabs({ 
　　　　width:$("#tabs").parent().width(), 
　　　　height:$("#tabs").parent().height() 
　　}); 
}); 
</script> 

加上这段代码后，发现容器会很高，因为他获得是父容器的height
解决方法：
JS修改为

复制代码代码如下:

$('#tabs').tabs({ 
　　width: $("#tabs").parent().width(), 
　　height: "auto" 
}); 

Ok，搞定

EasyUI的treegrid组件动态加载数据问题的解决办法

搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的，不过以往利用datagrid的reload方法加参数的方式加载查询结果数据，可是treegrid却只执行reload不能加载带参数的查询结果，可能是做了限制，如下代码不能加载查询结果：

复制代码代码如下:

<table id='treegrid' class='easyui-treegrid' url='/User/List'></table>
$('#treegrid').treegrid('reload',{'name':'mikel'});

于是又去官方论坛搜索相关问题，发现一个有价值的帖子，茅塞顿开，为什么要指望treegrid组件来异步查询数据，为什么不先异步，然后在加载返回的json数据呢？代码如下：

复制代码代码如下:

function loadData()
{
$.post('/User/List',{name:'mikel'},function(data){
$('#treegrid').treegrid('loadData',data);
},'json');
}

0 0