jquery response grid techniques: Hierarchical grid

The interface Control Package NetAdvantage Ultimate provides a control set--ignite UI dedicated to JQUERY/HTML5 development, with the greatest feature of stable data visualization and rapid performance for HTML5. Its application to any browser, any platform, any Device response web design has caused our attention, after a period of testing, Hui is going to share with you, Ignite UI proud of the jquery response grid Some of the development tips.

Hierarchical grid

The response function of a hierarchical grid is difficult to implement because of the paging, because each interaction behavior affects the hierarchical layout of the next page. On a flat panel, the grid display is likely to be completely lost when the parent layout needs to be rendered again due to a pattern change. The Ignite UI-rich API also solves this problem by using responsivemodechanged, a lightweight property that is triggered before layout changes or grid rendering, and then uses rowsrendered to trigger the storage control of the child layout state. The code is as follows:

var expanded = []; $.ig.loader (function () {$ (' #grid '). Ighierarchicalgrid ({//... features: [{name: ' Respon Sive ', columnsettings: [{columnkey: ' DepartmentID ', classes: "Ui-hidden-phone
            "}, {columnkey: ' ModifiedDate ', classes:" Ui-hidden-phone "}],
                Responsivemodechanged:function (evt, UI) {expanded = [];
                var Hgrid = ui.owner.element.data ("Ighierarchicalgrid");
                        Ui.owner.grid.allRows (). each (function (index, ROW) {if (hgrid.expanded (row)) {
                    Expanded.push ($ (row). Data ("Row-idx"));
            }
                });
                }], Rowsrendered:function (evt, UI) {if (len = expanded.length) > 0) { for (i = 0; i < len; i++) {Ui.owner.element.data ("Ighierarchicalgrid"). Expand (Ui.owner.rowAt (Expanded.pop ()));
}
            }
        }
    }); });

The results are shown in the following illustration: