我有一个在顶部有内联搜索的 jqGrid。在本地，它在 Chrome 和 IE11 中看起来都很漂亮。但是，当我将它移到我的 QA 环境时，它在 IE 中看起来很糟糕，而在 Chrome 中却很好。我已经修复了大部分问题，但无法修复搜索输入框的显示方式。它们居中并被切断。
这是我的 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});
谁能指出我正确的方向？谢谢。
最佳答案
我添加了:
cmTemplate: {searchoptions: {attr: {style: "text-align:left; width:120px"}}},
已经解决了问题。我不是 100% 确定为什么，但确实如此。
关于jquery - jqGrid 内联搜索切断搜索文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45962815/