以http://www.trirand.com/blog/jqgrid/jqgrid.html为例，我在一个MVC应用程序中有一个Grid as Subgrid，功能正常，但问题是CSS正在做一些非常奇怪的事情：
但如果我通过重新加载页面来改变序列，那么
我试图在一些jQuery中使用在gridComplete事件中的child_Pager_left上将填充设置为0，但是这里真的很奇怪 - Chrome在检查td＃childPager_left元素时显示填充确实是0，但是图形上它有一个很大的脂肪元素顶部和底部周围的绿色边框。
无论如何，我只是想不通为什么如果我以相反的顺序扩展行，一切都很好，但是自上而下会使寻呼机爆炸。任何善良的灵魂都知道问题是什么？我读了一篇关于MVC在桌面上设置CSS默认值的帖子，它们导致滚动条不应该出现，并且通过在帖子中添加修复它摆脱了滚动条 - 想知道是否有人偶然发现类似的东西子网格的寻呼机。
更新以回应Oleg的查询：
奥列格：谢谢你看看这个！我在jqGrid上读到了很多你很好的答案 - 你为社区做了一个令人惊叹的服务，我们负债累累！
我按此顺序使用的链接是：
样式：
使用Javascript：
为了确保它与使用旧版本的.js或.css库没有任何关系，我确实去了jqGrid站点，下载了jqGrid的5.0版本，以及jQuery 1.11并使用了那些 - 仍然表现得一样。
不要笑得太厉害，但这是代码：
这是在常见的页面布局中：
$(document).ready(function() {
$.jgrid.defaults = $.extend($.jgrid.defaults, {
closeAfterEdit: true,
datatype: 'json',
gridview: true,
height: 'auto',
ignoreCase: true,
loadonce: false,
loadui: "block",
mtype: 'POST',
multiboxonly: true,
rowList: [10, 20, 50],
rowNum: 20,
rownumbers: true,
viewrecords: true
});
这是页面中的javascript：
var lastParentGridRowSelected;
var lastChildGridRowSelected;
var grid = $('#list');
DependentDelOptions = {
onclickSubmit: function(rp_ge, rowid) {
// reset the value of processing option to true to skip the ajax request
rp_ge.processing = true;
DeleteDependent(rowid);
// use onclickSubmit function as "onclick" on "Delete" button delete row
grid.jqGrid('delRowData', rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
$(grid).trigger("reloadGrid", [{ page: grid[0].p.page }]);
}
return true;
},
processing: true
};
EmployeeDelOptions = {
onclickSubmit: function(rp_ge, rowid) {
rp_ge.processing = true;
DeleteEmployee(rowid);
grid.jqGrid('delRowData', rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
$(grid).trigger("reloadGrid", [{ page: grid[0].p.page }]);
}
return true;
},
processing: true
};
$(document).ready(function() {
$("#list").jqGrid({
url: '/User/EmployeeMaintenance/GetEmployeesForGrid',
colNames: ['Id', 'Last Name', 'First Name', 'Salary', '# Dependents', 'Total Benefit Cost', 'Total Discounts', 'Total Benefit Deductions', ''],
colModel: [
{ name: 'Id', key: true, index: 'Id', width: 240, align: 'left', editable: false, editrules: { edithidden: true }, hidden: true },
{ name: 'LastName', index: 'LastName', width: 200, align: 'left', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30 },
editrules: { required: true } },
{ name: 'FirstName', index: 'FirstName', width: 200, align: 'left', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30 },
editrules: { required: true } },
{ name: 'Salary', index: 'Salary', width: 90, align: 'right', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30, defaultValue: @Model.DefaultSalary },
editrules: { number: true, minValue: 0 }, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } },
{ name: 'DependentCount', index: 'DependentCount', width: 90, align: 'right', editable: false },
{ name: 'TotalBenefitCost', index: 'TotalBenefitCost', width: 130, align: 'right', editable: false, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } },
{ name: 'TotalDiscounts', index: 'TotalDiscounts', width: 100, align: 'right', editable: false, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } },
{ name: 'EmployeeDeduction', index: 'EmployeeDeduction', width: 150, align: 'right', editable: false, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } },
{ name: 'CustomActions', index: 'CustomActions', width: '80', align: 'center', sortable: false, formatter: 'actions', formatoptions: {
keys: true,
delOptions: EmployeeDelOptions,
onSuccess: function () {
$(grid).trigger('reloadGrid');
}
}
}
],
afterInsertRow: function(rowid, rowdata, rowelem) { $(grid).jqGrid.trigger('reloadGrid'); },
caption: 'Employees',
editurl: $("#___ActionUpdateEmployee").val(),
footerrow: true,
gridComplete: function() { ParentGridComplete(); },
onSelectRow: function(id) { ParentGridRowSelected(id) },
pager: $('#pager'),
subGrid: true,
subGridRowColapsed: function(subgridId, rowId) { SubGridRowCollapsed(subgridId, rowId) },
subGridRowExpanded: function(subgridId, rowId) { SubGridRowExpanded(subgridId, rowId) },
userDataOnFooter : true
}).jqGrid('navGrid', '#pager', { add: true, edit: false }, {}, {},
EmployeeDelOptions, { multipleSearch: true, overlay: false });
$('.ui-icon-refresh').click(function() {
$(grid).jqGrid.trigger('reloadGrid');
});
function ChildGridRowSelected(id) {
if (id && id !== lastChildGridRowSelected) {
// cancel editing of the previous selected row if it was in editing state.
if (typeof lastChildGridRowSelected !== "undefined") {
$(grid).jqGrid('restoreRow', lastChildGridRowSelected);
}
lastChildGridRowSelected = id;
}
};
function ParentGridComplete() {
var iCol = 0;
$(grid).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
.each(function() {
$("<div>", {
title: "Custom",
mouseover: function() { $(this).addClass('ui-state-hover'); },
mouseout: function() { $(this).removeClass('ui-state-hover'); },
click: function(e) { alert("'Custom' button is clicked in the rowis=" + $(e.target).closest("tr.jqgrow").attr("id") + " !"); }
}
).css({ "margin-right": "5px", float: "left", cursor: "pointer" })
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
$('.ui-icon-search').hide();
}
function ParentGridRowSelected(id) {
if (id && id !== lastParentGridRowSelected) {
// cancel editing of the previous selected row if it was in editing state.
if (typeof lastParentGridRowSelected !== "undefined") {
$(grid).jqGrid('restoreRow', lastParentGridRowSelected);
}
lastParentGridRowSelected = id;
// close all child grids
$('div[id^="list_"]').html('');
$(grid).trigger('reloadGrid');
}
};
function SubGridRowExpanded(subgridId, rowId) {
var subgridTableId = subgridId + "_t";
var dataId = $(grid).jqGrid('getCell', rowId, 'Id');
var pagerId = 'childPager'; // "p_" + subgridTableId;
jQuery("#" + subgridId).html("<table id='" + subgridTableId + "' class='scroll'></table>");
$("#"+subgridId).html("<table id='"+subgridTableId+"' class='scroll'></table><div id='"+pagerId+"' class='scroll'></div>");
jQuery("#" + subgridTableId).jqGrid({
url: "/User/EmployeeMaintenance/GetDependentsForGrid/" + dataId,
colNames: ['Id', 'Last Name', 'First Name', 'Active?', ''],
colModel: [
{ name: 'Id', key: true, index: 'Id', width: 100, editable: false, editrules: { edithidden: true }, hidden: true },
{ name: 'LastName', index: 'LastName', width: 200, align: 'left', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30 },
editrules: { required: true } },
{ name: 'FirstName', index: 'Firstname', width: 200, align: 'left', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30 },
editrules: { required: true } },
{ name: 'IsActive', index: 'IsActive', width: 60, align: 'center', editable: true, formatter: 'checkbox', edittype: "checkbox",
editoptions: { value: "Yes:No", defaultValue: "Yes" }, stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: ":All;true:Yes;false:No" } },
{ name: 'CustomActions', index: 'CustomActions', width: '80', align: 'center', sortable: false, formatter: 'actions', formatoptions: {
keys: true,
delOptions: DependentDelOptions,
onSuccess: function () {
$(grid).trigger('reloadGrid');
}
}
}
],
afterInsertRow: function(rowid, rowdata, rowelem) { $(grid).trigger('reloadGrid'); },
caption: 'Dependents for ' + $(grid).jqGrid('getCell', dataId, 'FirstName') + ' ' + $(grid).jqGrid('getCell', dataId, 'LastName'),
closeAfterEdit: true,
editurl: $("#___ActionUpdateDependent").val() + "?EmployeeId=" + dataId,
gridComplete: function() {
ParentGridComplete();
$('div[id^="gbox_list_"]').css('width', '80%').css('margin-right', '15px').css('padding-bottom', '15px').css('border', '0');
$('#childPager_left').css('padding', '0');
},
onSelectRow: function(id) { ChildGridRowSelected(id) },
pager: $('#' + pagerId),
}).jqGrid('navGrid', "#" + pagerId, { edit: false, add: true }, {}, {},
DependentDelOptions, { multipleSearch: true, overlay: false });
}
function SubGridRowCollapsed(subgridId) {
$('#childPager_left').css('padding', '0');
}
function DeleteDependent(rowId) {
$.ajax({
url: $("#___ActionDeleteDependent").val(),
data: { dependentId: rowId },
cache: false,
type: "POST",
dataType: "json",
success: function(data) {
if (data.Success) {
$("#divSuccess").html("Record Deleted.");
$("#divSuccess").show();
$(grid).trigger('reloadGrid');
} else {
$("#divError").show();
$("#divError").html(data.Message);
$("#divSuccess").hide();
}
},
error: function(req, status, error) { $("#divError").html("<span style='color: red'>An error occured: " + error + "</span>"); }
});
}
function DeleteEmployee(rowId) {
var id = $(grid).jqGrid('getCell', rowId, 'Id');
$.ajax({
url: $("#___ActionDeleteEmployee").val(),
data: { employeeId: id },
cache: false,
type: "POST",
dataType: "json",
success: function(data) {
if (data.Success) {
$("#divSuccess").html("Record Deleted.");
$("#divSuccess").show();
} else {
$("#divError").show();
$("#divError").html(data.Message);
$("#divSuccess").hide();
}
},
error: function(req, status, error) { $("#divError").html("<span style='color: red'>An error occured: " + error + "</span>"); }
});
}
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
`
奥列格，非常感谢你的帮助！