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

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

added slickgrid table

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<script src="slickData.js" type="text/javascript"></script>
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
56<script>
57  var dataView;
58  var grid;
59  var options = {
60    enableCellNavigation: true,
61    showHeaderRow: true,
62    headerRowHeight: 30,
63    explicitInitialization: true
64  };
65  var columnFilters = {};
66
67  var columns = [ {id:0, name:'Variable', field:0, width: 100},
68              {id:1, name:'Long name', field:1, width: 180},
69              {id:2, name:'Standard name', field:2, width: 210},
70              {id:3, name:'Comment', field:3, width: 400},
71              {id:4, name:'Tables', field:4, width: 180}];
72
73
74  function colFilter( t, s ) {
75          var res = t.split(" ");
76          for (i = 0; i < res.length; i++) {
77            if (s.indexOf(res[i]) !== -1 ) {
78               return true;
79             }
80          }
81          return false;
82      }
83  function colAndFilter( t, s ) {
84          var res = t.split(" ");
85          for (i = 0; i < res.length; i++) {
86            if (s.indexOf(res[i]) === -1 ) {
87               return false;
88             }
89          }
90          return true;
91      }
92  function filter(item) {
93    for (var columnId in columnFilters) {
94      if (columnId !== undefined && columnFilters[columnId] !== "") {
95        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
96        var t = columnFilters[columnId]
97        var s = item[c.field]
98        if (t.substr(0,1) == '$') {
99          if ( s.substr(0,t.length-1) != t.substr(1,t.length) ) {
100            return false;
101          }
102        } else if (t.substr(0,1) == '&') {
103            if (!colAndFilter(t.substr(1,t.length),s) ) {
104               return false;
105            }
106        } else {
107/**
108            if (s.indexOf(t) === -1 ) {
109               return false;
110            }
111***/
112            if (!colFilter(t,s) ) {
113               return false;
114            }
115        }
116      }
117    }
118    return true;
119  }
120
121  $(function () {
122    dataView = new Slick.Data.DataView();
123    grid = new Slick.Grid("#myGrid", dataView, columns, options);
124
125
126    dataView.onRowCountChanged.subscribe(function (e, args) {
127      grid.updateRowCount();
128      grid.render();
129    });
130
131    dataView.onRowsChanged.subscribe(function (e, args) {
132      grid.invalidateRows(args.rows);
133      grid.render();
134    });
135
136
137    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
138      var columnId = $(this).data("columnId");
139      if (columnId != null) {
140        columnFilters[columnId] = $.trim($(this).val());
141        dataView.refresh();
142      }
143    });
144
145    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
146        $(args.node).empty();
147        $("<input type='text'>")
148           .data("columnId", args.column.id)
149           .val(columnFilters[args.column.id])
150           .appendTo(args.node);
151    });
152
153    grid.init();
154
155    dataView.beginUpdate();
156    dataView.setItems(data);
157    dataView.setFilter(filter);
158    dataView.endUpdate();
159  })
160</script>
161</body>
162</html>
Note: See TracBrowser for help on using the repository browser.