10

私は Web アプリを開発しており、独自のデータグリッドを作成する方法を探しています。

さまざまな機能を備えた素晴らしいスクリプトがたくさんあることは知っていますが、独自の特定の機能、CSS スタイル、および独自の UI コントロールを使用する機能が必要です。

本当に必要なのは、列のサイズを変更する機能だけです。すべてのデータは ajax リクエストによって入力されるため、マークアップが行構造を維持していないか、セマンティックでないかどうかはあまり気にしません。

考えられる解決策は、各列をdivにすることだと考えていました。

私を助けることができるチュートリアルはありますか？

4

2 に答える 2

8

いくつかの拡張機能を備えたjQuery UI Resizableを使用することをお勧めします。プラグインはサイズ変更のみに焦点を当てており、任意のイベントで独自のコールバック関数を追加できるため、完全なカスタマイズが可能です。ただし、デフォルトでは、プラグインはテーブル ヘッダーをサイズ変更できませんが、サイズ変更時にテーブルの COLGROUP 領域を更新して、有効な HTML で実行することができました。

具体的なアイデアは次のようになります。

  1. HTML テーブルは、COLGROUP 領域で初期幅を指定し、CSS プロパティ table-layout:fixed を持っています。
  2. TH 要素を jQuery UI の .resizable() で装飾します。
  3. サイズ変更の開始時: アクティブな TH の一致する COL 要素を見つけ、元の幅を記憶します。
  4. サイズ変更時: サイズ変更デルタを計算し、選択した COL 要素を更新 (増加/減少) します。これにより、すべてのブラウザーで列全体のサイズが変更されます。

プラグインの初期化:

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

http://ihofmann.wordpress.com/2012/07/31/resizable-table-columns-with-jquery-ui/で、JavaScript、HTML マークアップ、クロスブラウザー CSS、Live-Demo を含む完全なソリューションについて説明しました。

于 2012-08-08T09:57:07.147 に答える
2

実際にはチュートリアルではありませんが、実際に作業できる基本的な例: http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/

于 2011-08-01T12:33:48.603 に答える