0
您好一直試圖將列順序和寬度保存到每個用戶的數據庫。我覺得它保存並正確加載數據。但是網格不會改變以反映colModel。我跟着這個awnser Here.一切似乎正常工作，網格並沒有反映出改變的colModel。我沒有得到任何錯誤，數據保存並正確提取，所以任何幫助或建議將不勝感激。謝謝。持續行順序和行寬，free-jqGrid
經過進一步調查，我改變了代碼使用本地存儲，而不是ajax調用，這個工程。所以問題是讓頁面等待響應。
我在下面列出了我的代碼。首先是在參考答案Here中提供的功能。
var $grid = $("#ProjectTable"),
cm = [
{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: 100, 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'}
],
saveObjectInLocalStorage = function (storageItemName, object) {
$.ajax({
url: '<%= Url.Action("SaveColumnStatePreference", "SampleSelection") %>',
dataType: 'json',
type: 'POST',
data: {
grid: storageItemName,
columnsState: JSON.stringify(object)
},
success:function(data) {
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("Failed to save column state");
}
});
},
getObjectFromLocalStorage = function (storageItemName) {
$.ajax({
url: '<%= Url.Action("GetColumnStatePreference", "SampleSelection") %>',
dataType: 'json',
type: 'POST',
data: {
grid: storageItemName
},
success:function(data) {
if(data !== undefined)
{
alert(data.colState);
return $.parseJSON(data.colState);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("Failed to recover column state");
}
});
},
myColumnStateName = function (grid) {
return window.location.pathname + "#" + grid[0].id;
},
idsOfSelectedRows = [],
getColumnNamesFromColModel = function() {
var colModel = this.jqGrid("getGridParam", "colModel");
return $.map(colModel, function (cm, iCol) {
// we remove "rn", "cb", "subgrid" columns to hold the column information
// independent from other jqGrid parameters
return $.inArray(cm.name, ["rn", "cb", "subgrid"]) >= 0 ? null : cm.name;
});
},
saveColumnState = function() {
var p = this.jqGrid("getGridParam"), colModel = p.colModel, i, l = colModel.length, colItem, cmName,
postData = p.postData,
columnsState = {
search: p.search,
page: p.page,
rowNum: p.rowNum,
sortname: p.sortname,
sortorder: p.sortorder,
cmOrder: getColumnNamesFromColModel.call(this),
selectedRows: idsOfSelectedRows,
colStates: {}
},
colStates = columnsState.colStates;
if (postData.filters !== undefined) {
columnsState.filters = postData.filters;
}
for (i = 0; i < l; i++) {
colItem = colModel[i];
cmName = colItem.name;
if (cmName !== "rn" && cmName !== "cb" && cmName !== "subgrid") {
colStates[cmName] = {
width: colItem.width,
hidden: colItem.hidden
};
}
}
saveObjectInLocalStorage(myColumnStateName(this), columnsState);
},
myColumnsState,
isColState,
restoreColumnState = function (colModel) {
var colItem, i, l = colModel.length, colStates, cmName,
columnsState = getObjectFromLocalStorage(myColumnStateName(this));
if (columnsState) {
colStates = columnsState.colStates;
for (i = 0; i < l; i++) {
colItem = colModel[i];
cmName = colItem.name;
if (cmName !== "rn" && cmName !== "cb" && cmName !== "subgrid") {
colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]);
}
}
}
return columnsState;
},
updateIdsOfSelectedRows = function (id, isSelected) {
var index = $.inArray(id, idsOfSelectedRows);
if (!isSelected && index >= 0) {
idsOfSelectedRows.splice(index, 1); // remove id from the list
} else if (index < 0) {
idsOfSelectedRows.push(id);
}
},
firstLoad = true;
myColumnsState = restoreColumnState.call($grid, cm);
isColState = myColumnsState !== undefined && myColumnsState !== null;
idsOfSelectedRows = isColState && myColumnsState.selectedRows !== undefined ? myColumnsState.selectedRows : [];
其次代碼爲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: cm,
caption: htmlDecode("<%=Atmis.EncodedLabel("Sample.Project.Caption", "Project") %>"),
width: $('#tabs-projects').width() - 20,
sortname: 'FieldProjectId',
loadui: 'block',
rowNum: 20,
rowList: [10,25,50,100,200],
sortorder : 'desc',
headertitles:true,
ajaxGridOptions : {
beforeSend: function(xhr) {
$('#ProjectTable').closest('.ui-jqgrid').block({
centerX: false,
centerY: false,
message: $('#ProjectLoading'),
css: {
position: 'absolute',
padding: 0,
margin: 0,
width: 'auto',
top: '40%',
left: '45%',
textAlign: 'center',
cursor: 'wait'
},
overlayCSS: {
backgroundColor: '#524f4f',
opacity: 0.6,
cursor: 'wait'
}
});
},
complete: function(xhr) {
$('#ProjectTable').closest('.ui-jqgrid').unblock();
},
error: function(jqXHR, textStatus, errorThrown) {
$('#ProjectTable').closest('.ui-jqgrid').unblock();
}
},
resizeStop: function(width, index) {
saveColumnState.call($grid, $grid[0].p.remapColumns);
},
sortable: {
update: function(relativeColumnOrder){
saveColumnState.call($grid);
}
},
height: 'auto',
viewrecords: true,
toolbar: [true, "top"],
pager: $('#ProjectPager'),
postData: {
withLinks: true,
clientId: function() {
return $('#ClientId').val();
}
},
editData: {
clientId: function() {
return $('#ClientId').val();
}
},
beforeRequest: function() {
},
onclickSubmit: function (options, postData) {
return {
ClientId: $('#ClientId').val()
};
},
gridComplete: function() {
},
jsonReader:{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
onSelectRow: function (id) {
// get data from the column 'userCode'
var selRowId = $(this).jqGrid('getGridParam', 'selrow');
var userCode = $(this).jqGrid('getCell', selRowId, 'FieldProjectId');
SelectedProjectID = userCode;
$('#tabs').tabs('enable', 1);
$('#tabs').tabs('enable', 3);
},
loadComplete: function (data){
var $this = $(this), p = $this.jqGrid("getGridParam"), i, count;
if (firstLoad) {
firstLoad = false;
if (isColState && myColumnsState.cmOrder != null && myColumnsState.cmOrder.length > 0) {
// We compares the values from myColumnsState.cmOrder array
// with the current names of colModel and remove wrong names. It could be
// required if the column model are changed and the values from the saved stated
// not corresponds to the
var fixedOrder = $.map(myColumnsState.cmOrder, function (name) {
return p.iColByName[name] === undefined ? null : name;
});
$this.jqGrid("remapColumnsByName", fixedOrder, true);
}
}
saveColumnState.call($this, this.p.remapColumns);
}
}
).filterToolbar();
嘿你這是一個設計模式問題。我有六個網格，每個網格都基於先前網格的選擇，所以我不得不調整我得到保存的列狀態的順序，以確保每個網格都已加載並準備就緒。切換到免費的jqGrid之後，我能夠簡化代碼，例如，我不必編寫代碼來存儲數組，以便跨頁面保持選擇，因爲現在已經是一項功能。再次感謝您的幫助。 –
@ Tony_89：不客氣！ – Oleg