Ajuda na programação, respostas a perguntas / Javascript / Colunas de tabelas redimensionáveis com jQuery ou outras bibliotecas JavaScript - javascript, jquery, html-table, redimensionável, col

Colunas de tabelas redimensionáveis com jQuery ou outras bibliotecas JavaScript - javascript, jquery, html-table, redimensionável, col

colossável é uma boa solução, mas não suporta larguras de colunas iniciais. Assim que a biblioteca é iniciada, as larguras iniciais das colunas são alteradas.

esta post forneceu um tipo de solução, mas seu código-fonte não é semelhante ao colResizable (pelo menos o mais recente). Comentários são desanimadores e o link do github está quebrado.

Outras soluções são algumas bibliotecas sem nenhuma ajuda ou amostra.

Existe algum outro plugin ou mesmo snippet disponível que eu possa alterar a largura das colunas? manter as larguras iniciais é obrigatório. "div" s não são aplicáveis; deve ser mesa.

Atualizar:

Eu encontrei o seguinte trecho de código no 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>

usa jquery.redimensionável e parece mais simples do que outros widgets, mas novamente tem problema com o tamanho inicial: você pode definir min e max widths, mas não uma largura predefinida fixa. Largura inicial pode ser definida, coluna pode ser ampliada, mas não apertada em comparação com o tamanho inicial.

Respostas:

0 para resposta № 1

jqueryUI.resizable funciona bem. O problema estava relacionado à maneira como defini as larguras iniciais:

As larguras devem ser definidas dentro do estilo de <td> tag na primeira linha. Isso é diferente do que você precisa fazer ao usar o colResizable. Para colResizable, eu tinha larguras definidas em <Col> tag. Isso faz com que o problema com jqueryui.