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

响应数据格式:

easyUI在html代码中结构:

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

以下就是自适应代码:

//添加事件
 function columnWidthAutoResize(){
   
   var cls=arguments[0];//需要自适应的列的名称
   
   $('#grid').datagrid({
   onLoadSuccess:function(data){
   var rows=data.rows;//得到行数据
   var columnMaxCharacter=new Array();//该列最大字符数
    //遍历所有行数据,获得该列数据的最大字符数
    for(var i=0;i<rows.length;i++){
    for(var j=0;j<cls.length;j++){//遍历需要设置的列
     var s=eval("rows["+i+"]."+cls[j]);
     //屏蔽html标签
     s=s.replace("<center>","");
     s=s.replace("</center>","");
     if((typeof columnMaxCharacter[cls[j]])=='undefined'){
      columnMaxCharacter[cls[j]]=0;
     }
     
 if(s.length>columnMaxCharacter[cls[j]]){
  columnMaxCharacter[cls[j]]=s.length;
     }
 
    }
    }
    
    //设置列宽度和字体
    for(var j=0;j<cls.length;j++){
      //得到该列的字体
    // alert($("td[field='"+cls[j]+"'] div").get(0).currentStyle);
     // var fontSize=$("td[field='"+cls[j]+"'] div").get(0).currentStyle.fontSize;//获得字体大小
     // fontSize= fontSize.replace("px","");//去掉px方便运算
     var fontSize=12;
     var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度
 //设定该列的宽度
     $("td[field='"+cls[j]+"'] div").width(w);
     }
 
   }
 });
 }

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

  columnWidthAutoResize(new Array("orgname","showtime"));

对以上代码的解释:

var cls=arguments[0];//需要自适应的列的名称

接受传入的需要自适应的列的名称数组;

var rows=data.rows;//得到行数据

得到从服务器端响应的数据行集合

var columnMaxCharacter=new Array();//该列最大字符数

记录需要设定列的字符最大数 (只是对中文考虑了,没有考虑英文) 最后的格式键值的形式 数组名['需要设定列名']=循环后最大字符

 for(var i=0;i<rows.length;i++){

遍历所有的数据行,

for(var j=0;j<cls.length;j++){//遍历需要设置的列

var s=eval("rows["+i+"]."+cls[j]);

动态脚本 执行取出该行对应属性的字符串 rows[1].orgname 等效

//屏蔽html标签
                     			     s=s.replace("<center>","");
                     			     s=s.replace("</center>","");

html标签不是显示值,所以不能当作字符算;

if((typeof columnMaxCharacter[cls[j]])=='undefined'){
                     					columnMaxCharacter[cls[j]]=0;
                     				}

如果第一次 没有给该列设置最大字符数是undefined 给默认值0 方便后面的对比

 if(s.length>columnMaxCharacter[cls[j]]){
                                    	columnMaxCharacter[cls[j]]=s.length;
                     				}
                     				//alert(columnMaxCharacter[cls[j]]);
                     			}

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

 for(var j=0;j<cls.length;j++){

这个循环遍历的是得到每一列最大字符数之后的数组,cls对应columnMaxCharacter的键值的形式

 var fontSize=12;

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

   var w=fontSize*(columnMaxCharacter[cls[j]]+1);//求出宽度

这里是用 字体大小 * 该列最大字符数 + 1 得到列的宽度

  $("td[field='"+cls[j]+"'] div").width(w);

得到表头设置宽度,这里得到的就是表头,看上面第二张图片

转载注明请地址

easyUI版本:jquery-easyui-1.2.5

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

自适应之后效果图:

自适应之前效果图:

评论

1 楼 yiguxianyun 2016-12-20