JqG​​rid,如何集中searchGrid对话框..?

时间:2013-05-02 07:17:31

标签: jqgrid

在我的网格中,我有一个图标搜索单个搜索,但搜索对话框确认一直弹出左上角。我希望在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>

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

1)FileName:ui_jqgrid.css

上一个: .ui-jqdialog {display:none;宽度:300px;位置:绝对;填充:.2em;字体大小:11像素;溢出:可见;}

修改:

.ui-jqdialog {display:none; float:left; font-size:13px; height:100px; left:40%!important; overflow:hidden; position:absolute; top:30%!important; z- index:200;}