我已经在这里查看了其他答案并没有运气。我有一个jqgrid，我想保持列宽。我将resize Stop事件的宽度保存到db，然后每次加载网格时，我将colModel中的宽度设置为db中存储的宽度，但它永远不是正确的宽度。例如，我在数据库中为列名称存储了420作为宽度，但是当我加载网格并检查col模型时，它的宽度为150.我已检查并确保正确的值被传回，所以我无法理解为什么jqgrid不会使用它。
我不知道为什么但是它好像jqgrid忽略了我在colmodel中传递的宽度。我在下面列出了我的jqgrid的缩减版本。谢谢你的帮助。
$('#ProjectTable').jqGrid({
datatype: 'json',
url: '<%= Url.Action("projectGridData", "SampleSelection") %>',
mType: 'POST',
colNames: [
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.ProjectId", "ID") %>"),
"",
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Name", "Name") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Code", "Code") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Manager", "Manager") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.StartDate", "Start Date") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.CompletionDate", "CompletionDate") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Remark", "Remark") %>"),
htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Status", "Status") %>"),
""
],
colModel:[
{name: 'FieldProjectId', width: 10, align: 'center', key: true, search: false, hidden: true},
{name: 'Edit', width: 30, search: false, sortable: false, align: 'center'},
{name: 'Name', width: ColumnManager.GetColumnWidth('ProjectTable', 'Name'), index: 'Name', editable: true},
{name: 'Code', width: 50, index: 'Code', editable: true},
{name: 'Manager', width: 100, index: 'Manager', editable: true},
{name: 'StartDate', width: 65, index: 'StartDate', search: true, formatter : 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'd/m/Y'}, editable: true,editoptions : { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
}}, searchoptions: { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
} }},
{name: 'CompletedDate', width: 65, index: 'CompletedDate', formatter : 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'd/m/Y'}, editable: true, editoptions : { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
}}, sorttype:'date' , searchoptions: { dataInit: function (elem) { $(elem).datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
onSelect : function () { $('#ProjectTable')[0].triggerToolbar(); }
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
}}},
{name: 'Remark', width: 200, index: 'Remark', search: false, editable: true},
{name: 'Status', width: 95, index: 'Status', editable: true },
{name: 'Delete', width: 20, search: false, sortable: false, align: 'center'},
],
caption: htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Caption", "Project") %>"),
width: $('#tabs-projects').width() - 20,
//shrinkToFit: false,
sortname: 'FieldProjectId',
loadui: 'block',
rowNum: 20,
rowList: [10,25,50,100,200],
sortorder : 'desc',
headertitles:true,
resizeStop: function(width, index) {
var colModel = $("#ProjectTable").jqGrid('getGridParam','colModel');
ColumnManager.SetColumnWidth("ProjectTable",colModel[index].name,width);
alert(JSON.stringify(colModel));
},
height: 'auto',
viewrecords: true,
toolbar: [true, "top"],
pager: $('#ProjectPager')
}
});
}, 1000);
});
}
}
).filterToolbar();
$('#ProjectTable').navGrid('#ProjectPager', {
search: false,
add: false,
edit: false,
del: false,
refresh: true
});
设置和获取列宽的函数：
var ColumnManager = {
SetColumnWidth : function(grid, column, value)
{
$.ajax({
url: '<%= Url.Action("SaveGridColumWidthPreference", "SampleSelection") %>',
dataType: 'json',
type: 'POST',
data: {
gridID: grid,
width: value,
colName: column
},
success:function(data) {
}
});
},
GetColumnWidth : function(grid, column)
{
$.ajax({
url: '<%= Url.Action("GetGridColumWidthPreference", "SampleSelection") %>',
dataType: 'json',
type: 'POST',
data: {
gridID: grid,
colName: column
},
success:function(data) {
if(data > 0)
{
alert(data);
return data;
}
else
{
alert(projectDefaults["name"]);
return projectDefaults["name"]; //should return default here
}
}
});
},
ReturnColumnWidth : function(){
}
};
答案 0 :(得分：1)
我不遵循Guriddo jqGrid JS因为我开发free jqGrid开始更改jqGrid 4.7.1的许可协议并在Guriddo jqGrid JS中重命名。尽管如此，我发现您使用的Guriddo jqGrid JS 5.0.1具有resizeColumn方法，与我setColWidth中最初建议的the old answer相同。我在我发布的第一版免费jqGrid中加入了setColWidth。
我建议您阅读包含the answer的the demo。在我看来，该演示实现了非常接近的要求。它在Web浏览器的localStorage中保存/恢复网格状态（包括列宽和许多其他状态），而不是通过Ajax将数据发送到服务器。我想你可以修改代码对应你的requiremnets。