app.js
3.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
jQuery(function($) {
window.multiView = null;
window.explorerDiv = $('.data-explorer-here');
// create the demo dataset
var dataset = createDemoDataset();
// now create the multiview
// this is rather more elaborate than the minimum as we configure the
// MultiView in various ways (see function below)
window.multiview = createMultiView(dataset);
// last, we'll demonstrate binding to changes in the dataset
// this will print out a summary of each change onto the page in the
// changelog section
dataset.records.bind('all', function(name, obj) {
var $info = $('<div />');
$info.html(name + ': ' + JSON.stringify(obj.toJSON()));
$('.changelog').append($info);
$('.changelog').show();
});
});
// create standard demo dataset
function createDemoDataset() {
var dataset = new recline.Model.Dataset(
{
url : "http://localhost/i3geo/json.php?tema=_lreal&format=recline",
backend :"gdocs"
}
);
/*
var dataset = new recline.Model.Dataset({
records: [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', sometext: 'first', lat:52.56, lon:13.40},
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', sometext: 'second', lat:54.97, lon:-1.60},
{id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', sometext: 'third', lat:40.00, lon:-75.5},
{id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', sometext: 'fourth', lat:57.27, lon:-6.20},
{id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', sometext: 'fifth', lat:51.58, lon:0},
{id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', sometext: 'sixth', lat:51.04, lon:7.9}
],
// let's be really explicit about fields
// Plus take opportunity to set date to be a date field and set some labels
fields: [
{id: 'id'},
{id: 'date', type: 'date'},
{id: 'x', type: 'number'},
{id: 'y', type: 'number'},
{id: 'z', type: 'number'},
{id: 'country', 'label': 'Country'},
{id: 'sometext', 'label': 'Some text'},
{id: 'lat'},
{id: 'lon'}
]
});
*/
return dataset;
}
// make MultivView
//
// creation / initialization in a function so we can call it again and again
var createMultiView = function(dataset, state) {
// remove existing multiview if present
var reload = false;
if (window.multiView) {
window.multiView.remove();
window.multiView = null;
reload = true;
}
var $el = $('<div />');
$el.appendTo(window.explorerDiv);
// customize the subviews for the MultiView
var views = [
{
id: 'grid',
label: 'Grid',
view: new recline.View.SlickGrid({
model: dataset,
state: {
gridOptions: {
editable: true,
// Enable support for row add
enabledAddRow: true,
// Enable support for row delete
enabledDelRow: true,
// Enable support for row ReOrder
enableReOrderRow:true,
autoEdit: false,
enableCellNavigation: true
},
columnsEditor: [
{ column: 'date', editor: Slick.Editors.Date },
{ column: 'sometext', editor: Slick.Editors.Text }
]
}
})
},
{
id: 'graph',
label: 'Graph',
view: new recline.View.Graph({
model: dataset
})
},
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
})
}
];
var multiView = new recline.View.MultiView({
model: dataset,
el: $el,
state: state,
views: views
});
return multiView;
}