0
我在这里看过其他答案，并没有运气。我有一个jqgrid，我想保持列的宽度。我将resize Stop事件的宽度保存到一个数据库，然后每次加载网格时，我将colModel中的宽度设置为存储在数据库中的宽度，但它永远不会是正确的宽度。例如我有420存储为在列名称的数据库中的宽度，但当我加载网格，并检查col模型，它有150的宽度。我检查并确保正确的价值被传回，所以我不能理解为什么jqgrid不会使用它。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(){
}
};
您使用的是哪个版本的jqGrid？你使用哪个jqGrid的分支（[免费jqGrid]（https://github.com/free-jqgrid/jqGrid），[Guriddo jqGrid JS]（http://guriddo.net/?page_id=103334）或者一些旧的jqGrid在版本<= 4.7）中？免费的jqGrid有'setColWidth'方法，可以为你的场景提供帮助。我在开发免费的jqGrid之前将'setColWidth'方法作为插件发布。因此，如果您无法升级到免费的jqGrid，您可以使用它。 – Oleg
即时通讯使用Guriddo的一个版本5.0.1 –