Question

我已阅读this thread，我已下载了Oleg的演示版，但在我的代码中它不起作用。

我有一个带有Json的外部PHP的jqGrid。我使用setinteval（1秒）实时刷新数据但是当我爆炸树时它会立即关闭。

我的javascript代码到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);

`

我也改变了这个

row[30] = index >= 0; row[31] = true;

与json的“扩展”和“加载”字段的确切位置。

Answer 1

您在评论中写道，一行JSON数据看起来像

{"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}

这意味着数据格式与repeatitems: true内的不 jsonReader相对应。只是因为jqGrid 4.4.5中引入的JSON格式的自动转换功能以及jqGrid 4.5.0中修复的功能（参见here和here）才会填充网格。因此，我建议您将jsonReader与repeatitems: false一起使用，或者至少删除与您的数据格式不对应的repeatitems: false。

要设置expanded和loaded列，您应该使用

row.expanded = index >= 0; // set expanded column
row.loaded = true;         // set loaded column

而不是

row[30] = index >= 0; // set expanded column
row[31] = true;       // set loaded column

此外，您应该使用row.id代替row[0]（请参阅代码中的index = $.inArray(row[0], idsOfExpandedRows)）。

可能你需要做出如上所述的更多改变。我无法测试代码，因此上述更改可能不完整。无论如何，上述变化确实是必需的。

另外，我会非常小心使用整数作为列名。我最好将列的名称从"0"，"1"，... "24"更改为例如"c0"，"c1"，... {{1更多对应于标识符的名称，并保护您额外的idid重复与rowid，你也作为整数（见"c24"和"id":"13"）。它可以在将来节省很多时间。

jqGrid：设置在reloadGrid之后展开的localStorage treegrid中

1 个答案: