I have read this thread and I have downloaded the demo of Oleg but in my code it doesn't work.
I have a jqGrid with external PHP with Json. I use a setinteval (1 second) to refresh the data in real time but when I explode a tree it closes immediately.
My javascript code into jQuery(document).ready(function(): `
// odd even row
var resetAltRows = function () {
$(this).children("tbody:first").children('tr.jqgrow').removeClass('odd');
$(this).children("tbody:first").children('tr.jqgrow:visible:odd').addClass('odd');
};
'use strict';
var $grid = $('#list'),
saveObjectInLocalStorage = function (storageItemName, object) {
if (typeof window.localStorage !== 'undefined') {
window.localStorage.setItem(storageItemName, JSON.stringify(object));
}
},
removeObjectFromLocalStorage = function (storageItemName) {
if (typeof window.localStorage !== 'undefined') {
window.localStorage.removeItem(storageItemName);
}
},
getObjectFromLocalStorage = function (storageItemName) {
if (typeof window.localStorage !== 'undefined') {
return JSON.parse(window.localStorage.getItem(storageItemName));
}
},
myColumnStateName = function (grid) {
return window.location.pathname + '#' + grid[0].id;
},
idsOfExpandedRows = [],
updateIdsOfExpandedRows = function (id, isExpanded) {
var index = $.inArray(id, idsOfExpandedRows);
if (!isExpanded && index >= 0) {
idsOfExpandedRows.splice(index, 1); // remove id from the list
} else if (index < 0) {
idsOfExpandedRows.push(id);
}
saveObjectInLocalStorage(myColumnStateName($grid), idsOfExpandedRows);
},
orgExpandRow = $.fn.jqGrid.expandRow,
orgCollapseRow = $.fn.jqGrid.collapseRow;
idsOfExpandedRows = getObjectFromLocalStorage(myColumnStateName($grid)) || [];
jQuery("#list").jqGrid({
url:'get_tree.php',
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader: {
id: "id",
cell: "",
root: function (obj) { return obj.rows; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.rows.length; },
repeatitems: true
},
beforeProcessing: function (data) {
var rows = data.rows, i, l = rows.length, row, index;
for (i = 0; i < l; i++) {
row = rows[i];
index = $.inArray(row[0], idsOfExpandedRows);
row[30] = index >= 0; // set expanded column
row[31] = true; // set loaded column
}
},
colNames:[...............],
colModel :[
{name:'id', index:'id', width:15, sortable: false, title: false,hidden: true},
{name:'0', index:'0', classes:'piu', width:15, sortable: false, title: false},
{..............}
],
rowNum:100,
viewrecords: true,
autowidth: true,
height: 'auto',
loadonce:true,
key: true,
loadComplete: function() {
var grid = this;
resetAltRows.call(this);
$(this).find('tr.jqgrow td div.treeclick').click(function(){
resetAltRows.call(grid);
});
$(this).find('tr.jqgrow td span.cell-wrapper').click(function(){
resetAltRows.call(grid);
});
},
gridview: true,
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: '0',
ExpandColClick: true
});
$.jgrid.extend({
expandRow: function (rc) {
alert('before expandNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
updateIdsOfExpandedRows(rc._id_, true);
return orgExpandRow.call(this, rc);
},
collapseRow: function (rc) {
alert('before collapseNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
updateIdsOfExpandedRows(rc._id_, false);
return orgCollapseRow.call(this, rc);
}
});
//REFRESH JSON
setInterval(
function() {
jQuery("#list").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
}
, 1000);
`
I have also change this
row[30] = index >= 0;
row[31] = true;
with the exactly position of "expanded" and "loaded" field of json.
You wrote in the comment that one row of JSON data looks like
{"id":"13","0":"","1":"01","2":"","3":"12345","4":"asdasdasd","5":"59.67",
"6":"asd","7":"UL","8":"5","9":"04:13","10":"1","11":"40","12":"40","13":"38",
"14":"(5) 5","15":"2","16":"2","17":"2","18":"0","19":"0","20":"6","21":"24",
"22":"99","23":"1.874","24":"0_01|0",
"level":"0","parent":null,"isLeaf":false,"expanded":false,"loaded":true}
It means that the format of data corresponds not repeatitems: true inside of jsonReader. Only because of the feature Autotedection of JSON format introduced in jqGrid 4.4.5 and fixed in jqGrid 4.5.0 (see here and here) the grid will be filled. So I recommend you to use jsonReader with repeatitems: false or at least remove repeatitems: false which don't corresponds your data format.
To set expanded and loaded column you should use
row.expanded = index >= 0; // set expanded column
row.loaded = true; // set loaded column
instead of
row[30] = index >= 0; // set expanded column
row[31] = true; // set loaded column
Additionally you should use row.id instead of row[0] (see index = $.inArray(row[0], idsOfExpandedRows) in the code).
Probably you will need make more changes like above. I can't tests the code, so the above changes could be not full. In any way the above changes are really required.
Additionally I would be very careful with usage of integers as the column names. I would better change the names of columns from "0", "1", ..."24" to for example "c0", "c1", ..."c24" which more corresponds to names of identifiers and protect you additionally from id duplicates with rowids which you have also as integers (see "id":"13" and "13":"38"). It could save much your time in the future.