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

183
 
1
​
2
​
3
    $(function () {
4
        var data = [
5
            {
6
                rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0,
7
                //cell based styles
8
                pq_cellstyle: { 
9
                    company: { color: '#ff0000', 'font-weight': 'bold' },
10
                    revenues: { color: '#00ff00', 'font-size': '20px' },
11
                },
12
                //row based styles
13
                pq_rowstyle: { "background-color": '#ffff00' }
14
            },
15
            { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
16
            { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
17
            { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
18
            {
19
                rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0,
20
                pq_cellstyle: {
21
                    company: {
22
                        border: "1px solid #ff0000"
23
                    }
24
                }
25
            },
26
            { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
27
            { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
28
            { rank: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
29
            { rank: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
30
            { rank: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
31
            { rank: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
32
            { rank: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
33
            { rank: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
34
            { rank: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
35
            { rank: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5' },
36
            { rank: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
37
            { rank: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
38
            { rank: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
39
            { rank: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
40
            { rank: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
41
        ];
42
​
43
        var obj = {
44
            scrollModel: {autoFit: true},
45
            height: 400,            
46
            title: "Row, column & Cell Styles",
47
            selectionModel: { column: true },        
48
            colModel: [
49
                { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
50
                { title: "Company", width: 220, dataType: "string", dataIndx: "company" },
51
                {
52
                    title: "Revenues", width: 180, dataType: "float", dataIndx: "revenues",
53
                    //column based styles
54
                    style: {
55
                        'font-style': 'italic'
56
                    },
57
                    styleHead: {
58
                        'font-style': 'italic'
59
                    }
60
                },
61
                { title: "Profits", width: 160, dataType: "float", dataIndx: "profits" }
62
            ],
63
            dataModel: {
64
                data: data
65
            },
66
            toolbar: {                
67
                items: [
68
                    {
69
                        type: 'button',
70
                        label: 'Export',
71
                        listener: function () {
72
                            var data = this.exportExcel();
73
                            pq.saveAs(data, "pqgrid.xlsx");
74
                        }
75
                    },
76
                    {
77
                        type: 'button',
78
                        label: "<b>B</b>",
79
                        style: 'margin-right:0',
80
                        listener: function (evt) {
81
                            this.Selection().toggleStyle("font-weight", ["bold", "normal"]);
82
                        }
83
                    },
84
                    {
85
                        type: 'button',
86
                        label: "<i>I</i>",
87
                        style: 'margin-right:0;margin-left:0;',
88
                        listener: function (evt) {
89
                            this.Selection().toggleStyle("font-style", ["italic", "normal"]);
90
                        }
91
                    },
92
                    {
93
                        type: 'button',
94
                        label: "<u>U</u>",
95
                        style: 'margin-left:0',
96
                        listener: function (evt) {
97
                            this.Selection().toggleStyle("text-decoration", ["underline", "normal"]);
98
                        }
99
                    },
100
                    {
101
                        type: 'select',
102
                        attr: 'title="font size"',
103
                        cls: 'font-size',
104
                        options: [9, 10, 11, 12, 14, 16, 20, 36],
105
                        listener: function (evt) {
106
                            this.Selection().style('font-size', $(evt.target).val() + "px");
107
                        }
108
                    },
109
                    {
110
                        type: 'select',
111
                        attr: 'title="font family"',
112
                        cls: 'font-family',
113
                        options: ['Arial', 'Calibri', 'Caveat', 'Georgia', 'Impact', 'Verdana'],
114
                        listener: function (evt) {
115
                            this.Selection().style('font-family', $(evt.target).val());
116
                        }
117
                    },
118
                    {
119
                        type: 'select',
120
                        //label:'font family: ',
121
                        attr: 'title="horizontal align"',
122
                        cls: 'align',                        
123
                        options: ['left', 'center', 'right'],
124
                        listener: function (evt) {
125
                            this.Selection().align($(evt.target).val());
126
                        }
127
                    },
128
                    {
129
                        type: 'select',                        
130
                        attr: 'title="vertical align"',
131
                        cls: 'valign',                        
132
                        options: [{ 'top': 'top', 'center': 'middle', 'bottom': 'bottom' }],
133
                        listener: function (evt) {
134
                            this.Selection().valign($(evt.target).val());
135
                        }
136
                    },
137
                    { type: 'separator' },
138
                    {
139
                        type: 'button',
140
                        icon: 'ui-icon-arrowreturn-1-s',
141
                        options: { text: false, showLabel: false, disabled: true },
142
                        cls: 'undo',
143
                        listener: function () {
144
                            grid.history({ method: 'undo' });
145
                        }
146
                    },
147
                    {
148
                        type: 'button',
149
                        cls: 'redo',
150
                        icon: 'ui-icon-arrowrefresh-1-s',
151
                        options: { text: false, showLabel: false, disabled: true },
152
                        listener: function () {
153
                            grid.history({ method: 'redo' });
154
                        }
155
                    }
156
                ]
157
            },
158
            history: function (evt, ui) {
159
                var $tb = this.toolbar(),
160
                    $undo = $tb.find(".undo"),
161
                    $redo = $tb.find(".redo");
162
​
163
                if (ui.canUndo != null) {
164
                    $undo.button("option", { disabled: !ui.canUndo });
165
                }
166
                if (ui.canRedo != null) {
167
                    $redo.button("option", "disabled", !ui.canRedo);
168
                }
169
            }
170
        };
171
        var grid = pq.grid("#grid_row_styles", obj);
172
        grid.on('selectEnd history', function () {
173
          
174
            var S = this.Selection();
175
​
176
            $(".font-size").val(parseInt(S.style('font-size')));
177
            $(".font-family").val(S.style('font-family'));
178
​
179
            $(".valign").val(S.valign());
180
            $(".align").val(S.align());
181
        })
182
    });    
183