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

若是你們發現其中不足,請指出,謝謝!

自適應以後效果圖:

自適應以前效果圖: