web-dev-qa-db-ja.com

jQueryを使用したサイズ変更可能なテーブル列

これ は、テーブルの列幅を変更することができる唯一のjQueryプラグインですが、テーブルとうまく統合できず、不必要な肥大化（Cookieの保存）があります。列のサイズを変更するための他のプラグインはありますか？ （datagridプラグインではなく、それらを提案しないでください）。

そうでない場合、私は自分で書きます。それほど難しくないはずです。ユーザーがtdの境界をクリックしたとき（サイズ変更のため）を検出する方法がわかりません。何か案は？

jqueryhtmlhtml-tableresize
47
user686605

だから、私は自分の、今のところ必要最低限​​の機能を書き始めました、来週それに取り組んでいます... http://jsfiddle.net/ydTCZ/

55
user686605

:-)同じ状況に陥ると、自分のリクエストに一致するjQueryプラグインがなかったので、独自のプラグインの開発に少し時間を費やします。 colResizable

ColResizableについて

colResizableは、テーブルの列を手動でドラッグしてサイズを変更する無料のjQueryプラグインです。マウスとタッチデバイスの両方と互換性があり、ページの更新またはポストバック後のレイアウトの永続化など、いくつかの素晴らしい機能があります。パーセンテージベースとピクセルベースの両方のテーブルレイアウトで機能します。

サイズは小さく（colResizable 1.0はわずか2kb）、すべての主要なブラウザー（IE7 +、Firefox、ChromeおよびOpera）と完全に互換性があります。

enter image description here

特徴

colResizableは、以下にリストされている機能を備えた同様のプラグインが見つからなかったために開発されました。

  • マウスおよびタッチデバイス（PC、タブレット、および携帯電話）との互換性
  • パーセントベースとピクセルベースの両方のテーブルレイアウトとの互換性
  • テーブルの合計幅を変更しない列のサイズ変更（オプション）
  • 外部リソース（画像やスタイルシートなど）は不要
  • ページの更新またはポストバック後のオプションのレイアウト永続性
  • 列アンカーのカスタマイズ
  • 小さな足跡
  • ブラウザー間の互換性（IE7 +、Chrome、Safari、Firefox）
  • イベント

他のプラグインとの比較

colResizableは、テーブル列のサイズを変更する最も洗練されたプラグインです。多くのカスタマイズの可能性があり、タッチデバイスとも互換性があります。しかし、おそらくcolResizableを最も優れた選択肢にしている最も興味深い機能は、ピクセルベースの表レイアウトと流動的なパーセンテージ表レイアウトの両方と互換性があることです。しかし、それはどういう意味ですか？

テーブルの幅が90％に設定され、ブラウザのサイズが変更されるとcolResizableを使用して列幅が変更される場合、列幅は比例してサイズ変更されます。他のプラグインの動作はおかしくなりますが、colResizableは期待どおりに機能します。

colResizableは、テーブルのmax-width属性とも互換性があります。すべての列の合計がテーブルのmax-widthを超える場合、それらは自動的に修正および更新されます。

他のプラグインと比較した別の大きな利点は、テーブルがupdatePanel内にある場合、ページの更新、ポストバック、さらには部分的なポストバックと互換性があることです。それはすべての主要なブラウザー（IE7 +、Firefox、ChromeおよびOpera）と互換性がありますが、他のプラグインは古いIEバージョンで失敗します。

samples および JSFiddle を参照してください。

コードサンプル

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

完全な短い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
mikeyreilly

flexigrid を試してみてください。ここに もう1つのリファレンス

6
diEcho

または私の解決策を試してください： http://robau.wordpress.com/2011/08/16/unobtrusive-table-column-resize-with-jquery-as-plugin/ :)

2
RobAu

非常に遅いですが、それがまだ誰かを助けることを願っています：

ここや他の投稿のコメントの多くは、初期サイズの設定を懸念しています。

jqueryUi.Resizable を使用しました。初期幅は、最初の行（<TR>）の各「<td>」タグ内で定義されます。これは、colResizableが推奨するものとは異なります。 colResizableは最初の行で幅を定義することを禁止しているため、jqueryresizableと一致しない「<col>」タグで幅を定義する必要がありました。

次のスニペットは、通常のサンプルよりも非常にきれいで読みやすいです。

$("#Content td").resizable({
    handles: "e, s",
    resize: function (event, ui) {
        var sizerID = "#" + $(event.target).attr("id");
        $(sizerID).width(ui.size.width);
    }
});

コンテンツはテーブルのIDです。ハンドル（e、s）は、プラグインがサイズを変更できる方向を定義します。 jquery-uiのcssへのリンクが必要です。そうしないと機能しません。

2
Alireza Ahmadi Rad

@ 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;
}
1
Adam

私は自分でjquery uiウィジェットを作成しました。それで十分かどうかを考えています。

https://github.com/OnekO/colresizable

0
OnekO