jQuery外掛來調整表列的大小

效果圖：

colResizable

colResizable是一個免費的jQuery外掛，旨在通過手動拖動列錨點來增強任何型別的HTML表物件，從而增加列重新調整大小的功能。它相容滑鼠和觸控裝置，並具有一些不錯的功能，如頁面重新整理或回發後的佈局持續性以及與百分比和基於畫素的表格佈局的相容性。它的體積很小（colResizable 1.0只有2kb），它與所有主流瀏覽器（IE7 +，Firefox，Chrome和Opera）完全相容。

用法

要使用此外掛，一旦jQuery被載入，指令碼引用必須被新增到文件的頭部分中的colResizable.min.js檔案中。為了增強一個表（或表的集合），用jQuery包裝器指向它並應用colResizable（）方法。

$(function(){
$("table").colResizable();
});

屬性

resizeMode：[type：string] [default：’fit’] [version：1.6] [values：’fit’，’flex’，’overflow’]

它用於設定resize方法的工作原理。那些是可能的價值觀：

‘fit’：這是預設的調整大小模型，其中調整列的大小不會改變表寬度，這意味著當列擴充套件時，下一個縮放。
‘flex’：在此模式下，如果父容器中有足夠的空間，表可以更改其寬度，每列可以獨立縮小或擴充套件。如果沒有足夠的空間，列將會調整其寬度。表不會比其父母大得多。
‘overflow’：允許使用父容器溢位來調整列的大小。
disable：[type：boolean] [default：false] [version：1.0]
當設定為true時，它旨在將所有以前新增的增強功能（如事件和此外掛分配的其他DOM元素）刪除到單個或集合的表中。在使用JavaScript從文件物件樹中刪除之前，還需要先將colResized表禁用到已經colResized表的任何DOM操作之前，例如新增列，行等。

disabledColumns：[type：int of int] [default：[]] [version：1.6]
要排除的列索引陣列，因此無法手動拖動。

liveDrag：[type：boolean] [default：false] [version：1.0]
當設定為true時，將在拖動列錨點時更新表格佈局。啟用liveDrag的CPU耗費更多，因此不推薦用於較慢的計算機，特別是在處理巨大或非常複雜的表時。

postbackSafe：[type：boolean] [default：false] [version：1.3]
此屬性可用於指定在回發或瀏覽器重新整理後，手動選擇的列寬度必須保持不變。此功能主要面向使用伺服器端邏輯（codebehind）建立的頁面，例如PHP或.NET，它僅與具有sessionStorage支援的瀏覽器（所有現代瀏覽器）相容。但是，如果您定位較早的瀏覽器（如IE7和IE8），則仍可以使用sessionStorage.js來模擬sessionStorage。請注意，有些瀏覽器（IE和FF）在直接從本地檔案系統執行網站時不啟用sessionStorage物件，因此如果要測試此功能，建議您通過Web伺服器檢視網站或使用Chrome或Opera等不受此限制的瀏覽器。不要擔心相容性問題，

partialRefresh：[type：boolean] [default：false] [version：1.5]
如果表位於updatePanel內部或使用ajax進行的任何其他型別的部分頁面重新整理，則此屬性應設定為true。表的ID在部分部分重新整理之前和之後應該相同。

innerGripHtml：[type：string] [default：empty string] [version：1.0]
其目的是通過定義要在列中使用的HTML來提供一些視覺反饋來允許列錨定製。它可以以廣泛的方式用於獲得非常不同的輸出，並且可以通過將其與draggingClass屬性相結合來增加其靈活性。

draggingClass：[type：string] [default：internal css class] [version：1.0]
該屬性被用作被拖動時分配給列錨的css類。它可以用於視覺反饋目的。

minWidth：[type：number] [default：15] [version：1.1]
該值指定列允許的最小寬度（以畫素為單位）。

headerOnly：[type：boolean] [default：false] [version：1.2]
此屬性可用於防止柱錨的垂直展開以適應桌面高度。如果設定為true，列處理程式的大小將被繫結到第一行的垂直大小。

hoverCursor：[type：string] [default：“e-resize”] [version：1.3]
此屬性可用於自定義當用戶位於列錨上時將顯示的遊標。

dragCursor：[type：string] [default：“e-resize”] [version：1.3]
定義使用者調整列大小時將使用的遊標。

flush：[type：boolean] [default：false] [version：1.3]
重新整理僅在啟用PostbackSafe時有效。其目的是刪除與當前表格佈局相關的所有以前儲存的資料，以恢復其原始佈局，防止在回發後恢復寬度。

marginLeft：[type：string / null] [default：null] [version：1.3]
如果目標表包含明確的margin-left CSS規則，則必須在此屬性中使用相同的值（例如：“auto”，“20％”，“10px”）。需要它的原因是因為大多數瀏覽器（除IE之外的所有瀏覽器）不允許直接訪問應用於其原始單元中的元素的當前CSS規則（例如“％”，“em”或“auto”值）。如果您知道任何解決方法不涉及通過網站和任何其他外部依賴關係中定義的所有樣式的迭代，請讓我知道！

marginRight：[type：string / null] [default：null] [version：1.3]
它的行為方式與以前的屬性完全相同，但應用於右邊距。

fixed：[deprecated：use“mode”改為] [type：boolean] [default：true] [version：1.5 only]
它用於設定resize方法的工作原理。在固定模式下，調整列的大小不會更改總表寬度，這意味著當列擴充套件時，下一個縮放。如果固定設定為false，則表可以更改其寬度，每列可以獨立縮小或擴充套件。

注意：存在一個已知問題，其中CSS屬性table-layout: fixed;會導致與調整表寬度相關的輕微衝突。請注意，該fixed設定與CSS屬性不同，因此鼓勵不要將該樣式應用於表。

如：

$("#pendingReview_table").colResizable({
   liveDrag: true,//實時顯示滑動位置
   gripInnerHtml: "<div class='grip'></div>",
   //draggingClass: "dragging",
   postbackSafe: true,//重新整理後保留之前的拖拽寬度
   headerOnly:true,
   //onResize: onSampleResized
});