javascript 可调整大小的表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3969008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizable table columns
提问by cybermotron
I'm developing a web app and am looking for a way to create my own datagrids.
我正在开发一个 Web 应用程序，并且正在寻找一种方法来创建我自己的数据网格。
I know that there are lots of fantastic scripts out there with all the bells and whistles, but I need my own specific functionality, css styling, and the ability to use my own ui controls in it.
我知道有很多很棒的脚本，里面有很多花里胡哨的东西，但是我需要自己的特定功能、css 样式以及在其中使用自己的 ui 控件的能力。
Really, the only thing I need is the ability to resize the columns. I don't really care if the markup doesn't maintain the row structure or isn't semantic, because all of the data will be populated by ajax requests.
真的，我唯一需要的是调整列大小的能力。我真的不在乎标记是否不维护行结构或不是语义，因为所有数据都将由 ajax 请求填充。
I was thinking a possible solution would be to make each column a div.
我在想一个可能的解决方案是让每一列成为一个 div。
Is there a tutorial out there that can help me?
那里有可以帮助我的教程吗？
回答by Ingo
I recommend to use jQuery UI Resizablewith some enhancements. The plugin really focuses only on resizing and enables full customization since you can add your own callback functions at any event. By default, however, the plugin cannot reize table headers, but I could make it running with valid HTML, updating the table's COLGROUP area on resize.
我建议使用带有一些增强功能的jQuery UI Resizable。该插件真正专注于调整大小并启用完全自定义，因为您可以在任何事件中添加自己的回调函数。然而，默认情况下，插件无法调整表格标题，但我可以让它运行有效的 HTML，在调整大小时更新表格的 COLGROUP 区域。
The concrete idea would be:
具体的想法是：
- The HTML table specifies the initial width in its COLGROUP area and has CSS property table-layout:fixed.
- Decorate TH elements with jQuery UI's .resizable().
- On resizing start: Find the matching COL element of active TH and remember original width.
- On resizing: Calculate the resize delta and update (increase/decrease) the selected COL element. This will resize the whole column with every browser.
- HTML 表格指定其 COLGROUP 区域的初始宽度，并具有 CSS 属性 table-layout:fixed。
- 使用 jQuery UI 的 .resizable() 装饰 TH 元素。
- 调整大小开始时：找到活动 TH 的匹配 COL 元素并记住原始宽度。
- 调整大小时：计算调整大小增量并更新（增加/减少）选定的 COL 元素。这将使用每个浏览器调整整个列的大小。
Plugin init:
插件初始化：
$(".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");
}
});
I described the full solution including JavaScript, HTML markup, cross-browser CSS and Live-Demo at http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/
我在http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/描述了完整的解决方案，包括 JavaScript、HTML 标记、跨浏览器 CSS 和 Live-Demo
回答by Josh - TechToolbox
Not really a tutorial, but a really bare bones example you could work from: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/
不是真正的教程，而是一个非常简单的例子，你可以使用：http: //robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/
