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

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

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

Ответы

Ответ 1

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

Ответ 2

:-) Как только я оказался в той же ситуации, плагин 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 таблицы: если сумма всех столбцов превышает максимальную ширину таблицы, они автоматически фиксируются и обновляются.

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

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

Пример кода

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

Ответ 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>

Ответ 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>

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

Ответ 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, иначе это не сработает.