Ayuda en la programación, respuestas a preguntas / Javascript / Columnas de tablas redimensionables con jQuery u otras bibliotecas de Javascript - javascript, jquery, html-table, redimensionable, col

Columnas de tablas redimensionables con jQuery u otras bibliotecas de Javascript: javascript, jquery, html-table, redimensionable, col

colResizable es una buena solución, pero no es compatible con los anchos de columna iniciales. Tan pronto como se inicia la biblioteca, se cambian los anchos de columna iniciales.

esta La publicación ha proporcionado un tipo de solución, pero su código fuente no es similar a colResizable (al menos el más reciente). Los comentarios son desalentadores y el enlace Github está roto.

Otras soluciones son algunas bibliotecas sin ninguna ayuda o muestra.

¿Hay algún otro complemento o fragmento disponible que pueda cambiar el ancho de las columnas? mantener los anchos iniciales es obligatorio. "div" no son aplicables; debe ser mesa

Actualizar:

Encontré el siguiente fragmento de código en 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>

utiliza jquery.redimensionable y parece más sencillo que otros widgets, pero nuevamente tiene un problema con el tamaño inicial: puede definir los anchos mínimo y máximo, pero no un ancho predefinido fijo. El ancho inicial se puede configurar, la columna se puede ampliar, pero no se puede apretar en comparación con el tamaño inicial.

Respuestas

0 para la respuesta № 1

jqueryUI.resizable funciona bien. El problema estaba relacionado con la forma en que había definido los anchos iniciales:

Los anchos deben definirse dentro del estilo de <td> etiqueta en primera linea Esto es diferente a lo que necesita hacer mientras usa colResizable. Para colResizable, he definido anchos en <Col> etiqueta. Esto hace problema con jqueryui.