Отправить расширенные узлы TreeGrid в cookie - jquery


1

В продолжении в этом разделе Я хочу сохранить расширенные узлы в cookie. Это лучший способ?

Я не уверен в проверке данных JSON.

Почему expandRow не работает?

var gridId = "#table";
var grid = $(gridId);
grid.jqGrid({

...

loadComplete: function() {
var ids = grid.jqGrid(getDataIDs);

var cookie = $.cookie(gridId + _expanded);
var expanded = false;

if (typeof(cookie) == string)
var expanded = JSON.parse(cookie);

for (var i=0;i<ids.length;i++) {
var id=ids[i];
var row_data = $(this).jqGrid(getRowData, id);

if (expanded && id in expanded && expanded[id] == true)
$(gridId +  tr# + id +  div.treeclick).trigger("click");
//Why it doesnt work?
//grid.jqGrid(expandRow, row_data);

}
}

...

});

function setCookie() {
            var ids = grid.jqGrid(getDataIDs);

            var expanded = Object();
            var string = ;

            for (var i=0;i<ids.length;i++) {    
                var id=ids[i];
                var rowData = grid.jqGrid(getRowData, id);                

                if (rowData.parent !=  && grid.jqGrid(isVisibleNode, rowData) === true)
                    expanded[rowData.parent] = true
            }

            for (e in expanded) 
                string += " + e + ": + " + expanded[e] + ",;

            $.cookie(gridId + _expanded, {+ string.substring(0, string.length - 1) + }, { expires: 365 });    
}

var orgExpandNode = $.fn.jqGrid.expandNode, orgCollapseNode = $.fn.jqGrid.collapseNode;

        $.jgrid.extend({
            expandNode : function(rc) {
                orgExpandNode.call(this, rc);
                setCookie();            
            },
            collapseNode : function(rc) {
                orgCollapseNode.call(this, rc);
                setCookie();                        
            },
});

P.S. Я всегда получаю это глупое предупреждение:)

Ваше сообщение не имеет большого контекста для объяснения разделов кода; объясните свой сценарий более четко.

  •  8
  •  1
  • 8 фев 2020 2020-02-08 08:05:08

1 ответ

5

Я рекомендую использовать localStorage вместо файлов cookie. Я описываю причину в ответе. Я сделал демо-версию на демо из ответа и другой. Для демо я использовал тестовые данные из еще одного моего недавнего .

Попробуйте расширить демонстрацию некоторых узлов дерева и перезагрузить сетку с помощью F5. Вы увидите, что все расширенные строки остаются расширенными после перезагрузки.

Код демоверсии вы найдете ниже:

var $grid = $(#treegridCompanies),
    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)) || [];

$grid.jqGrid({
    url: SPATEN-TreeGrid2.json,
    datatype: json,
    ajaxGridOptions: { contentType: "application/json" },
    jsonReader: {
        id: "CompanyId",
        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[5] = index >= 0; // set expanded column
            row[6] = true;       // set loaded column
        }
    },
    colNames:  [CompanyId, Company],
    colModel: [
        { name: CompanyId, index: CompanyId, width: 1, hidden: true, key: true },
        { name: Company, index: Company, width: 500 }
    ],
    height: auto,
    pager: #pager,
    rowNum: 10000,
    sortable: false,
    treeGrid: true,
    treeGridModel: adjacency,
    ExpandColumn: Company
});
$grid.jqGrid(navGrid, #pager, {edit: false, add: false, del: false, search: false});
$grid.jqGrid(navButtonAdd, #pager, {
    caption: "",
    buttonicon: "ui-icon-closethick",
    title: "Clear saved grid settings",
    onClickButton: function () {
        removeObjectFromLocalStorage(myColumnStateName($(this)));
        window.location.reload();
    }
});
$.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);
    }
});
  • 8 фев 2020 2020-02-08 08:05:08