Question

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

this帖子提供了一种解决方案，但其源代码与colResizable（至少是最新版本）不相似。评论令人沮丧，github链接被破坏。

其他解决方案是一些没有任何帮助或样本的图书馆。

是否有其他插件甚至可用的片段可以更改列宽？保持初始宽度是强制性的。＆＃34; div＆＃34; s不适用;它一定是桌子。

更新

我在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并且看起来比其他小部件更简单，但是再次出现初始大小的问题：你可以定义min＆amp;最大宽度，但不是固定的预定义宽度。可以设置初始宽度，可以加宽列，但与初始大小相比不会收紧。

Answer 1

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

宽度必须在第一行<Col>标记的样式中定义。这与使用colResizable时需要做的不同。对于colResizable，我在public int mycalc(String s) { int odd = 0; int even = 0; for (int b = 0; b < s.length(); b++) { // This is the int value of the b-th character of the string int digit = s.charAt(b) - '0'; if (b % 2 == 0) { even += digit; } else { odd += digit; } } odd *= 3; return odd + even; // Or do what you need with odd and even }标签中定义了宽度。这会导致jqueryui出现问题。

带有jQuery或其他Javascript库的可调整大小的表列

1 个答案: