source: CMIP6dreqbuild/trunk/src/framework/websiteExtras/mipVars.html @ 622

Subversion URL: http://proj.badc.rl.ac.uk/svn/exarch/CMIP6dreqbuild/trunk/src/framework/websiteExtras/mipVars.html@622
Revision 622, 5.5 KB checked in by mjuckes, 4 years ago (diff)

Adding basic json download to mipVars.html

Line 
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5  <link rel="stylesheet" href="/css/SlickGrid/jquery-ui-1.8.16.custom.css" type="text/css"/>
6  <link rel="stylesheet" href="/css/SlickGrid/slick.grid.css" type="text/css"/>
7  <link rel="stylesheet" href="/css/SlickGrid/slick.css" type="text/css"/>
8  <style>
9    .slick-headerrow-column {
10      background: #87ceeb;
11      text-overflow: clip;
12      -moz-box-sizing: border-box;
13      box-sizing: border-box;
14    }
15
16    .slick-headerrow-column input {
17      margin: 0;
18      padding: 0;
19      width: 100%;
20      height: 100%;
21      -moz-box-sizing: border-box;
22      box-sizing: border-box;
23    }
24  </style>
25</head>
26<body>
27<link rel="stylesheet" type="text/css" href="css/dreq.css">
28</head><body>
29
30<div id="top">
31   <div id="corner"></div>
32   CMIP6 Data Request
33</div>
34<div id="nav" style="height:600px"><div><a href="index.html" title="Home">Home</a></div></div>
35
36<div id="section">
37    <h1>MIP Variables -- search</h1>
38
39<a id="export" class="myButton" download="" href="#">export</a>
40<center><it><sm>Powered bc <a href="https://github.com/mleibman/SlickGrid/">SlickGrid</a> JavaScript</sm></it></center>
41<div>
42  <div class="info-panel">
43      <p>The search allows records to be filtered based on short name, long name, standard name, units or unique identifier.</p>
44<p>
45      Type text in boxes at column heads to filter grid; Preface term with "$" to match start of record;
46       Preface list of words with "&" to show only records that match all words.
47      <a href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html" target="_sourcewindow">Based on this example on Github</a>.
48</p>
49  </div>
50
51  <div style="width:1100px;">
52    <div id="myGrid" style="width:100%;height:500px;"></div>
53  </div>
54</div>
55</div>
56
57<script src="/js/SlickGrid/lib/firebugx.js"></script>
58
59<script src="/js/SlickGrid/lib/jquery-1.7.min.js"></script>
60<script src="/js/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
61<script src="/js/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
62
63<script src="/js/SlickGrid/slick.core.js"></script>
64<script src="/js/SlickGrid/slick.dataview.js"></script>
65<script src="/js/SlickGrid/slick.gridP.js"></script>
66
67<script src="data/data3.js"></script>
68
69<script>
70  var dataView;
71  var grid;
72  var options = {
73    showHeaderRow: true,
74    headerRowHeight: 30,
75    explicitInitialization: true,
76    enableCellNavigation: true
77  };
78  var columnFilters = {};
79
80  var columns = getData.cols();
81
82  var data = getData.data();
83  function colFilter( t, s ) {
84          var res = t.split(" ");
85          for (i = 0; i < res.length; i++) {
86            if (s.indexOf(res[i]) !== -1 ) {
87               return true;
88             }
89          }
90          return false;
91      }
92  function colAndFilter( t, s ) {
93          var res = t.split(" ");
94          for (i = 0; i < res.length; i++) {
95            if (s.indexOf(res[i]) === -1 ) {
96               return false;
97             }
98          }
99          return true;
100      }
101  function filter(item) {
102    for (var columnId in columnFilters) {
103      if (columnId !== undefined && columnFilters[columnId] !== "") {
104        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
105        var t = columnFilters[columnId].toLowerCase()
106        var s = item[c.field].toLowerCase()
107        if (t.substr(0,1) == '$') {
108          if ( s.substr(0,t.length-1) != t.substr(1,t.length) ) {
109            return false;
110          }
111        } else if (t.substr(0,1) == '&') {
112            if (!colAndFilter(t.substr(1,t.length),s) ) {
113               return false;
114            }
115        } else {
116/**
117            if (s.indexOf(t) === -1 ) {
118               return false;
119            }
120***/
121            if (!colFilter(t,s) ) {
122               return false;
123            }
124        }
125      }
126    }
127    return true;
128  }
129
130  /*** function to enable download of selected items. Passed to dataView below.
131  ***/
132  function createDownloadLink(items){
133        var anchorSelector = "#export";
134        var fileName = "selected_json.txt";
135        if(window.navigator.msSaveOrOpenBlob) {
136            blobObject = new Blob(items);
137            $(anchorSelector).click(function(){
138                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
139            });
140        } else {
141            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(items);
142            $(anchorSelector).attr("download", fileName);
143            $(anchorSelector).attr("href", url);
144        }
145  }
146
147  $(function () {
148    dataView = new Slick.Data.DataView();
149    grid = new Slick.Grid("#myGrid", dataView, columns, options);
150
151
152    dataView.onRowCountChanged.subscribe(function (e, args) {
153      grid.updateRowCount();
154      grid.render();
155    });
156
157    dataView.onRowsChanged.subscribe(function (e, args) {
158      grid.invalidateRows(args.rows);
159      grid.render();
160    });
161
162
163    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
164      var columnId = $(this).data("columnId");
165      if (columnId != null) {
166        columnFilters[columnId] = $.trim($(this).val());
167        dataView.refresh();
168      }
169    });
170
171    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
172        $(args.node).empty();
173        $("<input type='text'>")
174           .data("columnId", args.column.id)
175           .val(columnFilters[args.column.id])
176           .appendTo(args.node);
177    });
178
179    grid.init();
180
181    dataView.beginUpdate();
182    dataView.setItems(data);
183    dataView.setDownl(createDownloadLink);
184    dataView.setFilter(filter);
185    dataView.endUpdate();
186
187  })
188
189
190
191</script>
192</body>
193</html>
Note: See TracBrowser for help on using the repository browser.