Изменяемые размеры столбцов таблицы - PullRequest
Новая
       3

Изменяемые размеры столбцов таблицы

9 голосов
/ 19 октября 2010

Я занимаюсь разработкой веб-приложения и ищу способ создания своих собственных сетей данных.

Я знаю, что существует множество фантастических сценариев со всеми прибамбасами, но мне нужны мои собственные специфические функциональные возможности, стиль CSS и возможность использовать в нем свои собственные элементы управления пользовательским интерфейсом.

Действительно, единственное, что мне нужно, - это возможность изменять размеры столбцов. Мне все равно, если разметка не поддерживает структуру строк или не является семантической, потому что все данные будут заполняться запросами ajax.

Я думал, что возможным решением было бы сделать каждый столбец делителем.

Есть ли учебник, который может мне помочь?

Ответы [ 2 ]

8 голосов
/ 08 августа 2012

Я рекомендую использовать jQuery UI Resizable с некоторыми улучшениями.Плагин действительно фокусируется только на изменении размера и обеспечивает полную настройку, так как вы можете добавлять свои собственные функции обратного вызова в любое событие.Однако по умолчанию плагин не может изменять размер заголовков таблицы, но я мог бы заставить его работать с допустимым HTML, обновляя область COLGROUP таблицы при изменении размера.

Конкретной идеей будет:

  1. Таблица HTML задает начальную ширину в своей области COLGROUP и имеет макет таблицы свойств CSS: fixed.
  2. Decorate THэлементы с пользовательским интерфейсом jQuery .resizable ().
  3. При запуске изменения размера: найдите соответствующий элемент COL активного TH и запомните исходную ширину.
  4. При изменении размера: рассчитайте дельту изменения размера и обновите (увеличить /уменьшить) выбранный элемент COL.Это изменит размер всего столбца в каждом браузере.

Плагин init: 

$(".resizable th").resizable({
 handles: "e",

 // set correct COL element and original size
 start: function(event, ui) {
   var colIndex = ui.helper.index() + 1;
   colElement = table.find("colgroup > col:nth-child(" +
   colIndex + ")");

   // get col width (faster than .width() on IE)
   colWidth = parseInt(colElement.get(0).style.width, 10);
   originalSize = ui.size.width;
 },

 // set COL width
 resize: function(event, ui) {
   var resizeDelta = ui.size.width - originalSize;

   var newColWidth = colWidth + resizeDelta;
   colElement.width(newColWidth);

   // height must be set in order to prevent IE9 to set wrong height
   $(this).css("height", "auto");
 }
});

Я описал полное решение, включая JavaScript, разметку HTML, кросс-браузерный CSS и Live-Demoв http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/

2 голосов
/ 01 августа 2011

Не совсем учебник, но очень простой пример, из которого вы могли бы работать: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

...