source: clipcs/trunk/html/trial/header-row2.html @ 314

Subversion URL: http://proj.badc.rl.ac.uk/svn/exarch/clipcs/trunk/html/trial/header-row2.html@314
Revision 314, 4.7 KB checked in by mjuckes, 6 years ago (diff)

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