​x
 
1
​
2
    <label for="sl_width">Width: </label>
3
    <select id="sl_width">
4
        <option>auto</option>
5
        <option>20%</option>
6
        <option>40%</option>
7
        <option>60%</option>
8
        <option>80%</option>
9
        <option>100%</option>
10
    </select>
11
    <label for="sl_margin">Margin: </label>
12
    <select id="sl_margin">
13
        <option>20px auto</option>
14
        <option>20px 20px</option>
15
        <option>20px 40px</option>
16
        <option>20px 60px</option>
17
        <option>20px 15%</option>
18
        <option>20px 30%</option>                
19
    </select>
20
    <div id="grid_json" style="margin:20px auto;"></div>
21
​

64
 
1
​
2
​
3
    $(function () {
4
        var data = [
5
            { rank: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
6
            { rank: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
7
            { rank: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
8
            { rank: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
9
            { rank: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
10
            { rank: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
11
            { rank: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3' },
12
            { rank: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
13
            { rank: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
14
            { rank: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
15
            { rank: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
16
            { rank: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
17
            { rank: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
18
            { rank: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
19
            { rank: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5' },
20
            { rank: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
21
            { rank: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
22
            { rank: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
23
            { rank: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
24
            { rank: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
25
        ];
26
​
27
        var obj = {            
28
            minWidth: 500,
29
            height: 400,
30
            resizable: true,
31
            scrollModel: { autoFit: true },
32
            title: "Grid From JSON",
33
            collapsible: { on: true, collapsed: false }
34
        };
35
        obj.columnTemplate = {            
36
            title: function (ui) {
37
                return ui.column.Title + " (" + ui.column.width + ")";
38
            }
39
        };
40
        obj.colModel = [
41
            { Title: "Rank", dataType: "integer", dataIndx: "rank", width: "20%" },
42
            { Title: "Company", dataType: "string", dataIndx: "company", width: "35%" },
43
            { Title: "Revenues", dataType: "float", dataIndx: "revenues", width:"25%" },
44
            { Title: "Profits", dataType: "float", dataIndx: "profits" }
45
        ];
46
        obj.dataModel = { data: data };
47
​
48
        var grid = pq.grid("#grid_json", obj);
49
        grid.on('refresh', function () {
50
            grid.refreshHeader()
51
        })
52
​
53
        //bind width to select list.
54
        $("#sl_width").change(function (evt) {
55
            var val = $(this).val();
56
            grid.option('width', val)
57
            grid.refresh();
58
        });
59
        $("#sl_margin").change(function (evt) {
60
            var val = $(this).val();
61
            grid.widget().css('margin', val).pqGrid('refresh');
62
        });
63
    });    
64
​