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

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

added description back to javascript filter

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<center><it><sm>Powered bc <a href="https://github.com/mleibman/SlickGrid/">SlickGrid</a> JavaScript</sm></it></center>
39<div>
40  <div class="info-panel">
41      <p>The search allows records to be filtered based on short name, long name, standard name, units or unique identifier.</p>
42<p>
43      Type text in boxes at column heads to filter grid; Preface term with "$" to match start of record;
44       Preface list of words with "&" to show only records that match all words.
45      <a href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-header-row.html" target="_sourcewindow">Based on this example on Github</a>.
46</p>
47  </div>
48
49  <div style="width:1100px;">
50    <div id="myGrid" style="width:100%;height:500px;"></div>
51  </div>
52</div>
53</div>
54
55<script src="/js/SlickGrid/lib/firebugx.js"></script>
56
57<script src="/js/SlickGrid/lib/jquery-1.7.min.js"></script>
58<script src="/js/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
59<script src="/js/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
60
61<script src="/js/SlickGrid/slick.core.js"></script>
62<script src="/js/SlickGrid/slick.dataview.js"></script>
63<script src="/js/SlickGrid/slick.gridP.js"></script>
64
65<script src="data/mipVarsData.js"></script>
66
67<script>
68  var dataView;
69  var grid;
70  var options = {
71    showHeaderRow: true,
72    headerRowHeight: 30,
73    explicitInitialization: true,
74    enableCellNavigation: true
75  };
76  var columnFilters = {};
77
78  var columns = getData.cols();
79
80  var data = getData.data();
81  function colFilter( t, s ) {
82          var res = t.split(" ");
83          for (i = 0; i < res.length; i++) {
84            if (s.indexOf(res[i]) !== -1 ) {
85               return true;
86             }
87          }
88          return false;
89      }
90  function colAndFilter( t, s ) {
91          var res = t.split(" ");
92          for (i = 0; i < res.length; i++) {
93            if (s.indexOf(res[i]) === -1 ) {
94               return false;
95             }
96          }
97          return true;
98      }
99  function filter(item) {
100    for (var columnId in columnFilters) {
101      if (columnId !== undefined && columnFilters[columnId] !== "") {
102        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
103        var t = columnFilters[columnId].toLowerCase()
104        var s = item[c.field].toLowerCase()
105        if (t.substr(0,1) == '$') {
106          if ( s.substr(0,t.length-1) != t.substr(1,t.length) ) {
107            return false;
108          }
109        } else if (t.substr(0,1) == '&') {
110            if (!colAndFilter(t.substr(1,t.length),s) ) {
111               return false;
112            }
113        } else {
114/**
115            if (s.indexOf(t) === -1 ) {
116               return false;
117            }
118***/
119            if (!colFilter(t,s) ) {
120               return false;
121            }
122        }
123      }
124    }
125    return true;
126  }
127
128  $(function () {
129    dataView = new Slick.Data.DataView();
130    grid = new Slick.Grid("#myGrid", dataView, columns, options);
131
132
133    dataView.onRowCountChanged.subscribe(function (e, args) {
134      grid.updateRowCount();
135      grid.render();
136    });
137
138    dataView.onRowsChanged.subscribe(function (e, args) {
139      grid.invalidateRows(args.rows);
140      grid.render();
141    });
142
143
144    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
145      var columnId = $(this).data("columnId");
146      if (columnId != null) {
147        columnFilters[columnId] = $.trim($(this).val());
148        dataView.refresh();
149      }
150    });
151
152    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
153        $(args.node).empty();
154        $("<input type='text'>")
155           .data("columnId", args.column.id)
156           .val(columnFilters[args.column.id])
157           .appendTo(args.node);
158    });
159
160    grid.init();
161
162    dataView.beginUpdate();
163    dataView.setItems(data);
164    dataView.setFilter(filter);
165    dataView.endUpdate();
166  })
167
168</script>
169</body>
170</html>
Note: See TracBrowser for help on using the repository browser.