帶有jQuery或其他Javascript庫的可調整大小的表列

Question

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，並且看起來比其他小部件更簡單，但是初始大小仍然存在問題：您可以定義最小和最大寬度，但不能定義固定的預定義寬度。 可以設置初始寬度，可以增加列的寬度，但與初始尺寸相比不能收緊。

Answer 1

jqueryUI.resizable工作正常。 問題與我定義初始寬度的方式有關：

寬度必須在第一行的<td>標簽樣式內定義。 這與使用colResizable時需要執行的操作不同。 對於colResizable，我在<Col>標記中定義了寬度。 這使jqueryui出現問題。

帶有jQuery或其他Javascript庫的可調整大小的表列

問題描述

1 個解決方案

解決方案1
0 2016-01-04 15:57:22

帶有jQuery或其他Javascript庫的可調整大小的表列

問題描述

1 個解決方案

解決方案1 0 2016-01-04 15:57:22

解決方案1
0 2016-01-04 15:57:22