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

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

wijmo
File size: 10.7 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Grid - Scrolling</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="wijgrid provides scrolling" />
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    <style type="text/css">
24        #testTable > tbody > tr > td
25        {
26            white-space: nowrap;
27            vertical-align: top;
28        }
29    </style>
30    <script id="scriptInit" type="text/javascript">
31        $(document).ready(function () {
32            $("#demo").wijgrid({
33                selectionMode: "none",
34                scrollMode: "auto",
35                columns: [
36                    { dataType: "number", headerText: "num", width: 300, ensurePxWidth: true },
37                    { headerText: "txt", readOnly: true, width: 400, ensurePxWidth: true },
38                    { headerText: "roman_txt", valueRequired: true, width: 400, ensurePxWidth: true },
39                    { headerText: "bool", dataType: "boolean", width: 300, ensurePxWidth: true },
40                    { headerText: "txt", width: 400, ensurePxWidth: true }
41                ]
42            });
43        });
44
45    </script>
46</head>
47<body class="demo-single">
48    <div class="container">
49        <div class="header">
50            <h2>
51                Scrolling</h2>
52        </div>
53        <div class="main demo">
54            <!-- Begin demo markup -->
55            <table id="demo" style="height:300px;">
56               <thead>
57                  <tr>
58                     <th>0</th><th>1</th><th>2</th><th>4</th>
59                  </tr>
60               </thead>
61               <tbody>
62                  <tr>
63                     <td>512121212</td><td>SXII122PC</td><td>XII</td><td>false</td><td>Hu qq rilum abs qqw</td>
64                  </tr>
65                  <tr>
66                     <td>5</td><td>b</td><td>MCMXCIII</td><td>true</td><td>Hu qq rilum abs qqw</td>
67                  </tr>
68                  <tr>
69                     <td>6</td><td>c</td><td>II</td><td>true</td><td>Hu qq rilum abs qqw</td>
70                  </tr>
71                  <tr>
72                     <td>6</td><td>c</td><td>CM</td><td>false</td><td>Hu qq rilum abs qqw</td>
73                  </tr>
74                  <tr>
75                     <td>6</td><td>d</td><td>IV</td><td>true</td><td>Hu qq rilum abs qqw</td>
76                  </tr>
77                  <tr>
78                     <td>7</td><td>c</td><td>XII</td><td>true</td><td>Hu qq rilum abs qqw</td>
79                  </tr>
80                  <tr>
81                     <td>7</td><td>c</td><td>I</td><td>false</td><td>Hu qq rilum abs qqw</td>
82                  </tr>
83                  <tr>
84                     <td>7</td><td>d</td><td>III</td><td>false</td><td>Hu qq rilum abs qqw</td>
85                  </tr>
86                  <tr>
87                     <td>5</td><td>a</td><td>XII</td><td>false</td><td>Hu qq rilum abs qqw</td>
88                  </tr>
89                  <tr>
90                     <td>5</td><td>b</td><td>MCMXCIII</td><td>true</td><td>Hu qq rilum abs qqw</td>
91                  </tr>
92                  <tr>
93                     <td>6</td><td>c</td><td>II</td><td>true</td><td>Hu qq rilum abs qqw</td>
94                  </tr>
95                  <tr>
96                     <td>6</td><td>c</td><td>CM</td><td>false</td><td>Hu qq rilum abs qqw</td>
97                  </tr>
98                  <tr>
99                     <td>6</td><td>d</td><td>IV</td><td>true</td><td>Hu qq rilum abs qqw</td>
100                  </tr>
101                  <tr>
102                     <td>7</td><td>c</td><td>XII</td><td>true</td><td>Hu qq rilum abs qqw</td>
103                  </tr>
104                  <tr>
105                     <td>7</td><td>c</td><td>I</td><td>false</td><td>Hu qq rilum abs qqw</td>
106                  </tr>
107                  <tr>
108                     <td>7</td><td>d</td><td>III</td><td>false</td><td>Hu qq rilum abs qqw</td>
109                  </tr>
110                  <tr>
111                     <td>5</td><td>a</td><td>XII</td><td>false</td><td>Hu qq rilum abs qqw</td>
112                  </tr>
113                  <tr>
114                     <td>5</td><td>b</td><td>MCMXCIII</td><td>true</td><td>Hu qq rilum abs qqw</td>
115                  </tr>
116                  <tr>
117                     <td>6</td><td>c</td><td>II</td><td>true</td><td>Hu qq rilum abs qqw</td>
118                  </tr>
119                  <tr>
120                     <td>6</td><td>c</td><td>CM</td><td>false</td><td>Hu qq rilum abs qqw</td>
121                  </tr>
122                  <tr>
123                     <td>6</td><td>d</td><td>IV</td><td>true</td><td>Hu qq rilum abs qqw</td>
124                  </tr>
125                  <tr>
126                     <td>7</td><td>c</td><td>XII</td><td>true</td><td>Hu qq rilum abs qqw</td>
127                  </tr>
128                  <tr>
129                     <td>7</td><td>c</td><td>I</td><td>false</td><td>Hu qq rilum abs qqw</td>
130                  </tr>
131                  <tr>
132                     <td>7</td><td>d</td><td>III</td><td>false</td><td>Hu qq rilum abs qqw</td>
133                  </tr>
134                  <tr>
135                     <td>5</td><td>a</td><td>XII</td><td>false</td><td>Hu qq rilum abs qqw</td>
136                  </tr>
137                  <tr>
138                     <td>5</td><td>b</td><td>MCMXCIII</td><td>true</td><td>Hu qq rilum abs qqw</td>
139                  </tr>
140                  <tr>
141                     <td>6</td><td>c</td><td>II</td><td>true</td><td>Hu qq rilum abs qqw</td>
142                  </tr>
143                  <tr>
144                     <td>6</td><td>c</td><td>CM</td><td>false</td><td>Hu qq rilum abs qqw</td>
145                  </tr>
146                  <tr>
147                     <td>6</td><td>d</td><td>IV</td><td>true</td><td>Hu qq rilum abs qqw</td>
148                  </tr>
149                  <tr>
150                     <td>7</td><td>c</td><td>XII</td><td>true</td><td>Hu qq rilum abs qqw</td>
151                  </tr>
152                  <tr>
153                     <td>7</td><td>c</td><td>I</td><td>false</td><td>Hu qq rilum abs qqw</td>
154                  </tr>
155                  <tr>
156                     <td>7</td><td>d</td><td>III</td><td>false</td><td>Hu qq rilum abs qqw</td>
157                  </tr>
158                  <tr>
159                     <td>5</td><td>a</td><td>XII</td><td>false</td><td>Hu qq rilum abs qqw</td>
160                  </tr>
161                  <tr>
162                     <td>5</td><td>b</td><td>MCMXCIII</td><td>true</td><td>Hu qq rilum abs qqw</td>
163                  </tr>
164                  <tr>
165                     <td>6</td><td>c</td><td>II</td><td>true</td><td>Hu qq rilum abs qqw</td>
166                  </tr>
167                  <tr>
168                     <td>6</td><td>c</td><td>CM</td><td>false</td><td>Hu qq rilum abs qqw</td>
169                  </tr>
170                  <tr>
171                     <td>6</td><td>d</td><td>IV</td><td>true</td><td>Hu qq rilum abs qqw</td>
172                  </tr>
173                  <tr>
174                     <td>7</td><td>c</td><td>XII</td><td>true</td><td>Hu qq rilum abs qqw</td>
175                  </tr>
176                  <tr>
177                     <td>7</td><td>c</td><td>I</td><td>false</td><td>Hu qq rilum abs qqw</td>
178                  </tr>
179                  <tr>
180                     <td>7</td><td>d</td><td>III</td><td>false</td><td>Hu qq rilum abs qqw</td>
181                  </tr>
182                  <tr>
183                     <td>5</td><td>a</td><td>XII</td><td>false</td><td>Hu qq rilum abs qqw</td>
184                  </tr>
185                  <tr>
186                     <td>5</td><td>b</td><td>MCMXCIII</td><td>true</td><td>Hu qq rilum abs qqw</td>
187                  </tr>
188                  <tr>
189                     <td>6</td><td>c</td><td>II</td><td>true</td><td>Hu qq rilum abs qqw</td>
190                  </tr>
191                  <tr>
192                     <td>6</td><td>c</td><td>CM</td><td>false</td><td>Hu qq rilum abs qqw</td>
193                  </tr>
194                  <tr>
195                     <td>6</td><td>d</td><td>IV</td><td>true</td><td>Hu qq rilum abs qqw</td>
196                  </tr>
197                  <tr>
198                     <td>7</td><td>c</td><td>XII</td><td>true</td><td>Hu qq rilum abs qqw</td>
199                  </tr>
200                  <tr>
201                     <td>7</td><td>c</td><td>I</td><td>false</td><td>Hu qq rilum abs qqw</td>
202                  </tr>
203                  <tr>
204                     <td>7</td><td>d</td><td>III</td><td>false</td><td>Hu qq rilum abs qqw</td>
205                  </tr>
206                  <tr>
207                     <td>5</td><td>a</td><td>XII</td><td>false</td><td>Hu qq rilum abs qqw</td>
208                  </tr>
209               </tbody>
210            </table>
211            <!-- End demo markup -->
212            <div class="demo-options">
213                <!-- Begin options markup -->
214                <!-- End options markup -->
215            </div>
216        </div>
217        <div class="footer demo-description">
218            <p>
219            This sample shows how to add a scrollbar to the grid.
220            </p>
221            <ul>
222                <li>
223                The <b>scrollMode</b> option determines the scrolling mode in which a scrollbar is added to the grid.
224                </li>
225                <li>
226                The <b>staticRowIndex</b> option indicates the index of data rows that will always be shown on the top when the wijgrid is scrolled vertically.
227                </li>
228                <li>
229                The <b>staticColumnIndex</b> option indicates the index  of columns that will always be shown on the left when the grid view scrolled horizontally.
230                </li>
231            </ul>
232        </div>
233    </div>
234</body>
235</html>
Note: See TracBrowser for help on using the repository browser.