easyUI datagrid 列宽自适应(简单 图解)（转）

响应数据格式:

easyUI在html代码中结构:

发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了;

以下就是自适应代码:

[javascript] view plain copy
 print?
  1. //添加事件  
  2.                  function columnWidthAutoResize(){  
  3.                        
  4.                      var cls=arguments[0];//需要自适应的列的名称  
  5.                        
  6.                       $('#grid').datagrid({  
  7.                           onLoadSuccess:function(data){  
  8.                              var rows=data.rows;//得到行数据  
  9.                              var columnMaxCharacter=new Array();//该列最大字符数  
  10.                               //遍历所有行数据,获得该列数据的最大字符数  
  11.                               for(var i=0;i<rows.length;i++){  
  12.                                  for(var j=0;j<cls.length;j++){//遍历需要设置的列  
  13.                                      var s=eval("rows["+i+"]."+cls[j]);  
  14.                                      //屏蔽html标签  
  15.                                       s=s.replace("<center>","");  
  16.                                       s=s.replace("</center>","");  
  17.                                      if((typeof columnMaxCharacter[cls[j]])=='undefined'){  
  18.                                          columnMaxCharacter[cls[j]]=0;  
  19.                                      }  
  20.                                        
  21.                                     if(s.length>columnMaxCharacter[cls[j]]){  
  22.                                         columnMaxCharacter[cls[j]]=s.length;  
  23.                                      }  
  24.                                       
  25.                                  }  
  26.                               }  
  27.                                 
  28.                               //设置列宽度和字体  
  29.                               for(var j=0;j<cls.length;j++){  
  30.                                   //得到该列的字体  
  31.                               //    alert($("td[field='"+cls[j]+"'] div").get(0).currentStyle);  
  32.                               // var fontSize=$("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize;//获得字体大小  
  33.                                  //  fontSize= fontSize.replace("px","");//去掉px方便运算  
  34.                                   var fontSize=12;  
  35.                                   var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度  
  36.                                   //设定该列的宽度  
  37.                                   $("td[field='"+cls[j]+"'] div").width(w);  
  38.                               }  
  39.                                
  40.                           }  
  41.                       });  
  42.                  }  

下面在看如何调用:传入的参数的那一列需要自适应宽度:

[javascript] view plain copy
 print?
  1. columnWidthAutoResize(new Array("orgname","showtime"));  

对以上代码的解释:

[javascript] view plain copy
 print?
  1. var cls=arguments[0];//需要自适应的列的名称  
接受传入的需要自适应的列的名称数组;

[javascript] view plain copy
 print?
  1. var rows=data.rows;//得到行数据  
得到从服务器端响应的数据行集合

[javascript] view plain copy
 print?
  1. var columnMaxCharacter=new Array();//该列最大字符数  
记录需要设定列的字符最大数 (只是对中文考虑了,没有考虑英文) 最后的格式键值的形式   数组名['需要设定列名']=循环后最大字符

[javascript] view plain copy
 print?
  1. for(var i=0;i<rows.length;i++){  
遍历所有的数据行,

[javascript] view plain copy
 print?
  1. for(var j=0;j<cls.length;j++){//遍历需要设置的列  

[javascript] view plain copy
 print?
  1. var s=eval("rows["+i+"]."+cls[j]);  
动态脚本 执行取出该行对应属性的字符串  rows[1].orgname 等效


[javascript] view plain copy
 print?
  1. //屏蔽html标签  
  2.                                      s=s.replace("<center>","");  
  3.                                      s=s.replace("</center>","");  
html标签不是显示值,所以不能当作字符算;

[javascript] view plain copy
 print?
  1. if((typeof columnMaxCharacter[cls[j]])=='undefined'){  
  2.                                         columnMaxCharacter[cls[j]]=0;  
  3.                                     }  
如果第一次 没有给该列设置最大字符数是undefined 给默认值0 方便后面的对比


[javascript] view plain copy
 print?
  1. if(s.length>columnMaxCharacter[cls[j]]){  
  2.                                     columnMaxCharacter[cls[j]]=s.length;  
  3.                                     }  
  4.                                     //alert(columnMaxCharacter[cls[j]]);  
  5.                                 }  

如果当前的s的长度比之前的该列的字符数大,那么直接设置当前字符数为最大值

[javascript] view plain copy
 print?
  1. for(var j=0;j<cls.length;j++){  
这个循环遍历的是得到每一列最大字符数之后的数组,cls对应columnMaxCharacter的键值的形式

[javascript] view plain copy
 print?
  1. var fontSize=12;  
这个是默认字体的大小,为什么写死值,是因为暂时没有找到在火狐下得到默认字体大小的方法 $("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize(火狐不支持)

[javascript] view plain copy
 print?
  1. var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度  
这里是用 字体大小 * 该列最大字符数 + 1 得到列的宽度

[javascript] view plain copy
 print?
  1. $("td[field='"+cls[j]+"'] div").width(w);  
得到表头设置宽度,这里得到的就是表头,看上面第二张图片

转载注明请地址

easyUI版本:jQuery-easyui-1.2.5

如果大家发现其中不足,请指出,谢谢!


自适应之后效果图:

自适应之前效果图:




posted @ 2017-07-01 13:59  星朝  阅读(694)  评论(0)  编辑  收藏  举报