0

私のグリッドでは、単一検索のアイコン検索がありますが、検索ダイアログの確認が常に左上隅にポップアップ表示されます。左上隅ではなく、jqgrid の中央に検索ダイアログの確認を表示したい。これは私のコードです..

  <script type="text/javascript">
    jq(function() {
        jq("#grid").jqGrid({
            url:'/SpringGrid/yudi/crud',
            datatype: 'json',
            mtype: 'GET',
            colNames:['Id', 'First Name', 'Last Name'],
            colModel:[
                {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
                {name:'firstName',index:'lastName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10},sortable:true},
                {name:'lastName',index:'firstName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10},sortable:true}
            ],
            postData: {
            },
            rowNum:20,
            rowList:[20,40,60],
            height: 200,
            autowidth: true,
            rownumbers: true,
            pager: '#pager',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            caption:"Users",
            emptyrecords: "Empty records",
            loadonce: false,
            loadComplete: function() {
            },
            jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                cell: "cell",
                id: "id"
            }
        });
        jq("#grid").jqGrid('navGrid','#pager',
                {edit:false,add:false,del:false,search:true},
                { },
                { },
                { },
                {
                    sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                    closeOnEscape: true,
                    multipleSearch: true,
                    closeAfterSearch: true }
        );



        jq("#grid").navButtonAdd('#pager',
                {   caption:"Add",
                    buttonicon:"ui-icon-plus",
                    onClickButton: addRow,
                    position: "last",
                    title:"",
                    cursor: "pointer"
                }
        );

        jq("#grid").navButtonAdd('#pager',
                {   caption:"Edit",
                    buttonicon:"ui-icon-pencil",
                    onClickButton: editRow,
                    position: "last",
                    title:"",
                    cursor: "pointer"
                }
        );

        jq("#grid").navButtonAdd('#pager',
                {   caption:"Delete",
                    buttonicon:"ui-icon-trash",
                    onClickButton: deleteRow,
                    position: "last",
                    title:"",
                    cursor: "pointer"
                }
        );

        jq("#btnFilter").click(function(){
            jq("#grid").jqGrid('searchGrid',
                    {multipleSearch: false,
                     },
                        sopt:['eq']}
            );
        });

        // Toolbar Search
        jq("#grid").jqGrid('filterToolbar',{stringResult: true, searchOnEnter : true});

    });
</script>
4

2 に答える 2

0

1) ファイル名:ui_jqgrid.css

前: .ui-jqdialog { 表示: なし; 幅: 300px; 位置: 絶対; パディング: .2em; フォントサイズ:11px; オーバーフロー:可視;}

変更:

.ui-jqdialog { 表示: なし;フロート: 左;フォントサイズ: 13px;高さ: 100px;左: 40% !重要;オーバーフロー: 非表示;位置: 絶対;上: 30% !重要;z-index: 200 ;}

于 2014-02-18T09:52:38.730 に答える
0

これは、ウィンドウの中央にグリッドを表示するために使用するスタイルです。グリッドの中央が表示領域にない場合があるためです。

.ui-jqdialog {
    display: none;
    float: left;
    font-size: 13px;
    height: 100px;
    left: 40% !important;
    overflow: hidden;
    position: fixed;
    top: 30% !important;
    z-index: 200;
}
于 2013-05-02T11:48:14.780 に答える