jqGrid内联搜索切断搜索文本框

时间:2017-08-30 14:14:05

标签: jquery css jqgrid

我有一个在顶部有内联搜索的jqGrid。在本地,它在Chrome和IE11中都很漂亮。但是,当我将它移动到我的QA环境时,它在IE中看起来很糟糕,在Chrome中很好。我已经解决了大部分问题,但我无法解决搜索输入框的显示方式。它们居中并被切断。

enter image description here

这是我的jqGrid代码:

jQuery("#childGrid").jqGrid({
    url: 'ServiceDelivery.aspx/GetChildSearchResults',
    mtype: 'POST',
    datatype: 'json',
    colNames: ['Case ID', 'Last Name', 'First Name', 'DOB', 'City', 'State', 'Svc No Cost'],
    colModel: [
               { name: 'CaseID', index: 'CaseID', key: true, search: true, hidden: false, width: 75, align: "left", editable: false, sorttype: 'integer', searchoption: { sopt: ['eq'] } },
               { name: 'ChildLastName', index: 'ChildLastName', key: true, search: true, hidden: false, width: 120, align: "left", editable: false, sorttype: 'string', searchoption: { sopt: ['cn'] } },
               { name: 'ChildFirstName', index: 'ChildFirstName', key: true, search: true, hidden: false, width: 120, align: "left", sorttype: 'string', searchoption: { sopt: ['cn'] }, editable: false },
               { name: 'DateOfBirth', index: 'DateOfBirth', key: true, search: true, hidden: false, width: 75, align: "left", editable: false, sorttype: 'date', searchoption: { sopt: ['cn'] }, formatter: 'date', formatoptions: { newformat: 'n/j/Y' }, searchoptions: { sopt: ['cn'] } },
               { name: 'ResidesTown', index: 'ResidesTown', key: true, search: true, hidden: false, width: 120, align: "left", editable: false, sorttype: 'string', searchoption: { sopt: ['cn'] }, editrules: { required: true } },
               { name: 'ResidesState', index: 'ResidesState', key: true, search: true, hidden: false, width: 50, align: "left", editable: false, sorttype: 'string', searchoption: { sopt: ['cn'] }, editrules: { required: true } },
               { name: 'IsServicesAtNoCost', index: 'IsServicesAtNoCost', key: true, search: true, hidden: false, width: 80, align: "left", editable: false, sorttype: 'boolean', searchoption: {sopt: ['cn'] } }

    ],
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {

        if (postData.searchField == null) {
            postData.searchField = "";
            postData._search = false;
            postData.searchOper = "";
            postData.searchString = "";
            postData.fein = $$('hidFEIN').val();
            postData.spop = $$('hidSPOP').val();
        }
        return JSON.stringify(postData);

    },
    jsonReader: {
        id: "CaseID",

        root: function (obj) { 
                var x = $.parseJSON(obj.d);
                return x.rows;
        },
        page: function (obj) {
                var x = $.parseJSON(obj.d);
                return x.page;

        }, total: function (obj) {
                var x = $.parseJSON(obj.d);
                return x.total;
        }, records: function (obj) {
                var x = $.parseJSON(obj.d);
                return x.rows.length;
        }, repeatitems: false

    },
    loadBeforeSend: function (xhr) {

    },
    loadComplete: function (data) {

    },
    loadError: function (xhr, st, err) {
        alert("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
    },
    pager: jQuery('#childPager'),
    rowNum: 50,
    rowList: [50, 100, 150, 200],
    sortname: '',
    sortorder: "",
    modal: true,
    ignoreCase: true,
    viewrecords: true,
    shrinkToFit: false,
    loadonce: true, //false,
    width: 690,
    height: 200,
    editurl: '',
    grouping: false,
    footerrow: false,
    hoverrows: false,
    grouping: false,
    footerrow: false,
    userDataOnFooter: true,
    caption: "<h2>Child Search</h2>",
    sortname: '',
    sortorder: "asc",
    onSelectRow: function () {
        getSelectedRowData('childSearch'); return false;
    }
}).navGrid("#childPager", { edit: false, add: false, del: false, search: false, refresh: true, view: false })
$('#childGrid').jqGrid('filterToolbar', { searchOnEnter: true, enableClear: true});

有人能指出我正确的方向吗?谢谢。

1 个答案:

答案 0 :(得分:0)

我已添加:

cmTemplate: {searchoptions: {attr: {style: "text-align:left; width:120px"}}},

解决了这个问题。我不是百分之百确定原因,但确实如此。