在 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.我在答案中描述了原因.我根据 演示 制作了演示="https://stackoverflow.com/a/8436273/315935">答案 和 另一个.对于演示，我使用了另一个我的测试数据最近的答案.

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.

演示代码如下:

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屋！