Resizable table columns

我正在開發一個web應用程序，並正在尋找一種方法來創建我自己的datagrid。Resizable table columns

我知道有很多奇妙的腳本與所有的花裏胡哨，但我需要我自己的特定功能，CSS樣式，並能夠使用我自己的UI控件。

真的，我唯一需要的是能夠調整列的大小。我並不在乎標記是否不維護行結構或者不是語義的，因爲所有的數據都會被ajax請求填充。

我在想一個可能的解決方案是將每列設爲一個div。

有沒有可以幫助我的教程？

來源

2010-10-19 cybermotron

不是一個真正的教程，而是一個真正的裸露的骨頭例如，你可以從工作：http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

來源

2011-08-01 12:33:48

我建議使用jQuery UI Resizable一些改進。該插件真的只關注調整大小，並且可以完全自定義，因爲您可以在任何情況下添加自己的回調函數。但是，默認情況下，插件無法重新定義表格標題，但我可以使其使用有效的HTML運行，並在調整大小時更新表格的COLGROUP區域。

具體想法是：

的HTML表指定在其COLGROUP區域的初始寬度，並且具有的CSS屬性表格的佈局：固定。
用jQuery UI的.resizable（）裝飾TH元素。
調整開始大小：找到活動TH的匹配COL元素並記住原始寬度。
調整大小：計算調整大小增量並更新（增大/減小）所選COL元素。這將使用每個瀏覽器調整整個列的大小。

插件初始化：

$(".resizable th").resizable({ 
handles: "e", 

// set correct COL element and original size 
start: function(event, ui) { 
    var colIndex = ui.helper.index() + 1; 
    colElement = table.find("colgroup > col:nth-child(" + 
    colIndex + ")"); 

    // get col width (faster than .width() on IE) 
    colWidth = parseInt(colElement.get(0).style.width, 10); 
    originalSize = ui.size.width; 
}, 

// set COL width 
resize: function(event, ui) { 
    var resizeDelta = ui.size.width - originalSize; 

    var newColWidth = colWidth + resizeDelta; 
    colElement.width(newColWidth); 

    // height must be set in order to prevent IE9 to set wrong height 
    $(this).css("height", "auto"); 
} 
});

我描述的完整的解決方案包括JavaScript，HTML標記，跨瀏覽器的CSS和現場演示在http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/

來源

2012-08-08 09:57:07 Ingo

Resizable table columns

回答

相關問題