Pomoc w programowaniu, odpowiedzi na pytania / JavaScript / Zmienna tabela kolumn z jQuery lub innymi bibliotekami JavaScript - javascript, jquery, html-table, resizable, col

Zmienna tabela kolumn z jQuery lub innymi bibliotekami JavaScript - javascript, jquery, html-table, resizable, col

colResizable jest dobrym rozwiązaniem, ale nie obsługuje początkowych szerokości kolumn. Gdy tylko biblioteka zostanie uruchomiona, początkowe szerokości kolumn zostaną zmienione.

to post dostarczył pewnego rodzaju rozwiązanie, ale jego kod źródłowy nie jest podobny do colResizable (przynajmniej najnowszego). Komentarze są zniechęcające, a link github jest zepsuty.

Inne rozwiązania to niektóre biblioteki bez pomocy lub próbki.

Czy istnieje jakaś inna wtyczka lub nawet fragment, że mogę zmienić szerokość kolumn? zachowywanie początkowych szerokości jest obowiązkowe. "div" nie mają zastosowania; to musi być stół.

Aktualizacja:

Znalazłem następujący fragment kodu na 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>

używa jquery.Zmienna wielkość i wydaje się prostsza niż inne widżety, ale znowu ma problem z początkowym rozmiarem: Możesz zdefiniować min i maks. szerokości, ale nie ustaloną wstępnie zdefiniowaną szerokość. Można ustawić szerokość początkową, kolumna może być poszerzona, ale nie jest dokręcona w stosunku do rozmiaru początkowego.

Odpowiedzi:

0 dla odpowiedzi № 1

jqueryUI.resizable działa dobrze. Problem był związany ze sposobem, w jaki zdefiniowałem początkowe szerokości:

Szerokości muszą być zdefiniowane w stylu <td> tag w pierwszej linii. W przeciwieństwie do tego, co musisz zrobić podczas używania colResizable. Dla colResizable miałem zdefiniowane szerokości w <Col> etykietka. To sprawia, że problem z jqueryui.