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

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

images
File size: 6.1 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <title>Grid - Custom Editors</title>
5        <meta charset="utf-8" />
6        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7        <meta name="description" content="custom editors" />
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.wijcombobox.css" rel="stylesheet" type="text/css" />
14        <link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
15        <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />
16
17        <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
18        <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
19   <script src="../../external/globalize.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.wijdatasource.js" type="text/javascript"></script>
23        <script src="../../wijmo/jquery.wijmo.wijcombobox.js" type="text/javascript"></script>
24        <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
25        <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
26        <script src="../../wijmo/jquery.wijmo.wijinputnumber.js" type="text/javascript"></script>
27        <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>
28
29        <style type="text/css">
30                .wijmo-wijgrid .wijmo-wijcombobox-wrapper
31                {
32                        float: none;
33                }
34        </style>
35
36        <script id="scriptInit" type="text/javascript">
37                $(document).ready(function () {
38                        var $element = $("#demo").wijgrid({
39                                allowEditing: true,
40                                allowKeyboardNavigation: true,
41                                allowColSizing: true,
42                                highlightCurrentCell: true,
43                                selectionMode: "none",
44                                afterCellEdit: afterCellEdit,
45                                afterCellUpdate: afterCellUpdate,
46                                beforeCellEdit: beforeCellEdit,
47                                beforeCellUpdate: beforeCellUpdate,
48
49                                data: [
50                                        { Player: "Player0", Position: "GK", Acquired: 2001 },
51                                        { Player: "Player1", Position: "RM", Acquired: 2004 },
52                                        { Player: "Player2", Position: "GK", Acquired: 2009 },
53                                        { Player: "Player3", Position: "AM", Acquired: 2008 },
54                                        { Player: "Player4", Position: "RW", Acquired: 2008 },
55                                        { Player: "Player5", Position: "CF", Acquired: 2007 }
56                                ]
57                        });
58
59                        $("#log").html(dump($element.wijgrid("data"))); 
60                });
61
62                var positions = [
63                        { label: "GK", value: "GK" },
64                        { label: "SW", value: "SW" },
65                        { label: "LB", value: "LB" },
66                        { label: "CB", value: "CB" },
67                        { label: "RB", value: "RB" },
68                        { label: "DM", value: "DM" },
69                        { label: "LM", value: "LM" },
70                        { label: "CM", value: "CM" },
71                        { label: "RM", value: "RM" },
72                        { label: "AM", value: "AM" },
73                        { label: "LW", value: "LW" },
74                        { label: "SS", value: "SS" },
75                        { label: "RW", value: "RW" },
76                        { label: "CF", value: "CF" }
77                ];
78
79                function beforeCellEdit(e, args) {
80                        switch (args.cell.column().dataKey) {
81                                case "Position":
82                                        $("<input />")
83                                                .val(args.cell.value())
84                                                .appendTo(args.cell.container().empty())
85                                                .wijcombobox({
86                                                        data: $.map($.extend(true, [], positions), function (item, index) {
87                                                                if (item.value === args.cell.value()) {
88                                                                        item.selected = true;
89                                                                }
90
91                                                                return item;
92                                                        }),
93                                                        isEditable: false
94                                                });
95
96                                        args.handled = true;
97
98                                        break;
99
100                                case "Acquired":
101                                        $("<input />")
102                                                .width("100%")
103                                                .appendTo(args.cell.container().empty())
104                                                .wijinputnumber({
105                                                        decimalPlaces: 0,
106                                                        showSpinner: true,
107                                                        value: args.cell.value()
108                                                })
109                                                .focus();
110
111                                        args.handled = true;
112
113                                        break;
114                        }
115                }
116
117                function beforeCellUpdate(e, args) {
118                        switch (args.cell.column().dataKey) {
119                                case "Position":
120                                        args.value = args.cell.container().find("input").val();
121                                        break;
122
123                                case "Acquired":
124                                        var $editor = args.cell.container().find("input"),
125                                                value = $editor.wijinputnumber("getValue"),
126                                                curYear = new Date().getFullYear();
127
128                                        if (value < 1990 || value > curYear) {
129                                                $editor.addClass("ui-state-error")
130
131                                                alert("value must be between 1990 and " + curYear);
132
133                                                $editor.focus();
134
135                                                return false;
136                                        }
137                                       
138                                        args.value = value;
139                                        break;
140                        }
141                }
142
143                function afterCellUpdate(e, args) {
144                        $("#log").html(dump($("#demo").wijgrid("data")));
145                }
146
147                function afterCellEdit(e, args) {
148                        switch (args.cell.column().dataKey) {
149                                case "Position":
150                                        args.cell.container().find("input").wijcombobox("destroy");
151                                        break;
152
153                                case "Acquired":
154                                        args.cell.container().find("input").wijinputnumber("destroy");
155                                        break;
156                        }
157                }
158
159                function dump(d2array) {
160                        var str = "<table class=\"ui-widget ui-widget-content\" rules=\"all\">" +
161                                "<caption class=\"ui-widget-header\">dump</caption>\n";
162
163                        for (var i = 0, rowLen = d2array.length; i < rowLen; i++) {
164                                var row = d2array[i];
165
166                                str += "<tr>";
167
168                                for (var key in row) {
169                                        if (row.hasOwnProperty(key)) {
170                                                str += "<td>" + row[key] + "</td>";
171                                        }
172                                }
173
174                                str += "</tr>\n";
175                        }
176
177                        return str + "</table>";
178                }
179        </script>
180</head>
181<body class="demo-single">
182        <div class="container">
183                <div class="header">
184                        <h2>
185                                Custom Editors</h2>
186                </div>
187                <div class="main demo">
188                        <!-- Begin demo markup -->
189                        <table id="demo"></table>
190                        <div id="log">log</div>
191                        <!-- End demo markup -->
192                        <div class="demo-options">
193                        <!-- Begin options markup -->
194                               
195                        <!-- End options markup -->
196                        </div>
197                </div>
198                <div class="footer demo-description">
199                        <p>
200                                This sample shows how to customize the editors using the following wijgrid events: <b>beforeCellEdit</b>,
201                                <b>beforeCellUpdate</b>, <b>afterCellUpdate</b> and <b>afterCellEdit</b>.
202                        </p>
203                </div>
204        </div>
205</body>
206</html>
Note: See TracBrowser for help on using the repository browser.