2

ダイアログ

ui.multiselect.js で使用する場合は、jqGrid で使用される列の並べ替えと列選択ダイアログを見つけてください。

js ファイルを変更せずに ui.multiselect プラグインのスタイルを変更したい。いくつかのことをオーバーライドしたいだけです。まず、2 つの列ヘッダーを同じレベルの高さにします - 6 つの項目を選択し、右側の列ヘッダーをすべて追加します。選択した 6 項目のテキストを Avlialble Columns に変更し、右側の列ヘッダーを Hidden Columns に変更したいと考えています。別のファイル (js) で ui.multiselect プラグインをオーバーライドすることでこれを行うにはどうすればよいので、 grid.jqGrid('columnChooser') を呼び出すと、オーバーライドされたスタイルが自動的に適用されます。

4

1 に答える 1

4

まず第一に、私はあなたの質問が非常に興味深いと思うので、私から+1します。

あなたが投稿した、直接あなたの質問の一部ではない写真からの1つのことは、私には少し奇妙に思えます。列選択ダイアログには、ダイアログの右下隅にサイズ変更可能な部分がありません。それはあなたが使用するいくつかの追加の設定である可能性があります。個人的には、ダイアログのサイズを変更できる方が良いと思います。

ここで、主な質問に戻ります。デフォルトのテキスト「選択されたアイテム」、「すべて追加」、「すべて削除」を変更するには、次のコードを使用できます。

$.extend($.ui.multiselect, {
    locale: {
        addAll: 'Make all visible',
        removeAll: 'Hidde All',
        itemsCount: 'Avlialble Columns'
    }
});

さらに、[列の選択]ダイアログの幅と、左右のパネルの比率を次のように変更することを検討できます。

$.extend(true, $.jgrid.col, {
    width: 500,
    msel_opts: {dividerLocation: 0.5}
});

columnChooserまたは、 ：の呼び出しで同じパラメータを設定します。

$grid.jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser',
            {width: 500, msel_opts: {dividerLocation: 0.5}});
    }
});

結果として、次のようなダイアログが表示されます

ここに画像の説明を入力してください

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

さらに、列チューザーの検索可能フィールドを使用する予定がない場合は、それを無効にすることを検討できます。ダイアログの幅が保存されます。

$.extend(true, $.ui.multiselect, {
    defaults: {
        searchable: false
    },
    locale: {
        addAll: 'Make all visible',
        removeAll: 'Hidde All',
        itemsCount: 'Avlialble Columns'
    }
});

更新：[列の選択]ダイアログで追加のカスタマイズが必要な場合は、ダイアログの作成後に手動で変更を行うことができます。たとえば、コードの結果

$(this).jqGrid('columnChooser',
    {width: 550, msel_opts: {dividerLocation: 0.5}});
$("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions')
    .prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Search:</label>');

次のようになります。

ここに画像の説明を入力してください

こちらの対応するデモをご覧ください。

于 2012-01-24T14:17:46.933 に答える