与其他插件的比较

Question

This是我唯一可以找到的用于调整表格列宽度的jQuery插件，但它与我的表格不能很好地集成，并且有不必要的膨胀（保存在cookie中）。是否还有其他插件只用于调整列的大小？（不是数据网格插件，请不要提示那些）。

如果没有，我会写自己的，不应该太难，我只是不知道如何检测用户点击td边框（调整大小）。有什么想法吗？

Answer 1

:-)一旦我发现自己处于相同的情况，就没有jQuery插件与我的requeriments匹配，所以我花了一些时间开发自己的一个：colResizable

关于colResizable

colResizable是一个免费的jQuery插件，用于调整表格列，手动拖动它们。它兼容鼠标和触摸设备，并具有一些很好的功能，如页面刷新或回发后的布局持久性。它适用于百分比和基于像素的表格布局。

它的尺寸很小（colResizable 1.0只有2kb），它与所有主流浏览器（IE7 +，Firefox，Chrome和Opera）完全兼容。

enter image description here

功能

开发了colResizable，因为没有找到具有以下列出功能的其他类似插件：

与鼠标和触控设备（PC，平板电脑和手机）兼容
与百分比和基于像素的表格布局的兼容性
列调整大小不改变总表宽度（可选）
无需外部资源（例如图片或样式表）
页面刷新或回发后的可选布局持久性
自定义列锚
占地面积小
跨浏览器兼容性（IE7 +，Chrome，Safari，Firefox）
活动

与其他插件的比较

colResizable是用于调整表格列大小的最优秀的插件。它具有充足的定制可能性，并且还与触摸设备兼容。但是，使colResizable成为最佳选择的最有趣的功能可能是它兼容基于像素和流体百分比表格布局。但是，这是什么意思？

如果将表的宽度设置为90％，并且使用colResizable修改列宽，则在调整浏览器大小时，将按比例调整列宽度。虽然其他插件的行为很奇怪，但colResizable可以像预期的那样完成它的工作。

colResizable也与表max-width属性兼容：如果所有列的总和超过表的max-width，它们将自动修复和更新。

与其他插件相比，另一个巨大优势是，如果表位于updatePanel内，它与页面刷新，回发甚至部分回发兼容。它兼容所有主流浏览器（IE7 +，Firefox，Chrome和Opera），而其他插件则无法使用旧的IE版本。

请参阅samples和JSFiddle。

代码示例

$("#sample").colResizable({
        liveDrag:true
});

Answer 2

所以我开始编写自己的，现在只是简单的功能，将在下周开始工作...... http://jsfiddle.net/ydTCZ/

Answer 3

尝试flexigrid，此处为One more Reference

Answer 4

这是一个简短的完整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>

Answer 5

或者尝试我的解决方案：http://robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/：）

Answer 6

虽然很晚，但希望它仍能帮到某人：

此处和其他帖子中的许多评论都关注设置初始大小。

我使用了jqueryUi.Resizable。初始宽度应在每个“＆lt; td＆gt;”内定义标记在第一行（＆lt; TR＆gt;）。这与colResizable建议的不同; colResizable禁止在第一行定义宽度，我必须在“＆lt; col＆gt;”中定义宽度与jqueryresizable不相符的标签。

以下代码段非常简洁，比通常的样本更容易阅读：

$("#Content td").resizable({
    handles: "e, s",
    resize: function (event, ui) {
        var sizerID = "#" + $(event.target).attr("id");
        $(sizerID).width(ui.size.width);
    }
});

内容是我桌子的ID。句柄（e，s）定义插件可以改变大小的方向。你必须有一个指向jquery-ui的css的链接，否则它将无效。

Answer 7

我尝试添加到@ user686605的工作：

1）将光标更改为在第34个边框处调整大小

2）在调整大小时修复了高亮文本问题

我在这两方面都取得了成功。也许那些擅长CSS的人可以帮助推动这一进程吗？

http://jsfiddle.net/telefonica/L2f7F/4/

<强> 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

$(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

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;
}

Answer 8

我今天尝试了几种解决方案，最适合我的一种是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>

Answer 9

我已经完成了自己的jquery ui小部件，只是想想它是否足够好。

https://github.com/OnekO/colresizable

带有jQuery的可调整大小的表列

9 个答案:

关于colResizable

功能

与其他插件的比较

代码示例