Изменение размера столбцов таблицы с помощью jQuery

Это - единственный плагин jQuery, который я могу найти для изменения ширины столбцов таблицы, но он не очень хорошо интегрируется с моей таблицей и не имеет необходимости раздувание (экономит куки). Существуют ли какие-либо другие плагины для простого изменения размеров столбцов? (НЕ плагины datagrid, пожалуйста, не предлагайте их).

Если нет, я напишу сам, это не должно быть слишком сложно, я просто не знаю, как определить, когда пользователь нажимает на границу td (для изменения размера). Любые идеи?

Ответ 1

Итак, я начал писать свои собственные, только бонусные функциональные возможности на данный момент, будет работать над этим на следующей неделе... http://jsfiddle.net/ydTCZ/

Ответ 2

:-) Как только я оказался в той же ситуации, плагин jQuery не соответствовал моим запросам, поэтому я потратил некоторое время на разработку своего собственного: colResizable

О colResizable

colResizable - бесплатный плагин jQuery для изменения размеров столбцов таблицы, перетаскивая их вручную. Он совместим как с мышами, так и с сенсорными устройствами и имеет некоторые приятные функции, такие как сохранение макета после обновления страницы или обратной передачи. Он работает как с раскладками таблиц в процентах, так и на пикселях.

Маленький размер (colResizable 1.0 - всего 2 кбайт), и он полностью совместим со всеми основными браузерами (IE7 +, Firefox, Chrome и Opera).

Функции

colResizable был разработан, поскольку не было найдено другого подобного плагина с перечисленными ниже функциями:

Совместимость с мышь и сенсорными устройствами (ПК, планшеты и мобильные телефоны).
Совместимость с раскладками таблиц в процентах и пикселях
Изменение размера столбца без изменения общей ширины таблицы (необязательно)
Не нужны внешние ресурсы (например, изображения или таблицы стилей)
Дополнительная настойчивость компоновки после обновления страницы или обратной передачи
Настройка привязок столбцов
Малый размер
Совместимость между браузерами (IE7 +, Chrome, Safari, Firefox)
События

Сравнение с другими плагинами

colResizable - самый полированный плагин для изменения размеров столбцов таблицы. Он имеет множество возможностей для настройки, а также совместим с сенсорными устройствами. Но, вероятно, наиболее интересной особенностью, которая делает colResizable лучшим выбором, является то, что он совместим как с раскладками таблиц на основе пикселей, так и с жидкостями. Но что это значит?

Если ширина таблицы задана, допустим, 90%, а ширина столбца изменяется с помощью colResizable, при изменении размера браузера ширины столбцов пропорционально изменяются. В то время как другие плагины ведут себя нечетно, colResizable выполняет свою работу так, как ожидалось.

colResizable также совместим с атрибутом max-width таблицы: если сумма всех столбцов превышает максимальную ширину таблицы, они автоматически фиксируются и обновляются.

Другим большим преимуществом по сравнению с другими плагинами является то, что он совместим с обновлением страницы, обратными передачами и даже частичными обратными передачами, если таблица находится внутри updatePanel. Он совместим со всеми основными браузерами (IE7 +, Firefox, Chrome и Opera), в то время как другие плагины не работают со старыми версиями IE.

Смотрите samples и JSFiddle.

Пример кода

$("#sample").colResizable({
        liveDrag:true
});

Ответ 3

попробуйте flexigrid, здесь Еще одна ссылка

Ответ 4

Вот короткий полный html-пример. См. Демонстрацию 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>

Ответ 5

Или попробуйте мое решение: http://robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/:)

Ответ 6

Я попытался добавить к работе @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>

$(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;
}

Ответ 7

Хотя очень поздно, надеюсь, что это все еще помогает кому-то:

Многие комментарии здесь и в других сообщениях касаются установки начального размера.

Я использовал jqueryUi.Resizable. Начальная ширина определяется в каждом теге "<td> в первой строке (<TR> ). Это не похоже на то, что рекомендует colResizable; colResizable запрещает определять ширину в первой строке, там мне нужно было определить ширину в теге" <col> ", который не был согласован с jqueryresizable.

следующий фрагмент очень аккуратный и более простой для чтения, чем обычные образцы:

$("#Content td").resizable({
    handles: "e, s",
    resize: function (event, ui) {
        var sizerID = "#" + $(event.target).attr("id");
        $(sizerID).width(ui.size.width);
    }
});

Содержимое - это идентификатор моей таблицы. Ручки (e, s) определяют, в каких направлениях плагин может изменить размер. У вас должна быть ссылка на css jquery-ui, иначе это не сработает.

Ответ 8

Я сделал свой собственный jquery ui widget, просто подумав, достаточно ли он.

https://github.com/OnekO/colresizable