easyui datagrid自适应浏览器宽度

最新推荐文章于 2024-10-02 05:39:15 发布

iteye_20240

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量127

点赞数

文章标签： javascript ViewUI

在使用easyui的datagrid时，需要考虑到浏览器不同的像素问题，所以，在使用时，我们需要自己写一个函数

code：

[javascript]view plaincopy 
   
 functiongetWidth(percent){ 
 return$(window).width()*percent; 
 } 

这样在初始化时：

[javascript]view plaincopy 
   
 $("#tt").datagrid({ 
 width:getWidth(0.6) 
 }); 

当然，有时候我们会考虑浏览器缩放，也要改变其中显示，这时，加上一个resize事件就可以了

[javascript]view plaincopy 
   
 $(window).resize(function(){ 
 //alert("change...."); 
 $("#tt").datagrid({ 
 width:getWidth(0.6) 
 }); 
 ); 

甚至，我们需要考虑到列宽也需要改变（因情况，条件而定，这里举一例），我们需要在写一个函数：

[javascript]view plaincopy 
   
 functionfixWidthTable(percent){ 
 returngetWidth(0.6)*percent; 
 } 

下面是完整的代码：

[html]view plaincopy 
   
 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
 <html> 
 <head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> 
 <title>DataGridContextMenu-jQueryEasyUIDemo</title> 
 <linkrel="stylesheet"type="text/css"href="../themes/default/easyui.css"> 
 <linkrel="stylesheet"type="text/css"href="../themes/icon.css"> 
 <linkrel="stylesheet"type="text/css"href="demo.css"> 
 <scripttype="text/javascript"src="../jquery-1.7.1.min.js"></script> 
 <scripttype="text/javascript"src="../jquery.easyui.min.js"></script> 
 <script> 
  
 functionfixWidthTable(percent){ 
 returngetWidth(0.6)*percent; 
 } 
  
 functiongetWidth(percent){ 
 return$(window).width()*percent; 
 } 
  
 $(function(){ 
 $(window).resize(function(){ 
 //alert("change...."); 
 $("#tt").datagrid({ 
 width:getWidth(0.6) 
 }); 
 }); 
  
 $('#tt').datagrid({ 
 url:'datagrid_data2.json', 
 title:'DataGrid-ContextMenu', 
 width:getWidth(0.6), 
 height:'auto', 
 fitColumns:true, 
 columns:[[ 
 {field:'itemid',title:'ItemID',width:fixWidthTable(0.12)}, 
 {field:'productid',title:'ProductID',width:fixWidthTable(0.15)}, 
 {field:'listprice',title:'ListPrice',width:fixWidthTable(0.12),align:'right'}, 
 {field:'unitcost',title:'UnitCost',width:fixWidthTable(0.12),align:'right'}, 
 {field:'attr1',title:'Attribute',width:fixWidthTable(0.38)}, 
 {field:'status',title:'Status',width:fixWidthTable(0.11),align:'center'} 
 ]], 
 onHeaderContextMenu:function(e,field){ 
 e.preventDefault(); 
 if(!$('#tmenu').length){ 
 createColumnMenu(); 
 } 
 $('#tmenu').menu('show',{ 
 left:e.pageX, 
 top:e.pageY 
 }); 
 } 
 }); 
 }); 
  
 functioncreateColumnMenu(){ 
 vartmenu=$('<divid="tmenu"style="width:100px;"></div>').appendTo('body'); 
 varfields=$('#tt').datagrid('getColumnFields'); 
 for(vari=0;i<fields.length;i++){ 
 $('<diviconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu); 
 } 
 tmenu.menu({ 
 onClick:function(item){ 
 if(item.iconCls=='icon-ok'){ 
 $('#tt').datagrid('hideColumn',item.text); 
 tmenu.menu('setIcon',{ 
 target:item.target, 
 iconCls:'icon-empty' 
 }); 
 }else{ 
 $('#tt').datagrid('showColumn',item.text); 
 tmenu.menu('setIcon',{ 
 target:item.target, 
 iconCls:'icon-ok' 
 }); 
 } 
 } 
 }); 
 } 
 </script> 
 </head> 
 <body> 
 <h2>DataGrid-ContextMenu</h2> 
 <divclass="demo-info"style="margin-bottom:10px"> 
 <divclass="demo-tipicon-tip"></div> 
 <div>Rightclicktheheaderofdatagridtoshowcontextmenu.</div> 
 </div> 
  
 <tableid="tt"></table> 
  
 </body> 
 </html> 

不过在做测试中，遇到了各种奇怪的问题，今天早上一看，发现没有昨天的问题了，暴汗················

也不知道是什么原因！

如果这文有幸有高手看到，并发现了问题，或者有解决方案，贴出来也让俺瞅瞅········先谢谢啦························

上面的窗口大小改变事件中用的是重新加载，这样速度会慢很多，而API中提供了resize方法，所以改为：

[javascript]view plaincopy 
   
 $("#tt").datagrid("resize",{width:getWidth(0.6)});  

iteye_20240

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫