source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/grid/header-icons.html @ 608

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

images
File size: 6.2 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Grid - Overview</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="Overview" />
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.wijpager.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.wijmo.wijpager.js" type="text/javascript"></script>
23    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
24    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>
25
26    <script id="scriptInit" type="text/javascript">
27        $(document).ready(function () {
28            $("#demo").wijgrid({
29                allowSorting: true
30            });
31
32            $("#demo1").wijgrid({
33                allowSorting: true,
34
35                columns: [
36                  { // number
37                    dataKey: 0,
38                    headerText: "<span class='ui-icon ui-icon-calculator' style='left:0;'></span> Number"
39                  },
40                  {
41                    headerText: "<span class='ui-icon ui-icon-info' style='left:0;'></span>Personal info",
42                    columns: [
43                       // nationality
44                       { dataKey: 1, headerText: "<span class='ui-icon ui-icon-suitcase' style='left:0;'></span> Nationality" },
45                       // player
46                       { dataKey: 2, headerText: "<span class='ui-icon ui-icon-person' style='left:0;'></span> Player" },
47                       // age
48                       { dataKey: 5, headerText: "<span class='ui-icon ui-icon-info' style='left:0;'></span> Age" },
49                       // birthplace
50                       { dataKey: 7, headerText: "<span class='ui-icon ui-icon-calendar' style='left:0;'></span> Birthplace" } 
51                    ]
52                  },
53                  {
54                    headerText: "<span class='ui-icon ui-icon-info' style='left:0;'></span>Team related info",
55                    columns: [
56                       { dataKey: 3, headerText: "<span class='ui-icon ui-icon-clipboard' style='left:0;'></span> Position" },
57                       { dataKey: 4, headerText: "<span class='ui-icon ui-icon-transferthick-e-w' style='left:0;'></span> Handedness" },
58                       { dataKey: 6, headerText: "<span class='ui-icon ui-icon-calendar' style='left:0;'></span> Acquired" }
59                    ]
60                  }
61                ],
62
63                data: $("#demo").wijgrid("data")
64            }); 
65        });
66    </script>
67</head>
68<body class="demo-single">
69    <div class="container">
70        <div class="header">
71            <h2>
72                Custom header icons</h2>
73        </div>
74        <div class="main demo">
75            <!-- Begin demo markup -->
76            <p>Using inline html:</p>
77            <table id="demo">
78               <thead>
79                  <tr>
80                     <th><span class="ui-icon ui-icon-calculator" style="left:0;"></span>Number</th>
81                     <th><span class="ui-icon ui-icon-suitcase" style="left:0;"></span>Nationality</th>
82                     <th><span class="ui-icon ui-icon-person" style="left:0;"></span>Player</th>
83                     <th><span class="ui-icon ui-icon-clipboard" style="left:0;"></span>Position</th>
84                     <th><span class="ui-icon ui-icon-transferthick-e-w" style="left:0;"></span>Handedness</th>
85                     <th><span class="ui-icon ui-icon-info" style="left:0;"></span>Age</th>
86                     <th><span class="ui-icon ui-icon-calendar" style="left:0;"></span>Acquired</th>
87                     <th><span class="ui-icon ui-icon-calendar" style="left:0;"></span>Birthplace</th>
88                  </tr>
89               </thead>
90               <tbody>
91                  <tr>
92                    <th>27</th><td>Canada</td><td>Adams, Craig</td><td>RW</td><td>R</td><td>32</td><td>2009</td><td>Seria, Brunei</td>
93                  </tr>
94                  <tr>
95                    <th>43</th><td>Canada</td><td>Boucher, Philippe</td><td>D</td><td>R</td><td>36</td><td>2008</td><td>Saint-Apollinaire, Quebec</td>
96                  </tr>
97                  <tr>
98                    <th>24</th><td>Canada</td><td>Cooke, Matt</td><td>LW</td><td>L</td><td>30</td><td>2008</td><td>Belleville, Ontario</td>
99                  </tr>
100                  <tr>
101                    <th>87</th><td>Canada</td><td>Crosby, Sidney (C)</td><td>C</td><td>L</td><td>21</td><td>2005</td><td>Cole Harbour, Nova Scotia</td>
102                  </tr>
103                  <tr>
104                    <th>1</th><td>United States</td><td>Curry, John</td><td>G</td><td>L</td><td>25</td><td>2007</td><td>Shorewood, Minnesota</td>
105                  </tr>
106               </tbody>
107            </table>
108
109            <p>Using the <b>headerText</b> option:</p>
110            <table id="demo1">
111            </table>
112       
113            <!-- End demo markup -->
114            <div class="demo-options">
115                <!-- Begin options markup -->
116                <!-- End options markup -->
117            </div>
118        </div>
119        <div class="footer demo-description">
120            <p>
121               This sample shows how to customize a column header.
122            </p>
123        </div>
124    </div>
125</body>
126</html>
Note: See TracBrowser for help on using the repository browser.