0

colResizable是一个很好的解决方案，但它不支持初始列宽。一旦库启动，初始列宽就会改变。

这篇文章提供了一种解决方案，但它的源代码与 colResizable 不同（至少是最新的）。评论令人沮丧，并且 github 链接已损坏。

其他解决方案是一些没有任何帮助或示例的库。

是否有任何其他插件甚至可用的片段可以更改列宽？保持初始宽度是强制性的。“div”不适用；它必须是桌子。

更新：

我在 codepen.io 上找到了以下代码片段：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="Styles/jquery-ui-1.9.2.custom.css" />
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <style>
        body {
          font-family: Arial;
          font-size: 10pt;
        }
        table#demo-table th {
          background-color: #006;
          color: #fff;
        }
        table#demo-table th, 
        table#demo-table td {
          white-space: nowrap;
          padding: 3px 6px;
        }
        table.cellpadding-0 td {
            padding: 0;
        }
        table.cellspacing-0 {
            border-spacing: 0;
            border-collapse: collapse;
        }
        table.bordered th, 
        table.bordered td {
          border: 1px solid #ccc;
          border-right: none;
          text-align: center;
        }
        table.bordered th:last, 
        table.bordered td:last {
          border-right: 1px solid #ccc;
        }
    </style>

</head>
<body>
<table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
    <thead>
        <tr>
            <th id='column-header-1'>Column Header 1<div id='column-header-1-sizer'></div></th>
            <th id='column-header-2'>Column Header 2<div id='column-header-2-sizer'></div></th>
            <th id='column-header-3'>Column Header 3<div id='column-header-3-sizer'></div></th>
            <th id='column-header-4'>Column Header 4<div id='column-header-4-sizer'></div></th>
            <th id='column-header-5'>Column Header 5<div id='column-header-5-sizer'></div></th>
            <th id='column-header-6'>Column Header 6<div id='column-header-6-sizer'></div></th>
            <th id='column-header-7'>Column Header 7<div id='column-header-7-sizer'></div></th>
            <th id='column-header-8'>Column Header 8<div id='column-header-8-sizer'></div></th>
            <th id='column-header-9'>Column Header 9<div id='column-header-9-sizer'></div></th>
            <th id='column-header-10'>Column Header 10<div id='column-header-10-sizer'></div></th>
            <th id='column-header-11'>Column Header 11<div id='column-header-11-sizer'></div></th>
            <th id='column-header-12'>Column Header 12<div id='column-header-12-sizer'></div></th>
            <th id='column-header-13'>Column Header 13<div id='column-header-13-sizer'></div></th>
            <th id='column-header-14'>Column Header 14<div id='column-header-14-sizer'></div></th>
            <th id='column-header-15'>Column Header 15<div id='column-header-15-sizer'></div></th>
            <th id='column-header-16'>Column Header 16<div id='column-header-16-sizer'></div></th>
            <th id='column-header-17'>Column Header 17<div id='column-header-17-sizer'></div></th>
            <th id='column-header-18'>Column Header 18<div id='column-header-18-sizer'></div></th>
            <th id='column-header-19'>Column Header 19<div id='column-header-19-sizer'></div></th>
            <th id='column-header-20'>Column Header 20<div id='column-header-20-sizer'></div></th>
            <th id='column-header-21'>Column Header 21<div id='column-header-21-sizer'></div></th>
            <th id='column-header-22'>Column Header 22<div id='column-header-22-sizer'></div></th>
            <th id='column-header-23'>Column Header 23<div id='column-header-23-sizer'></div></th>
            <th id='column-header-24'>Column Header 24<div id='column-header-24-sizer'></div></th>
            <th id='column-header-25'>Column Header 25<div id='column-header-25-sizer'></div></th>
        </tr>
    </thead>
    <tbody>
            <td>My Data 1</td>
            <td>My Data 2</td>
            <td>My Data 3</td>
            <td>My Data 4</td>
            <td>My Data 5</td>
            <td>My Data 6</td>
            <td>My Data 7</td>
            <td>My Data 8</td>
            <td>My Data 9</td>
            <td>My Data 10</td>
            <td>My Data 11</td>
            <td>My Data 12</td>
            <td>My Data 13</td>
            <td>My Data 14</td>
            <td>My Data 15</td>
            <td>My Data 16</td>
            <td>My Data 17</td>
            <td>My Data 18</td>
            <td>My Data 19</td>
            <td>My Data 20</td>
            <td>My Data 21</td>
            <td>My Data 22</td>
            <td>My Data 23</td>
            <td>My Data 24</td>
            <td>My Data 25</td>
    </tbody>
</table>

<script type="text/javascript">
        $(function () {
            var thHeight = $("table#demo-table th:first").height();
            $("table#demo-table th").resizable({
                handles: "e",
                minHeight: thHeight,
                maxHeight: thHeight,
                minWidth: 40,
                resize: function (event, ui) {
                    var sizerID = "#" + $(event.target).attr("id") + "-sizer";
                    $(sizerID).width(ui.size.width);
                }
            });
        });

    </script>

</body>
</html>

它使用 jquery.resizable 并且看起来比其他小部件更简单，但同样存在初始大小问题：您可以定义最小和最大宽度，但不能定义固定的预定义宽度。可以设置初始宽度，列可以加宽，但与初始大小相比不能收紧。

4

1 回答 1

0

jqueryUI.resizable 工作正常。问题与我定义初始宽度的方式有关：

宽度必须<td>在第一行的标记样式中定义。这与使用 colResizable 时需要做的不同。对于 colResizable，我在<Col>标签中定义了宽度。这使 jqueryui 出现问题。

于 2016-01-04T15:57:22.633 回答