source: CMIP6dreq/trunk/dreqJs/mipVars.html @ 459

Subversion URL: http://proj.badc.rl.ac.uk/svn/exarch/CMIP6dreq/trunk/dreqJs/mipVars.html@459
Revision 459, 4.4 KB checked in by mjuckes, 4 years ago (diff)

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