/i3geo60/ferramentas/recline/tabela.php - Annotate - Application: i3geo - gvSIG

6503

edmar.moretti@gmail.com

<?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>

Application: i3geo

root / i3geo60 / ferramentas / recline / tabela.php @ 6503