1

filterToolbar 検索ボックスをグリッドに追加し、この質問のように高さスタイルを変更しました。

この入力を中央に配置したい (試してみましtext-align:centerたが、うまくいきませんでした)。入力ボックスを列ヘッダーの中央に配置するにはどうすればよいですか?

更新: これは私の colModel コードです:

{width:10,name:'Code1',index:'Code1', jsonmap:'Code1',searchoptions:{dataInit: function(elem){$(elem).css('font','15px'); $(elem).height(18);}}},
{width:40,name:'DescriptionHe1',index:'DescriptionHe1', jsonmap:'DescriptionHe1',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "he")?false:true},
{width:40,name:'DescriptionEn1',index:'DescriptionEn1', jsonmap:'DescriptionEn1',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "en")?false:true},                                                    
{width:10,name:'Code2',index:'Code2', jsonmap:'Code2',searchoptions:{dataInit: function(elem){$(elem).css('font','15px'); $(elem).height(18);}}},
{width:40,name:'DescriptionHe2',index:'DescriptionHe2', jsonmap:'DescriptionHe2',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "he")?false:true},
{width:40,name:'DescriptionEn2',index:'DescriptionEn2', jsonmap:'DescriptionEn2',searchoptions:{dataInit: function(elem){$(elem).css('font','15px');$(elem).height(18);}}, hidden:(language == "en")?false:true}

前もって感謝します。

4

1 に答える 1

2

追加の CSS を使用すると、jqGrid のデフォルトの動作が変わると思います。jqGridは、デフォルトで検索ツールバーからのすべての入力フィールドを中央に配置します。

検索バーから要素のスタイルを変更するattrには、searchoptionsを使用できます。

デモでは次のように表示されます。

ここに画像の説明を入力

デモは使用します

cmTemplate: {
    searchoptions: {
        attr: {
            style: "width:auto;padding:0;max-width:100%"
        }
    }
}

検索バーのすべての要素に共通のスタイルを設定します。さらに、さまざまな列の属性を設定maxlengthします。size例えば

searchoptions: { attr: { maxlength: 6, size: 6 }}

別のデモでは、検索ツールバーの要素ごとに異なる配置を設定する方法を示しています。

ここに画像の説明を入力

デモでは、左揃えのフィールドにプロパティを使用しました

searchoptions: {
    attr: {
        maxlength: 6,
        size: 6,
        style: "width:auto;padding:0;max-width:100%;float:left"
    }
}

と

searchoptions: {
    attr: {
        maxlength: 6,
        size: 6,
        style: "width:auto;padding:0;max-width:100%;float:right"
    }
}

右揃えフィールド用。

height内部で使用した入力フィールドの高さを設定するにはsearchoptions.attr.style:

style: "width:auto;padding:0;max-width:100%;height:5em;float:left"

PS私は追加でCSSを使用しました

.ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th {
    height: auto; padding-bottom: 1px
}

検索ツールバーの視認性を少し向上させます。

于 2012-12-12T12:00:50.060 に答える