Zmienna tabela kolumn

Question

Zajmuję się tworzeniem aplikacji internetowej i szukam sposobu na tworzenie własnych datagridów.

Wiem, że istnieje wiele fantastycznych skryptów z wszystkimi dzwonkami i gwizdkami, ale potrzebuję mojej własnej specyficznej funkcjonalności, stylizacji css i możliwości korzystania z własnych kontrolek interfejsu użytkownika.

Naprawdę, jedyne, czego potrzebuję, to możliwość zmiany rozmiaru kolumn. Nie obchodzi mnie to, że znaczniki nie zachowują struktury wiersza lub nie są semantyczne, ponieważ wszystkie dane będą wypełniane przez żądania ajax.

Myślałem, że rozwiązaniem może być uczynienie z każdej kolumny elementu div.

Czy istnieje pomoc, która może mi pomóc?

Answer 1

Niezupełnie tutorial, ale naprawdę gołe kości przykład można pracować z: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

Answer 2

polecam użyć jQuery UI Resizable z pewnymi ulepszeniami. Wtyczka koncentruje się tylko na zmianie rozmiaru i umożliwia pełne dostosowanie, ponieważ możesz dodać własne funkcje wywołania zwrotnego w każdym wydarzeniu. Domyślnie wtyczka nie może jednak wymieniać nagłówków tabeli, ale mogłaby sprawić, by działała z poprawnym HTML, aktualizując obszar COLGROUP tabeli przy zmianie rozmiaru.

Konkretnym pomysłem byłoby:

1. tabela HTML określa początkową szerokość na swoim obszarze COLGROUP i ma właściwości CSS table-layout: fixed.
2. Udekoruj elementy TH za pomocą .resizable() jQuery UI.
3. Przy rozpoczęciu zmiany rozmiaru: Znajdź pasujący element COL aktywnego TH i zapamiętaj oryginalną szerokość.
4. Podczas zmiany rozmiaru: obliczyć wielkość zmiany i zaktualizować (zwiększyć/zmniejszyć) wybrany element COL. Spowoduje to zmianę rozmiaru całej kolumny przy każdej przeglądarce.

Plugin startowych:

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

opisałem pełne rozwiązanie wraz JavaScript, HTML, CSS znaczników cross-browser i live-Demo na http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/