1. 程式人生 > >JqGrid自適應列寬度

JqGrid自適應列寬度

國內外的網站都翻了一遍都沒有找到一個通用的jqgrid能自適應列寬的方法,要麼是太繁瑣,要麼是不能用,通過參照http://vipshow.iteye.com/blog/1812381這篇文章,自己稍作修改寫了個通用的,希望能幫到那些苦苦尋覓的人。程式碼如下:
首先設定div樣式,該樣式隨意放,只要能找到就行

<!-----用來計算單元格內容實際長度的--------->  
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" style="position:absolute;top:-9999px">
<div class="ui-jqgrid-view"> <div class="ui-jqgrid-bdiv"><div style="position: relative;"><table cellspacing="0" cellpadding="0" border="0"><tr class="ui-widget-content jqgrow ui-row-ltr" style="table-layout:table"><td id="tdCompute" style="background:#eee;width:auto"
>
</td></tr></table></div></div></div></div> <!-----用來計算單元格內容實際長度的--------->

然後js:

//重新調整jqgrid每列的寬度
function jqgridColResize(){  
    var td=$('#tdCompute')//獲取計算實際列長度的容器  
        ,tds//臨時儲存列  
        ,arr=[];//用於儲存最大的列寬  
     //遍歷每行獲得每行中的最大列寬  
    $('.ui-jqgrid-htable tr,.ui-jqgrid-btable tr:gt(0)'
).each(function(){ $(this).find('td,th').each(function(idx){ arr[idx]=Math.max(arr[idx]?arr[idx]:0,td.html($(this).text())[0].offsetWidth); }) }); $('.ui-jqgrid-labels th').each(function(idx){this.style.width=arr[idx]+'px'});//設定頁頭單元格寬度 $('.ui-jqgrid-btable tr:eq(0) td').each(function(idx){this.style.width=arr[idx]+'px'});//設定內容表格中控制單元格寬度的單元格,在第一行 }

使用時在gridComplete這個方法裡所有的邏輯都執行完後,在最後呼叫jqgridColResize就行,如果你寫的有表格寬度自適應還需要在那個函式裡再呼叫一次,不然頁面尺寸改變後,這個就不起作用了。使用方法如下:
jqgridColResize使用方法

效果圖:
這裡寫圖片描述