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

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

images
File size: 7.1 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Grid - Custom Data Parsers</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="" />
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.wijgrid.css" rel="stylesheet" type="text/css" />
14
15    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
16    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
17    <script src="../../external/globalize.min.js" type="text/javascript"></script>
18    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
19
20    <script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script>
21    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
22    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>
23
24    <script id="scriptInit" type="text/javascript">
25        $(document).ready(function () {
26            var customBoolParser = {
27                // dom -> boolean
28                parseDOM: function (value, culture, format, nullString) {
29                    return this.parse(value, culture, format, nullString);
30                },
31
32                // string/ boolean -> boolean
33                parse: function (value, culture, format, nullString) {
34                    if (typeof (value) === "boolean") {
35                        return value;
36                    }
37
38                    if (typeof (value) === "string") {
39                        value = $.trim(value);
40                    }
41
42                    if (!value || value === "&nbsp;" || value === nullString) {
43                        return null;
44                    }
45
46                    switch ($.trim(value.toLowerCase())) {
47                        case "off": return false;
48                        case "on": return true;
49                    }
50
51                    return NaN;
52                },
53
54                // boolan -> string
55                toStr: function (value, culture, format, nullString) {
56                    return value ? "on" : "off";
57                }
58            };
59           
60            $("#demo").wijgrid({
61                allowSorting: true,
62                columns: [
63                    {},
64                    { dataType: "boolean", dataParser: customBoolParser },
65                    { dataType: "number", dataFormatString: "n0" },
66                    { dataType: "number", dataParser: customRomanParser }
67                ]
68            });
69        });
70
71        function customRomanParser() {
72            // DOM -> number
73            this.parseDOM = function (value, culture, format, nullString) {
74                return this.parse(value.innerHTML);
75            },
76
77            // string/ number -> number
78            this.parse = function (value, culture, format, nullString) {
79                if (typeof (value) === "number" && (value === 0 || isNaN(value))) {
80                    return NaN;
81                }
82
83                if (!value || (value === "&nbsp;") || (value === nullString)) {
84                    return null;
85                }
86
87                if (!isNaN(value)) {
88                    return parseInt(value);
89                }
90
91                value = roman(value);
92                return !value ? NaN : value;
93            },
94
95            // number -> string
96            this.toStr = function (value, culture, format, nullString) {
97                if (value === null) {
98                    return nullString;
99                }
100
101                return roman(value);
102            };
103
104            var arab_nums = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000];
105            var roman_nums = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 'CD', 'D', 'CM', 'M'];
106
107            function roman(value) {
108                if (typeof (value) === "number") {
109                    return (function (arab) {
110                        var roman = "";
111
112                        for (var i = 12; arab > 0; ) {
113                            if (arab >= arab_nums[i]) {
114                                roman += roman_nums[i];
115                                arab -= arab_nums[i];
116                            } else {
117                                i--;
118                            }
119                        }
120
121                        return roman;
122
123                    })(value);
124                }
125                else {
126                    return (function (roman) {
127                        roman = roman.toUpperCase();
128
129                        var arab = 0;
130                        for (var i = 12, pos = 0, len = roman.length; i >= 0 && pos < len; ) {
131                            if (roman.substr(pos, roman_nums[i].length) === roman_nums[i]) {
132                                arab += arab_nums[i];
133                                pos += roman_nums[i].length;
134                            }
135                            else {
136                                i--;
137                            }
138                        }
139
140                        return arab;
141                    })(value);
142                }
143            }
144        }
145    </script>
146</head>
147<body class="demo-single">
148    <div class="container">
149        <div class="header">
150            <h2>
151                Custom Data Parsers</h2>
152        </div>
153        <div class="main demo">
154            <!-- Begin demo markup -->
155            <table id="demo">
156               <thead>
157                  <tr>
158                     <th>Boolean</th><th>Boolean Parsed</th><th>Number</th><th>Number Parsed</th>
159                  </tr>
160               </thead>
161               <tbody>
162                  <tr>
163                     <td>off</td><td>off</td><td>1</td><td>1</td>
164                  </tr>
165                  <tr>
166                     <td>on</td><td>on</td><td>2</td><td>2</td>
167                  </tr>
168                  <tr>
169                     <td>off</td><td>off</td><td>1993</td><td>1993</td>
170                  </tr>
171                  <tr>
172                     <td>off</td><td>off</td><td>2015</td><td>2015</td>
173                  </tr>
174                  <tr>
175                     <td>on</td><td>on</td><td>100</td><td>100</td>
176                  </tr>
177               </tbody>
178            </table>
179            <!-- End demo markup -->
180            <div class="demo-options">
181                <!-- Begin options markup -->
182                <!-- End options markup -->
183            </div>
184        </div>
185        <div class="footer demo-description">
186            <p>
187               This demo shows how to customize a data parser using the customBoolParser and customRomanParser functions.
188            </p>
189        </div>
190    </div>
191</body>
192</html>
Note: See TracBrowser for help on using the repository browser.