root / i3geo60 / ferramentas / recline / tabela.php @ 6503
History | View | Annotate | Download (7.33 KB)
1 |
<?php
|
---|---|
2 |
//
|
3 |
//Abre o Recline com base em um servico enviado pela URL
|
4 |
//utilize &url= para indicar a url do servico que retorna os dados no padrao gdocs
|
5 |
//
|
6 |
|
7 |
//pega a extensao geografica da camada
|
8 |
include("../../ms_configura.php"); |
9 |
include("../../classesphp/pega_variaveis.php"); |
10 |
?>
|
11 |
<!DOCTYPE html>
|
12 |
<html lang="en"> |
13 |
<head>
|
14 |
<meta charset="utf-8" /> |
15 |
<title>Recline.js Multiview</title> |
16 |
<link rel="stylesheet" type="text/css" href="../../admin/html/admin.css"> |
17 |
<!-- you do not have to use bootstrap but we use it by default -->
|
18 |
|
19 |
<link rel="stylesheet" href="../../pacotes/knightlab/recline/vendor/bootstrap/3.2.0/css/bootstrap.css"> |
20 |
<!-- vendor css -->
|
21 |
<link href="../../pacotes/knightlab/recline/vendor/leaflet/0.7.3/leaflet.css" rel="stylesheet"> |
22 |
<link href="../../pacotes/knightlab/recline/vendor/leaflet.markercluster/MarkerCluster.css" rel="stylesheet"> |
23 |
<link href="../../pacotes/knightlab/recline/vendor/leaflet.markercluster/MarkerCluster.Default.css" rel="stylesheet"> |
24 |
<link rel="stylesheet" href="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/slick.grid.css"> |
25 |
<link rel="stylesheet" href="../../pacotes/knightlab/recline/vendor/timeline/css/timeline.css"> |
26 |
|
27 |
<!-- recline css -->
|
28 |
<link href="../../pacotes/knightlab/recline/css/map.css" rel="stylesheet"> |
29 |
<link href="../../pacotes/knightlab/recline/css/multiview.css" rel="stylesheet"> |
30 |
<link href="../../pacotes/knightlab/recline/css/slickgrid.css" rel="stylesheet"> |
31 |
<link href="../../pacotes/knightlab/recline/css/flot.css" rel="stylesheet"> |
32 |
<link rel="stylesheet" href="../../pacotes/knightlab/recline/css/timeline.css"> |
33 |
|
34 |
<!-- Vendor JS - general dependencies -->
|
35 |
<script src="../../pacotes/knightlab/recline/vendor/jquery/1.7.1/jquery.js" type="text/javascript"></script> |
36 |
<script src="../../pacotes/knightlab/recline/vendor/underscore/1.4.4/underscore.js" type="text/javascript"></script> |
37 |
<!--<script src="vendor/underscore.deferred/0.4.0/underscore.deferred.js" type="text/javascript"></script>-->
|
38 |
<script src="../../pacotes/knightlab/recline/vendor/backbone/1.0.0/backbone.js" type="text/javascript"></script> |
39 |
<script src="../../pacotes/knightlab/recline/vendor/mustache/0.5.0-dev/mustache.js" type="text/javascript"></script> |
40 |
<script src="../../pacotes/knightlab/recline/vendor/bootstrap/3.2.0/js/bootstrap.js" type="text/javascript"></script> |
41 |
|
42 |
<!-- Vendor JS - view dependencies -->
|
43 |
<script src="../../pacotes/knightlab/recline/vendor/leaflet/0.7.3/leaflet.js" type="text/javascript"></script> |
44 |
<script src="../../pacotes/knightlab/recline/vendor/leaflet.markercluster/leaflet.markercluster.js" type="text/javascript"></script> |
45 |
<script type="text/javascript" src="../../pacotes/knightlab/recline/vendor/flot/jquery.flot.js"></script> |
46 |
<script type="text/javascript" src="../../pacotes/knightlab/recline/vendor/flot/jquery.flot.time.js"></script> |
47 |
<script type="text/javascript" src="../../pacotes/knightlab/recline/vendor/moment/2.0.0/moment.js"></script> |
48 |
<script type="text/javascript" src="../../pacotes/knightlab/recline/vendor/timeline/js/timeline.js"></script> |
49 |
|
50 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/jquery-ui-1.8.16.custom.min.js"></script> |
51 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/jquery.event.drag-2.2.js"></script> |
52 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/jquery.event.drop-2.2.js"></script> |
53 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/slick.core.js"></script> |
54 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/slick.formatters.js"></script> |
55 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/slick.editors.js"></script> |
56 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/slick.grid.js"></script> |
57 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/plugins/slick.rowselectionmodel.js" type="text/javascript"></script> |
58 |
<script src="../../pacotes/knightlab/recline/vendor/slickgrid/2.2/plugins/slick.rowmovemanager.js" type="text/javascript"></script> |
59 |
|
60 |
<!-- Recline JS (combined distribution, all views) -->
|
61 |
<script src="../../pacotes/knightlab/recline/dist/recline.js" type="text/javascript"></script> |
62 |
</head>
|
63 |
<body class=" yui-skin-sam"> |
64 |
<div class="borda"> |
65 |
<div style="text-align: center"> |
66 |
<a href="http://www.softwarepublico.gov.br" target="_blank" style="color: white;"> |
67 |
<b>ReclineJS</b> |
68 |
</a>
|
69 |
</div>
|
70 |
</div>
|
71 |
<div id=i3geoSelTemaAtivo style="height: 15em; z-index: 3000; display: none" class=" yui-skin-sam"></div> |
72 |
<br>
|
73 |
<br>
|
74 |
<div class="container-fluid" style="height: 100%"> |
75 |
<style>
|
76 |
.recline-slickgrid {
|
77 |
height: 300px;
|
78 |
}
|
79 |
</style>
|
80 |
<div class="row"> |
81 |
<div class="col-sm-8"> |
82 |
<div class="data-explorer-here"></div> |
83 |
<div style="clear: both;"></div> |
84 |
</div>
|
85 |
</div>
|
86 |
|
87 |
<script>
|
88 |
//define como variavel global
|
89 |
var dadosJ;
|
90 |
returnData = function(dataFromJsonp){
|
91 |
dadosJ = dataFromJsonp;
|
92 |
jQuery(function($) {
|
93 |
window.multiView = null;
|
94 |
window.explorerDiv = $('.data-explorer-here');
|
95 |
|
96 |
// create the demo dataset
|
97 |
var dataset = createDataset(dadosJ);
|
98 |
// now create the multiview
|
99 |
// this is rather more elaborate than the minimum as we configure the
|
100 |
// MultiView in various ways (see function below)
|
101 |
window.multiview = createMultiView(dataset);
|
102 |
|
103 |
// last, we'll demonstrate binding to changes in the dataset
|
104 |
// this will print out a summary of each change onto the page in the
|
105 |
// changelog section
|
106 |
dataset.records.bind('all', function(name, obj) {
|
107 |
var $info = $('<div />');
|
108 |
$info.html(name + ': ' + JSON.stringify(obj.toJSON()));
|
109 |
$('.changelog').append($info);
|
110 |
$('.changelog').show();
|
111 |
});
|
112 |
});
|
113 |
};
|
114 |
|
115 |
// create standard demo dataset
|
116 |
function createDataset(data) {
|
117 |
var dataset = new recline.Model.Dataset(data);
|
118 |
return dataset;
|
119 |
}
|
120 |
|
121 |
// make MultivView
|
122 |
//
|
123 |
// creation / initialization in a function so we can call it again and again
|
124 |
var createMultiView = function(dataset, state) {
|
125 |
// remove existing multiview if present
|
126 |
var reload = false;
|
127 |
if (window.multiView) {
|
128 |
window.multiView.remove();
|
129 |
window.multiView = null;
|
130 |
reload = true;
|
131 |
}
|
132 |
|
133 |
var $el = $('<div />');
|
134 |
$el.appendTo(window.explorerDiv);
|
135 |
|
136 |
// customize the subviews for the MultiView
|
137 |
var views = [
|
138 |
{
|
139 |
id: 'grid',
|
140 |
label: 'Tabela',
|
141 |
view: new recline.View.SlickGrid({
|
142 |
model: dataset,
|
143 |
state: {
|
144 |
gridOptions: {
|
145 |
editable: true,
|
146 |
// Enable support for row add
|
147 |
enabledAddRow: true,
|
148 |
// Enable support for row delete
|
149 |
enabledDelRow: true,
|
150 |
// Enable support for row ReOrder
|
151 |
enableReOrderRow:true,
|
152 |
autoEdit: false,
|
153 |
enableCellNavigation: true
|
154 |
},
|
155 |
columnsEditor: [
|
156 |
{ column: 'date', editor: Slick.Editors.Date },
|
157 |
{ column: 'sometext', editor: Slick.Editors.Text }
|
158 |
]
|
159 |
}
|
160 |
})
|
161 |
},
|
162 |
{
|
163 |
id: 'graph',
|
164 |
label: 'Grafico',
|
165 |
view: new recline.View.Graph({
|
166 |
model: dataset
|
167 |
|
168 |
})
|
169 |
},
|
170 |
{
|
171 |
id: 'map',
|
172 |
label: 'Mapa (baseado na tabela)',
|
173 |
view: new recline.View.Map({
|
174 |
model: dataset
|
175 |
})
|
176 |
}
|
177 |
];
|
178 |
|
179 |
var multiView = new recline.View.MultiView({
|
180 |
model: dataset,
|
181 |
el: $el,
|
182 |
state: state,
|
183 |
views: views
|
184 |
});
|
185 |
return multiView;
|
186 |
}
|
187 |
</script>
|
188 |
<?php
|
189 |
//inclui os dados via jsonp
|
190 |
$url = str_replace("urljson=","",$_SERVER["QUERY_STRING"]); |
191 |
echo "<script src=".$url."&jsonp=returnData"." ></script>"; |
192 |
?>
|
193 |
</div>
|
194 |
</body>
|
195 |
</html>
|