Изменяемого размера столбцов таблицы с помощью jQuery
этой - единственный плагин jQuery, который я мог найти для изменения ширины столбцов таблицы, но он не интегрируется с моей таблицей и имеет ненужное раздувание (сохраняет в cookies). Есть ли другие плагины для изменения размеров столбцов? (Не Плагины datagrid, пожалуйста, не предлагайте их).
Если нет, я напишу свой собственный, это не должно быть слишком сложно, я просто не знаю, как определить, когда пользователь нажимает на границу td (для изменения размера). Есть идеи?
8 ответов
: -) Как только я оказался в той же ситуации, не было плагина jQuery, соответствующего моим запросам, поэтому я трачу некоторое время на разработку собственного:colResizable
о colResizable
colResizable - бесплатный плагин jQuery для изменения размера столбцов таблицы, перетаскивая их вручную. Он совместим как с мышью, так и с сенсорными устройствами и имеет некоторые приятные функции, такие как сохранение макета после обновления страницы или обратной передачи. Он работает с как процентные, так и пиксельные макеты, таблицы.
он крошечный по размеру (colResizable 1.0-только 2kb), и он полностью совместим со всеми основными браузерами (IE7+, Firefox, Chrome и Opera).
особенности
colResizable разработан, поскольку никакой другой аналогичный плагин с ниже перечисленных встретился:
- совместимый с приборами мыши и касания (ПК, планшетами, и мобильными телефонами)
- совместимость с процентными и пиксельными макетами таблиц
- изменение размера столбца не изменяет общую ширину таблицы (необязательно)
- не требуется внешних ресурсов (таких как изображения или таблицы стилей)
- необязательное сохранение макета после обновления страницы или обратной передачи
- настройка анкеров столбцов
- компактность
- кросс-браузерная совместимость (IE7+, Chrome, Safari, Firefox)
- событий
сравнение с другими плагинами
colResizable-самый полированный плагин для изменения размера столбцов таблицы. Он имеет множество возможностей изготовления на заказ и он также совместим с приборами касания. Но, вероятно, самая интересная особенность, которая делает colResizable самым большим выбор заключается в том, что он совместим как с пиксельными, так и с жидкими процентными макетами таблиц. Но что это значит?
если ширина таблицы установлена в, скажем, 90%, и ширины столбцов изменяются с помощью colResizable, когда браузер изменяет ширину столбцов пропорционально. В то время как другие плагины ведут себя странно, colResizable делает свою работу так, как ожидалось.
colResizable также совместим с атрибутом max-width таблицы: если сумма всех столбцов превысьте максимальн-ширину таблицы, они автоматически фикчированы и уточнены.
еще одним большим преимуществом по сравнению с другими плагинами является то, что он совместим с обновлением страницы, обратными связями и даже частичными обратными связями, если таблица находится внутри updatePanel. Он совместим со всеми основными браузерами (IE7+, Firefox, Chrome и Opera), в то время как другие плагины терпят неудачу со старыми версиями IE.
посмотреть образцы и JSFiddle.
код образец
$("#sample").colResizable({
liveDrag:true
});
поэтому я начал писать свой собственный, просто функциональность голых костей на данный момент, будет работать на следующей неделе... http://jsfiddle.net/ydTCZ/
вот краткий полный пример html. См. demo http://jsfiddle.net/CU585/
<!DOCTYPE html><html><head><title>resizable columns</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
th {border: 1px solid black;}
table{border-collapse: collapse;}
.ui-icon, .ui-widget-content .ui-icon {background-image: none;}
</style>
<body>
<table>
<tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script>
$( "th" ).resizable();
</script></body></html>
или попробуйте мое решение: http://robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/ :)
хотя очень поздно, надеюсь, что это все еще помогает кому-то:
многие комментарии здесь и в других сообщениях касаются установки начального размера.
Я jqueryUi.Изменение размера. Начальная ширина определяется в пределах каждого тега " " в первой строке (). Это не похоже на то, что рекомендует colResizable; colResizable запрещает определение ширины в первой строке, там я должен был определить ширину в теге" ", который не был consikstent с jqueryresizable.
следующий фрагмент очень аккуратный и легче читать, чем обычные образцы:
$("#Content td").resizable({
handles: "e, s",
resize: function (event, ui) {
var sizerID = "#" + $(event.target).attr("id");
$(sizerID).width(ui.size.width);
}
});
Content-идентификатор моей таблицы. Ручки (e, s) определяют, в каких направлениях плагин может изменить размер. У вас должна быть ссылка на css jquery-ui, иначе она не будет работать.
Я попытался добавить в работу @user686605:
1) изменил курсор на col-resize на границе
2) Исправлена ошибка выделения текста при изменении размера
Я частично преуспел в обоих. Может быть, кто-то, кто лучше в CSS, может помочь переместить это вперед?
http://jsfiddle.net/telefonica/L2f7F/4/
HTML-код
<!--Click on th and drag...-->
<table>
<thead>
<tr>
<th><div class="noCrsr">th 1</div></th>
<th><div class="noCrsr">th 2</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>td 1</td>
<td>td 2</td>
</tr>
</tbody>
</table>
JS
$(function() {
var pressed = false;
var start = undefined;
var startX, startWidth;
$("table th").mousedown(function(e) {
start = $(this);
pressed = true;
startX = e.pageX;
startWidth = $(this).width();
$(start).addClass("resizing");
$(start).addClass("noSelect");
});
$(document).mousemove(function(e) {
if(pressed) {
$(start).width(startWidth+(e.pageX-startX));
}
});
$(document).mouseup(function() {
if(pressed) {
$(start).removeClass("resizing");
$(start).removeClass("noSelect");
pressed = false;
}
});
});
в CSS
table {
border-width: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table th {
border: 1px;
border-style: solid;
border-color: black;
background-color: green;
cursor: col-resize;
}
table th.resizing {
cursor: col-resize;
}
.noCrsr {
cursor: default;
margin-right: +5px;
}
.noSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}