source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/grid/custom-filter-operators.html @ 604

Last change on this file since 604 was 604, checked in by vmipsl, 12 years ago

images
File size: 5.0 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>wijgrid - custom filter operators</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="wijgrid allows custom filter operators" />
8    <meta name="keywords" content="" />
9    <meta name="author" content="ComponentOne" />
10   
11    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css"/>
12    <link href="../../themes/wijmo/jquery.wijmo-open.2.2.2.css" rel="stylesheet" type="text/css" />
13    <link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
14    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />
15
16    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
17    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
18    <script src="../../external/globalize.min.js" type="text/javascript"></script>
19    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
20
21    <script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script>
22    <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
23    <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
24    <script src="../../wijmo/jquery.wijmo.wijinputdate.js" type="text/javascript"></script>
25    <script src="../../wijmo/jquery.wijmo.wijinputmask.js" type="text/javascript"></script>
26    <script src="../../wijmo/jquery.wijmo.wijinputnumber.js" type="text/javascript"></script>
27    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
28    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>
29
30
31    <script id="scriptInit" type="text/javascript">
32        $(document).ready(function () {
33            var fop_beginsEndsWith = {
34                name: "BeginsEndsWith",
35                arity: 2,
36                applicableTo: ["string"],
37                operator: function(dataVal, filterVal) {
38                    if (dataVal) {
39                        dataVal = dataVal.toLowerCase();
40                        filterVal = filterVal.toLowerCase();
41
42                        if (dataVal.indexOf(filterVal) === 0) {
43                           var idx = dataVal.lastIndexOf(filterVal);
44                           return idx > 0 && dataVal.length - idx === filterVal.length;
45                        }
46                    }
47
48                    return false;
49                }
50            };
51
52            var fop_Even = {
53                name: "Even",
54                arity: 1,
55                applicableTo: ["number", "currency"],
56                operator: function(dataVal) {
57                    return dataVal % 2 === 0;
58                }
59            }
60
61            $("#demo").wijgrid({
62                showFilter: true,
63                allowSorting: true,
64                customFilterOperators: [ fop_beginsEndsWith, fop_Even ],
65                columns: [ {}, { dataType: "number" } ]
66            });
67        });
68    </script>
69</head>
70<body class="demo-single">
71    <div class="container">
72        <div class="header">
73            <h2>
74                wijgrid - custom filter operators</h2>
75        </div>
76        <div class="main demo">
77            <!-- Begin demo markup -->
78            <table id="demo">
79                <thead>
80                    <tr>
81                        <th>StringColumn</th><th>NumberColumn</th>
82                    </tr>
83                </thead>
84                <tbody>
85                    <tr>
86                        <td>a</td><td>0</td>
87                    </tr>
88                    <tr>
89                        <td>aba</td><td>1</td>
90                    </tr>
91                    <tr>
92                        <td>aabbcc</td><td>2</td>
93                    </tr>
94                    <tr>
95                        <td>foobarfoo</td><td>3</td>
96                    </tr>
97                    <tr>
98                        <td>foobar</td><td>4</td>
99                    </tr>
100                    <tr>
101                        <td>aaabbbaa</td><td>5</td>
102                    </tr>
103                </tbody>
104            </table>
105            <!-- End demo markup -->
106            <div class="demo-options">
107            <!-- Begin options markup -->
108            <!-- End options markup -->
109            </div>
110        </div>
111        <div class="footer demo-description">
112            <p>
113               wijgrid allows custom filter operators. This sample shows two custom filters available in the filter drop down.
114               <ul>
115                   <li>BeginsEndsWith: applicable to string columns, filters values starting and ending with some string.</li>
116                   <li>Even: applicable to numeric columns, filters even values.</li>
117               </ul>
118            </p>
119        </div>
120    </div>
121</body>
122</html>
Note: See TracBrowser for help on using the repository browser.