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

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

46 голосов
/ 27 мая 2011

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

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

Ответы [ 8 ]

108 голосов
/ 23 декабря 2011

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

О colResizable

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

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

enter image description here

Особенности

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

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

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

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

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

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

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

См. samples и JSFiddle .

Пример кода 

$("#sample").colResizable({
        liveDrag:true
});
55 голосов
/ 27 мая 2011

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

6 голосов
/ 08 июля 2014

Вот короткий полный пример 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>
6 голосов
/ 27 мая 2011

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

2 голосов
/ 04 января 2016

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

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

Я использовал jqueryUi.Resizable . Начальная ширина должна быть определена в каждом теге "

" в первой строке (). Это отличается от того, что рекомендует colResizable; colResizable запрещает определять ширину в первой строке, там я должен был определить ширину в теге , который не соответствовал 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, иначе она не будет работать.

2 голосов
/ 25 февраля 2012
1 голос
/ 11 мая 2014

Я пытался добавить к работе @ user686605:

1) изменил курсор для изменения размера по краю th

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;
}
0 голосов
/ 11 июля 2013

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

https://github.com/OnekO/colresizable

...