使用 jQuery 调整表格列的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6156182/
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 with jQuery
提问by Alvaro Prieto
Thisis the only jQuery plugin I could find to resize table column widths, but it does not integrate well with my table, and has unnecessary bloat (saves in cookies). Are there any other plugins for just resizing columns? (NOT datagrid plugins, please don't suggest those).
这是我能找到的唯一一个调整表格列宽大小的 jQuery 插件，但它不能很好地与我的表格集成，并且有不必要的膨胀（保存在 cookie 中）。是否有任何其他插件仅用于调整列大小？（不是数据网格插件，请不要推荐那些）。
If not, I'll write my own, it shouldn't be too hard, I just don't know how to detect when a user clicks on the td border (to resize). Any ideas?
如果没有，我会自己写，应该不会太难，我只是不知道如何检测用户何时单击 td 边框（调整大小）。有任何想法吗？
回答by Alvaro Prieto
:-) Once I found myself in the same situation, there was no jQuery plugin matching my requeriments, so I spend some time developing my own one: colResizable
:-) 一旦我发现自己处于同样的情况，没有符合我的要求的 jQuery 插件，所以我花了一些时间开发自己的插件：colResizable
About colResizable
关于可调整大小
colResizable is a free jQuery plugin to resize table columns dragging them manually. It is compatible with both mouse and touch devices and has some nice features such as layout persistence after page refresh or postback. It works with both percentage and pixel-based table layouts.
colResizable 是一个免费的 jQuery 插件，可以手动调整表格列的大小。它与鼠标和触摸设备兼容，并具有一些不错的功能，例如页面刷新或回发后的布局持久性。它适用于基于百分比和基于像素的表格布局。
It is tiny in size (colResizable 1.0 is only 2kb) and it is fully compatible with all major browsers (IE7+, Firefox, Chrome and Opera).
它体积小（colResizable 1.0 只有 2kb），并且完全兼容所有主流浏览器（IE7+、Firefox、Chrome 和 Opera）。
Features
特征
colResizable was developed since no other similar plugin with the below listed features was found:
colResizable 的开发是因为没有找到其他具有以下列出功能的类似插件：
- Compatible with mouse and touch devices (PC, tablets, and mobile phones)
- Compatibility with both percentage and pixel-based table layouts
- Column resizing not altering total table width (optional)
- No external resources needed (such as images or stylesheets)
- Optional layout persistence after page refresh or postback
- Customization of column anchors
- Small footprint
- Cross-browser compatibility (IE7+, Chrome, Safari, Firefox)
- Events
- 兼容鼠标和触控设备（PC、平板电脑和手机）
- 与百分比和基于像素的表格布局的兼容性
- 列调整大小不改变总表格宽度（可选）
- 不需要外部资源（例如图像或样式表）
- 页面刷新或回发后的可选布局持久性
- 自定义柱锚
- 占地面积小
- 跨浏览器兼容性（IE7+、Chrome、Safari、Firefox）
- 活动
Comparison with other plugins
与其他插件的比较
colResizable is the most polished plugin to resize table columns out there. It has plenty of customization possibilities and it is also compatible with touch devices. But probably the most interesting feature which is making colResizable the greatest choice is that it is compatible with both pixel-based and fluid percentage table layouts. But, what does it mean?
colResizable 是调整表列大小的最精美的插件。它具有大量定制可能性，并且还与触摸设备兼容。但让 colResizable 成为最佳选择的最有趣的功能可能是它与基于像素和流体百分比表格布局兼容。但是这是什么意思？
If the width of a table is set to, lets say 90%, and the column widths are modified using colResizable, when the browser is resized columns widths are resized proportionally. While other plugins does behave odd, colResizable does its job just as expected.
如果将表格的宽度设置为 90%，并且使用 colResizable 修改列宽，则当浏览器调整大小时，列宽会按比例调整。虽然其他插件确实表现得很奇怪，但 colResizable 却按预期完成了它的工作。
colResizable is also compatible with table max-width attribute: if the sum of all columns exceed the table's max-width, they are automatically fixed and updated.
colResizable 也兼容 table max-width 属性：如果所有列的总和超过 table 的 max-width，它们会被自动修复和更新。
Another great advantage compared with other plugins is that it is compatible with page refresh, postbacks and even partial postbacks if the table is located inside of an updatePanel. It is compatible with all major browsers (IE7+, Firefox, Chrome and Opera), while other plugins fail with old IE versions.
与其他插件相比的另一个巨大优势是，如果表位于 updatePanel 内，它可以兼容页面刷新、回发甚至部分回发。它与所有主要浏览器（IE7+、Firefox、Chrome 和 Opera）兼容，而其他插件在旧 IE 版本中失败。
Code sample
代码示例
$("#sample").colResizable({
liveDrag:true
});
回答by Alvaro Prieto
So I started writing my own, just bare bones functionality for now, will be working on it next week... http://jsfiddle.net/ydTCZ/
所以我开始写我自己的，现在只是简单的功能，下周将开始工作...... http://jsfiddle.net/ydTCZ/
回答by mikeyreilly
Here's a short complete html example. See demo http://jsfiddle.net/CU585/
这是一个简短的完整 html 示例。见演示http://jsfiddle.net/CU585/
<!DOCTYPE html><html><head><title>resizable columns</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
th {border: 1px solid black;}
table{border-collapse: collapse;}
.ui-icon, .ui-widget-content .ui-icon {background-image: none;}
</style>
<body>
<table>
<tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script>
$( "th" ).resizable();
</script></body></html>
回答by diEcho
try flexigrid, here is One more Reference
回答by RobAu
回答by Alireza Ahmadi Rad
Although very late, hope it still helps someone:
虽然很晚了，但希望它仍然可以帮助某人：
Many of comments here and in other posts are concerned about setting initial size.
这里和其他帖子中的许多评论都与设置初始大小有关。
I used jqueryUi.Resizable. Initial widths shall be defined within each "< td >" tag at first line (< TR >). This is unlike what colResizable recommends; colResizable prohibits defining widths at first line, there I had to define widths in "< col>" tag which wasn't consikstent with jqueryresizable.
我使用了jqueryUi.Resizable。初始宽度应在第一行 (<TR>) 的每个“<td>”标签内定义。这与 colResizable 推荐的不同；colResizable 禁止在第一行定义宽度，我必须在“< col>”标签中定义宽度，这与 jqueryresizable 不一致。
the following snippet is very neat and easier to read than usual samples:
以下代码段非常简洁，比通常的示例更易于阅读：
$("#Content td").resizable({
handles: "e, s",
resize: function (event, ui) {
var sizerID = "#" + $(event.target).attr("id");
$(sizerID).width(ui.size.width);
}
});
Content is id of my table. Handles (e, s) define in which directions the plugin can change the size. You must have a link to css of jquery-ui, otherwise it won't work.
内容是我的表的 id。句柄 (e, s) 定义插件可以改变大小的方向。你必须有 jquery-ui 的 css 链接，否则将无法工作。
回答by Suma
I have tried several solutions today, the one working best for me is Jo-Geek/jQuery-ResizableColumns. Is is very simple, yet it handles tables placed in flex containers, which many of the other ones fail with.
我今天尝试了几种解决方案，最适合我的是Jo-Geek/jQuery-ResizableColumns。Is 非常简单，但它处理放置在 flex 容器中的表，许多其他容器都失败了。
<table class="resizable">
</table>
$('table.resizable').resizableColumns();
$(function() {
$('table.resizable').resizableColumns();
})body {
margin: 0px;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jo-geek.github.io/jQuery-ResizableColumns/demo/resizableColumns.min.js"></script>
<table class="resizable" border="true">
<thead>
<tr>
<th>col 1</th><th>col 2</th><th>col 3</th><th>col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td>
</tr>
</tbody>
</table>回答by Adam
I tried to add to @user686605's work:
我试图添加到@user686605 的工作中：
1) changed the cursor to col-resize at the th border
1) 将光标更改为在第 th 边框处调整大小
2) fixed the highlight text issue when resizing
2) 修复了调整大小时突出显示文本的问题
I partially succeeded at both. Maybe someone who is better at CSS can help move this forward?
我在这两个方面都取得了部分成功。也许更擅长 CSS 的人可以帮助推动这一进程？
http://jsfiddle.net/telefonica/L2f7F/4/
http://jsfiddle.net/telefonica/L2f7F/4/
HTML
HTML
<!--Click on th and drag...-->
<table>
<thead>
<tr>
<th><div class="noCrsr">th 1</div></th>
<th><div class="noCrsr">th 2</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>td 1</td>
<td>td 2</td>
</tr>
</tbody>
</table>
JS
JS
$(function() {
var pressed = false;
var start = undefined;
var startX, startWidth;
$("table th").mousedown(function(e) {
start = $(this);
pressed = true;
startX = e.pageX;
startWidth = $(this).width();
$(start).addClass("resizing");
$(start).addClass("noSelect");
});
$(document).mousemove(function(e) {
if(pressed) {
$(start).width(startWidth+(e.pageX-startX));
}
});
$(document).mouseup(function() {
if(pressed) {
$(start).removeClass("resizing");
$(start).removeClass("noSelect");
pressed = false;
}
});
});
CSS
CSS
table {
border-width: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table th {
border: 1px;
border-style: solid;
border-color: black;
background-color: green;
cursor: col-resize;
}
table th.resizing {
cursor: col-resize;
}
.noCrsr {
cursor: default;
margin-right: +5px;
}
.noSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
回答by OnekO
I've done my own jquery ui widget, just thinking if it's good enough.
我已经完成了我自己的 jquery ui 小部件，只是想它是否足够好。
