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

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

images
File size: 4.9 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Grid - Data Types</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            $("#demo").wijgrid( {
27                allowSorting: true,
28                columns: [
29                    {},
30                    { dataType: "currency" },
31                    { dataType: "number" },
32                    { dataType: "number", dataFormatString: "p0" },
33                    { dataType: "boolean" }
34                ]
35            });
36        });
37    </script>
38</head>
39<body class="demo-single">
40    <div class="container">
41        <div class="header">
42            <h2>
43                Data Types</h2>
44        </div>
45        <div class="main demo">
46            <!-- Begin demo markup -->
47            <table id="demo">
48                <thead>
49                    <tr>
50                        <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th>
51                    </tr>
52                </thead>
53                <tbody>
54                    <tr>
55                        <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td>
56                    </tr><tr>
57                        <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td>
58                    </tr><tr>
59                        <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td>
60                    </tr><tr>
61                        <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td>
62                    </tr><tr>
63                        <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td>
64                    </tr>
65                </tbody>
66            </table>
67            <h4>Original Data</h4>
68            <table id="demo1">
69                <thead>
70                    <tr>
71                        <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th>
72                    </tr>
73                </thead>
74                <tbody>
75                    <tr>
76                        <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td>
77                    </tr><tr>
78                        <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td>
79                    </tr><tr>
80                        <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td>
81                    </tr><tr>
82                        <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td>
83                    </tr><tr>
84                        <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td>
85                    </tr>
86                </tbody>
87            </table>
88
89            <!-- End demo markup -->
90            <div class="demo-options">
91            <!-- Begin options markup -->
92               
93            <!-- End options markup -->
94            </div>
95        </div>
96        <div class="footer demo-description">
97            <p>
98               In this sample, the wijgrid widget shows the same data as in the Original Data grid, but the column data types in the wijgrid are explicitly specified:
99            </p>
100                <ul>
101                    <li>ProductID: <b>dataType</b> = &quot;string&quot;</li>
102                    <li>UnitPrice: <b>dataType</b> = &quot;currency&quot;</li>
103                    <li>Quantity: <b>dataType</b> = &quot;number&quot;</li>
104                    <li>Discount: <b>dataType</b> = &quot;number&quot;, <b>dataFormatString</b> = &quot;p0&quot;</li>
105                    <li>Discontinued: <b>dataType</b> = &quot;boolean&quot;</li>
106                </ul>
107                <p>
108                Try to sort the UnitPrice column in both grids to see a difference.</p>
109        </div>
110    </div>
111</body>
112</html>
Note: See TracBrowser for help on using the repository browser.