Fatal编程技术网
  • javascript/
  • 具有jQuery或其他Javascript库的可调整大小的表列

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

javascript jquery

具有jQuery或其他Javascript库的可调整大小的表列,javascript,jquery,html-table,resizable,col,Javascript,Jquery,Html Table,Resizable,Col,是一个很好的解决方案，但它不支持初始列宽。库一启动，初始列宽就会更改 post提供了一种解决方案，但其源代码与ColResizeable（至少是最新的）不相似。评论令人沮丧，github链接也断了 其他解决方案是一些没有任何帮助或示例的库 是否有其他插件或甚至代码片段可供我更改列宽？必须保持初始宽度。“div”不适用；一定是桌子 更新： 我在codepen.io上找到了以下代码片段： <html xmlns="http://www.w3.org/1999/xhtml"> <he

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

post提供了一种解决方案，但其源代码与ColResizeable（至少是最新的）不相似。评论令人沮丧，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>


身体{
字体系列：Arial；
字号：10pt；
}
表#演示表th{
背景色：#006；
颜色：#fff；
}
表#演示表th，
表#演示表td{
空白：nowrap；
填充：3px6px；
}
表1.1-0 td{
填充：0；
}
表1.1-0{
边界间距：0；
边界塌陷：塌陷；
}
表1.2-1，
表1.2有边框的td{
边框：1px实心#ccc；
边界权：无；
文本对齐：居中；
}
表1.带边框的th：最后，
表1.带边框的td：最后一个{
右边框：1px实心#ccc；
}
列标题1
列标题2
列标题3
列标题4
列标题5
列标题6
列标题7
列标题8
列标题9
列标题10
列标题11
列标题12
列标题13
列标题14
列标题15
列标题16
列标题17
列标题18
列标题19
列标题20
列标题21
列标题22
列标题23
列标题24
列标题25
我的数据1
我的数据2
我的数据3
我的数据4
我的数据5
我的数据6
我的数据7
我的数据8
我的数据9
我的数据10
我的数据11
我的数据12
我的数据13
我的数据14
我的数据15
我的数据16
我的数据17
我的数据18
我的数据19
我的数据20
我的数据21
我的数据22
我的数据23
我的数据24
我的数据25
$（函数（）{
var thHeight=$（“表#演示表th:first”）.height（）；
$（“表#演示表th”）。可调整大小({
手柄：“e”，
minHeight:thHeight，
maxHeight:thHeight，
最小宽度：40，
调整大小：函数（事件、ui）{
var sizerID=“#”+$（event.target.attr（“id”）+“-sizer”；
$（sizerID）.width（ui.size.width）；
}
});
});
它使用jquery.resizeable，看起来比其他小部件更简单，但初始大小也有问题：您可以定义最小和最大宽度，但不能定义固定的预定义宽度。可以设置初始宽度，也可以加宽柱，但与初始尺寸相比，柱不能拧紧

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

宽度必须在第一行的
标记样式中定义。这与使用ColResizeable时需要执行的操作不同。对于ColResizeble，我在
标记中定义了宽度。这使得jqueryui出现了问题