在Cookie中发送扩展的TreeGrid节点 [英] Send expanded TreeGrid Nodes in cookie

问题描述

继续此主题我想在Cookie中保存展开的节点。这是最好的方法吗？

In continue of this topic I want to save expanded nodes in cookie. Is it the best way?

我不确定 JSON 数据检查的方式。

I'm not sure in way of JSON data checking.

为什么expandRow无效？

Why expandRow doesn't work?

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 doesn't 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. I allways get this stupid alert :)

你的文章没有太多的上下文来解释代码段;请更清楚地解释您的场景。

Your post does not have much context to explain the code sections; please explain your scenario more clearly.

推荐答案

我建议您使用 localStorage 而不是cookie。我在答案中说明原因。我根据演示版本演示，从答案和另一个。对于演示，我使用了最近一次的测试数据回答。

I recommend you to use localStorage instead of cookies. I describe the reason in the answer. I made the demo base on the demos from the answer and another one. For the demo I used the test data from one more my recent answer.

尝试在演示一些树节点，并使用 F5 重新加载网格。 。

Try to expand in the demo some tree nodes and reload the grid with F5. You will see that all expanded rows stay expanded after the reloading.

您将在下面找到演示代码：

The code of the demo you will find below:

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's 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);
    }
});

这篇关于在Cookie中发送扩展的TreeGrid节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！