带有jQuery或其他Javascript库的可调整大小的表列
[英]Resizable table columns with jQuery or other Javascript libraries
问题描述
colResizable is a good solution, but it doesn't support initial column widths. 
colResizable是一个很好的解决方案，但它不支持初始列宽。 As soon as library is started, initial column widths are changed. 库启动后，初始列宽即会更改。
this post has provided a kind of solution but its source code is not similar to colResizable(at least the latest one). 这篇文章提供了一种解决方案，但是其源代码与colResizable（至少是最新的）不同。 Comments are discouraging and the github link is broken. 评论令人沮丧，并且github链接已损坏。
Other solutions are some libraries without any help or sample. 其他解决方案是一些没有任何帮助或示例的库。
Is there any other plugin or even snippet available that I can change column widths? 还有其他可以更改列宽的插件或片段吗？ keeping initial widths is mandatory. 必须保持初始宽度。 "div"s are not applicable; “ div”不适用； it must be table. 它必须是桌子。
Update: 更新：
I found the following code snippet on codepen.io: 我在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>
it uses jquery.resizable and seems simpler than other widgets, but again has problem with initial size: You can define min & max widths, but not a fixed predefined width. 它使用jquery.resizable，并且看起来比其他小部件更简单，但是初始大小仍然存在问题：您可以定义最小和最大宽度，但不能定义固定的预定义宽度。 Initial width can be set, column can be widened, but not tightened compared to initial size. 可以设置初始宽度，可以增加列的宽度，但与初始尺寸相比不能收紧。
1 个解决方案
解决方案1
0 2016-01-04 15:57:22
jqueryUI.resizable works fine. jqueryUI.resizable工作正常。 Problem was related to the way I had defined initial widths: 问题与我定义初始宽度的方式有关：
Widths must be defined within style of <td> tag in first line. 宽度必须在第一行的<td>标签样式内定义。 This is unlike what you need to do while using colResizable. 这与使用colResizable时需要执行的操作不同。 For colResizable, I had defined widths in <Col> tag. 对于colResizable，我在<Col>标记中定义了宽度。 This makes problem with jqueryui. 这使jqueryui出现问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.