Knockoutjs data grid

Javascript
HTML

79
 
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 colModel = [
26
        { title: "Rank", dataIndx: 'rank' },
27
        { title: "Company", dataIndx: "company",
28
            filter:{ type: 'textbox', condition: 'contain', listeners: ['keyup'] }
29
        },
30
        { title: "Revenues", dataType: "float", dataIndx: "revenues" },
31
        { title: "Profits", dataType: "float", dataIndx: "profits" }
32
    ];
33
        
34
    
35
    var gridModel = function(){
36
        var gridApi,
37
            self = this;
38
        function refreshColModel(){            
39
            gridApi.option('colModel', colModel);
40
            gridApi.refresh();            
41
        }
42
        
43
        self.addCol = function(){            
44
            self.CM.push({
45
                title: 'new col '+colModel.length
46
            });
47
            refreshColModel();
48
        }
49
        self.removeCol = function(){
50
            self.CM.splice(colModel.length-1, 1);
51
            refreshColModel();
52
        }
53
        self.updateCol = function(){
54
            var title = colModel[2].title;
55
            colModel[2].title = (title == "Revenues")? "Updated revenues": "Revenues";
56
            
57
            refreshColModel();
58
        }
59
        
60
        self.CM = ko.observableArray(colModel);
61
62
        self.gridOptions = {
63
            width: 'flex',  maxWidth: '100%',
64
            height: 'flex', maxHeight: 400,
65
            flex: {one: true},
66
            virtualX: true, virtualY: true,            
67
            columnTemplate: { minWidth: 100 },            
68
            colModel: colModel,            
69
            title: "Knockoutjs grid",
70
            showTop: false,            
71
            dataModel: { data: data },
72
            create: function(){
73
                gridApi = this;
74
            }
75
        };
76
    };    
77
    ko.applyBindings( new gridModel(), document.getElementById('koApp') );
78
});
79