2

次のようにjqGrid columnChooserを使用しています。

    jQuery(grid).jqGrid(
        'navButtonAdd',
        pagerDiv,
        {
            caption: "Columns",
            buttonicon: "ui-icon-newwin",
            title: "Hide/Show Columns",
            onClickButton: function () {
                $(this).jqGrid('columnChooser', {
                    done: function (perm) {
                        if (perm) {
                            $(this).jqGrid('remapColumns', perm, true);
                        }
                    },
                    modal: true,
                    width: 400,
                    height: 300,
                    classname: 'column-chooser-select'
                });
            }
        }
    );

列が追加または削除されるたびに発生する columnChooser (jqGrid に付属するjQuery UI Multiselectプラグインを使用) でイベント ハンドラーを指定する方法があるかどうか疑問に思っていました。だから私はそれが2つの部分からなる質問だと思います：

  1. jQuery UI Multiselect はそのようなことをサポートしていますか?
  2. もしそうなら、jqGrid ソースを変更せずに接続する方法はありますか?

私が達成しようとしていることの背景のビット:

デフォルトのグリッド構成では、多くの列が非表示になっています。これらの列の一部はデータベースから取り込まれません - それらはあいまいでめったに使用されないデータ要素であり、取り込まれるとクエリ実行のパフォーマンスが劇的に低下します (1 億以上のレコードを持つテーブルを含む複数の結合)。

ユーザーがこれらの列のいずれかを選択して表示する場合、サーバーへの別のラウンドトリップが必要であり、時間がかかる可能性があることを警告し、列の追加をキャンセルするオプションを提供します。

ありがとう

4

2 に答える 2

5

私はあなたの問題を理解し、あなたの質問が興味深いと思うので、問題を解決する方法を示すデモを書きました。

columnChooserは、jQuery UI Sortable を使用する jQuery UI Multiselect プラグインを内部的に使用します。したがって、jQuery UI Sortable のsortreceiveイベントを使用して、必要な情報を取得することをお勧めします。

コードは次のようになります

$("#grid").jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser');
        $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
            .bind("sortreceive", function (event, ui) {
                alert('column "' + ui.item.text() + '" is choosed');
            });
        $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.available a.action")
            .click(function () {
                alert('column "' + $(this).parent().text() + '" is choosed');
            });

    }
});

ここでデモを参照してください。

コードは、ダイアログの初期化時に列チューザーにあった列の初期リストの「+」の「クリック」イベントをバインドします。あなたにはそれで十分だと思います。必要に応じて、コードを簡単に変更して、columnChooser.

デモで使用したことを忘れがちですがcolumnChooser(回答を参照)、上記の提案は元のバージョンでcolumnChooserも機能します。

于 2012-05-03T21:49:57.020 に答える
1

列チューザー プラグインの JqGrid で以下のコードを使用しています。グリッドの[すべて選択]チェックボックスをオンにすると。特定の列を除外したい (デフォルトではグリッドに表示されません)。
col モデルで hidden=True プロパティを使用しました。これらも列チューザーで処理したいです。

function Properties_Columnchooser() {
    $('#btn_setColumns').click(function () {
        jQuery('#grid-tableProperties').jqGrid('columnChooser',{
        "shrinkToFit" : true,
        "autowidth" : true,
        done : function(perm) {
            w = $(window).width();
            // alert('done ' + w);
            if (perm) 
               {
                this.jqGrid("remapColumns", perm, true);
                 this.setGridWidth(w - 30, true);

                $('.ui-search-input').show();
            } 
             else 
            {
            }
        }
    }
);
    });
}
于 2014-08-11T10:05:48.407 に答える