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);
                              }

                          }
                      });
                 }

//添加事件
                 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"));

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

对以上代码的解释:

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

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

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

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

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

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

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

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

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

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

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

遍历全部的数据行,

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

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

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

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

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

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

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

html标签不是显示值,因此不能看成字符算;

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

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]]);
                                }

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

若是当前的s的长度比以前的该列的字符数大,那么直接设置当前字符数为最大值

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

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

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

var fontSize=12;

 var fontSize=12;

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

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

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

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

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

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

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

转载注明请地址

easyUI版本:jQuery-easyui-1.2.5

若是你们发现其中不足,请指出,谢谢!

自适应以后效果图:

自适应以前效果图: