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> |
---|