我正在开发一个Web应用程序,正在寻找一种创建自己的数据表格的方法。
我知道有很多功能齐全的脚本,但我需要自己特定的功能、CSS样式和使用自己的UI控件。
实际上,我唯一需要的就是能够调整列的大小。如果标记不维护行结构或不具有语义性也无所谓,因为所有数据都将由ajax请求填充。
我考虑的一个可能的解决方案是将每个列作为一个div。
是否有教程可以帮助我?
我正在开发一个Web应用程序,正在寻找一种创建自己的数据表格的方法。
我知道有很多功能齐全的脚本,但我需要自己特定的功能、CSS样式和使用自己的UI控件。
实际上,我唯一需要的就是能够调整列的大小。如果标记不维护行结构或不具有语义性也无所谓,因为所有数据都将由ajax请求填充。
我考虑的一个可能的解决方案是将每个列作为一个div。
是否有教程可以帮助我?
$(".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");
}
});
这不是一个真正的教程,而是一个非常简单的例子可以供您参考:http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/