​x
 
1
​
2
<div id="grid_freeze_rows" style="margin:auto;"></div>
3
​

83
 
1
​
2
    $(function () {
3
        var data = [
4
            { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
5
            { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
6
            { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
7
            { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
8
            { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
9
            { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
10
            { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
11
            { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
12
            { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
13
            { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
14
            { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
15
            { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
16
            { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
17
            { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
18
            { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
19
            { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
20
            { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
21
            { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
22
            { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
23
            { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
24
        ];
25
        var frozenRows = [];
26
​
27
        var obj = {
28
            scrollModel: { autoFit: true },
29
            showTitle: false,
30
            resizable: true,
31
            freezeRows: 2,
32
            //showHeader: false,
33
            height: 400,
34
            beforeSort: function (evt, ui) {
35
                if ($("#sort_all_chk").prop("checked")) {
36
                    var freezeRows = this.option("freezeRows"),
37
                        dataGrid = this.option("dataModel.data");
38
​
39
                    frozenRows = dataGrid.splice(0, freezeRows);
40
                }
41
            },
42
            sort: function (evt, ui) {
43
                if ($("#sort_all_chk").prop("checked")) {
44
                    var dataGrid = this.option("dataModel.data");
45
                    
46
                    Array.prototype.unshift.apply(dataGrid, frozenRows);
47
                }
48
            },
49
            colModel: [
50
                { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
51
                { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
52
                { title: "Revenues", width: 150, dataType: "float", dataIndx: "revenues", format: '#.0' },
53
                { title: "Profits", width: 150, dataType: "float", dataIndx: "profits", format: '#.0' }
54
            ],
55
            dataModel: { data: data },
56
            create: function () {
57
                this.widget().find(".frozen").val(this.option('freezeRows'));
58
            },
59
            toolbar: {
60
                items: [                    
61
                    {
62
                        type: 'select',
63
                        label: 'Select number of frozen rows: ',
64
                        cls: 'frozen',
65
                        options: [0, 1, 2, 3, 4, 5, 6, 7, 8], 
66
                        listener: function (evt) {
67
                            this.option("freezeRows", $(evt.target).val());
68
                            this.refresh();
69
                        }                                           
70
                    },
71
                    { type: 'separator' },
72
                    {
73
                        type: 'checkbox',
74
                        attr: 'id="sort_all_chk"',
75
                        label: 'Exclude frozen rows while sorting'
76
                    }
77
                ]
78
            }
79
        };
80
        $("#grid_freeze_rows").pqGrid(obj);
81
​
82
    });
83
​