如何解决使用jQuery可调整大小的表列
| 这是我可以找到的唯一一个调整表列宽大小的jQuery插件，但它与我的表的集成度不高，并且具有不必要的膨胀（节省cookie）。还有其他用于调整列大小的插件吗？ （不是datagrid插件，请不要建议这些插件）。 如果没有，我会自己写，应该不会太难，我只是不知道如何检测用户何时单击td边框（以调整大小）。有任何想法吗？解决方法
:-)一旦发现自己处在相同的情况下，就没有与我的要求匹配的jQuery插件，因此我花了一些时间开发自己的插件：colResizable
关于colResizable
colResizable是一个免费的jQuery插件，用于调整表格列的大小并手动拖动它们。它与鼠标和触摸设备兼容，并具有一些不错的功能，例如页面刷新或回发后的布局持久性。它适用于百分比表和基于像素的表布局。
它的体积很小（colResizable 1.0仅2kb），并且与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）完全兼容。
特征
由于未找到具有以下列出的功能的其他类似插件，因此开发了colResizable：
与鼠标和触摸设备（PC，平板电脑和手机）兼容
与百分比和基于像素的表格布局兼容
调整列大小不会改变表格的总宽度（可选）
不需要外部资源（例如图像或样式表）
页面刷新或回发后的可选布局持久性
定制柱锚
占地面积小
跨浏览器兼容性（IE7 +，Chrome，Safari，Firefox）
大事记
与其他插件的比较
colResizable是最精巧的插件，可以在那里调整表列的大小。它具有大量的自定义可能性，并且还与触摸设备兼容。但是使colResizable成为最大选择的最有趣的功能可能是它与基于像素的表和流体百分比表布局兼容。但是这是什么意思？
如果将表的宽度设置为90％（例如，将表的宽度设置为90％），并且使用colResizable修改了列的宽度，那么在调整浏览器大小时，列的宽度将按比例调整。虽然其他插件的行为确实很奇怪，但colResizable却按预期完成了工作。
colResizable还与表的max-width属性兼容：如果所有列的总和超过表的最大宽度，则它们将自动修复和更新。
与其他插件相比，另一个巨大的优势是，如果表位于updatePanel内部，则它与页面刷新，回发甚至部分回发兼容。它与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）兼容，而其他插件在旧IE版本中将失败。
参见示例和JSFiddle。
代码样例
）的每个\“ \”标签内定义。这与colResizable建议不同。 colResizable禁止在第一行定义宽度，在那里我不得不在\“
$(\"#sample\").colResizable({
liveDrag:true
});
<!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>
flexigrid
$(\"#Content td\").resizable({
handles: \"e,s\",resize: function (event,ui) {
var sizerID = \"#\" + $(event.target).attr(\"id\");
$(sizerID).width(ui.size.width);
}
});
<!--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>
$(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;
}
});
});
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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
