jqGrid屬性介紹
阿新 • • 發佈:2017-07-03
表格 容器 blog height grid hid style idt 適應
一、jqGrid屬性:
width:
Grid的寬度,如果未設置,則寬度應為所有列寬的之和;如果設置了寬度,則每列的寬度將會根據shrinkToFit選項的設置,進行設置。
height :
Grid的高度,可以接受數字、%值、auto,默認值為150。
shrinkToFit:
此選項用於根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值,則每列寬度會根據width成比例縮放;如果shrinkToFit為false且設置了width值,則每列的寬度不會成比例縮放,而是保持原有設置,而Grid將會有水平滾動條。
autowidth:
默認值為false。如果設為true,則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段;如果當父容器尺寸變化了,同時也需要變化Grid的尺寸的話,則需要在自己的代碼中調用setGridWidth 方法來完成。
這些屬性只能是保證第一次時的寬度,當瀏覽器大小變化如還想讓表格寬度自適應,就需要用jqgrid的方法setGridWidth,它有兩個參數:new_width、shr,當第二個參數不設置時會按照shrinkToFit的設置值或默認值,而第一個參數則要設置的新的寬度值,所以可用js實現對瀏覽器寬度變化的自適應:
$(function(){ $(window).resize(function(){ $("#analyDataTab").setGridWidth($(window).width()*0.99); $("#charDataTab").setGridWidth(document.body.clientWidth*0.99); }); });
註:這裏的百分比可按自己需要來設定,也可直接是瀏覽器的寬度大小。
二、jqGrid保持顯示垂直滾動條
在IE中記錄比較少的時候,默認情況下不顯示垂直滾動條,會出現標題行與數據行位置對不 齊的情況,通過保持顯示垂直滾動條可以解決這個問題。
$( pGridId ).closest(".ui-jqgrid-bdiv").css({ ‘overflow-y‘ : ‘scroll‘ });
需要保持水平滾動條,則:
$( pGridId ).closest(".ui-jqgrid-bdiv ").css({ ‘overflow-x‘ : ‘scroll‘ });
三、動態顯示隱藏某一列
$("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid");
$("#grid_id").setGridParam().hideCol("colname").trigger("reloadGrid");
jqGrid屬性介紹