source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/demo-apps/knockout-grid/index.html @ 609

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

images
File size: 6.3 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Knockout Grid</title>
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="viewport" content="width=960">
8    <!-- jQuery -->
9    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
10    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
11    <!-- Wijmo CSS and script -->
12    <link type="text/css" href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
13    <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.0.min.css" rel="stylesheet" />
14    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.2.0.min.js"></script>
15    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.0.min.js"></script>
16    <!-- KnockoutJS for MVVM-->
17    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.1.0.js"></script>
18    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
19
20    <script type="text/javascript">
21        //Class constructor for grid row. Returns observable properties.
22        var product = function (data) {
23            return {
24                ProductID: ko.observable(data.ProductID),
25                ProductName: ko.observable(data.ProductName),
26                UnitPrice: ko.observable(data.UnitPrice),
27                UnitsInStock: ko.observable(data.UnitsInStock)
28            };
29        };
30
31        //Create ViewModel
32        var viewModel = {
33            pageSize: ko.observable(10),
34            pageIndex: ko.observable(0),
35            sortCommand: ko.observable("ProductID asc"),
36            dataRows: ko.observableArray([]),
37            totalRows: ko.observable(0),
38            sorted: function (e, data) {
39                viewModel.sortCommand(data.sortCommand);
40            },
41            paged: function (e, data) {
42                viewModel.pageIndex(data.newPageIndex);
43            },
44            load: function () {
45                $.ajax({
46                    url: "http://services.odata.org/Northwind/Northwind.svc/Products",
47                    dataType: "jsonp",
48                    jsonp: "$callback",
49                    data: {
50                        $format: "json",
51                        $inlinecount: "allpages",
52                        $select: "ProductID,ProductName,UnitPrice,UnitsInStock",
53                        $orderby: viewModel.sortCommand(),
54                        $top: viewModel.pageSize(),
55                        $skip: viewModel.pageIndex() * viewModel.pageSize(),
56                        "paging[pageIndex]": viewModel.pageIndex(),
57                        "paging[pageSize]": viewModel.pageSize()
58                    },
59                    success: function (result) {
60                        var data = result.d.results;
61                        var arr = [];
62
63                        $.each(data, function (i) {
64                            arr.push(new product(data[i]));
65                        });
66                        viewModel.totalRows(result.d.__count);
67                        viewModel.dataRows(arr);
68                    }
69                });
70            }
71
72        };
73
74        //Bind ViewModel and Event Handlers
75        $(document).ready(function () {
76            ko.applyBindings(viewModel);
77            viewModel.load();
78            viewModel.sortCommand.subscribe(function (newValue) {
79                viewModel.load();
80            });
81            viewModel.pageIndex.subscribe(function (newValue) {
82                viewModel.load();
83            });
84            viewModel.pageSize.subscribe(function (newValue) {
85                viewModel.load();
86                $(":wijmo-wijdropdown").wijdropdown("refresh");
87            });
88        });
89    </script>
90    <style type="text/css">
91        body
92        {
93            font-family: "Segoe UI Light", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
94            font-size: 14px;
95            background: #000;
96        }
97
98        h1
99        {
100            font-size: 2.4em;
101            color: #fff;
102            padding: 20px 0 0 6px;
103            margin: 0;
104        }
105
106        .container
107        {
108            margin: 0 auto;
109            width: 960px;
110        }
111
112        .app
113        {
114            overflow: hidden;
115            background: #fff;
116            padding: 20px;
117            box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.5);
118        }
119
120        .toolbar
121        {
122            text-align: right;
123        }
124
125        #dataGrid
126        {
127            width: 100%;
128        }
129    </style>
130</head>
131<body>
132    <div class="container">
133        <h1>Knockout Grid</h1>
134        <div class="app">
135            <div>
136                <div class="toolbar">
137                    <label>Display: </label>
138                    <select data-bind="value: pageSize, wijdropdown: {}">
139                        <option value="5">5</option>
140                        <option value="10" selected="selected">10</option>
141                        <option value="20">20</option>
142                    </select>
143                </div>
144                <table id="dataGrid" data-bind="
145            wijgrid: {
146                data: dataRows,
147                pageSize: pageSize,
148                pageIndex: pageIndex,
149                totalRows: totalRows,
150                allowPaging: true,
151                allowSorting: true,
152                sorted: sorted,
153                pageIndexChanged: paged,
154                columns: [
155                    { sortDirection: 'ascending', dataType: 'number', dataFormatString: 'n0', headerText: 'ID', width: 60 },
156                    { headerText: 'Product' },
157                    { dataType: 'currency', headerText: 'Price', width: 100},
158                    { dataType: 'number', dataFormatString: 'n0', headerText: 'Units', width: 100}]
159            }">
160                </table>
161            </div>
162            <p>
163                Made with <a href="http://knockoutjs.com">KnockoutJS</a>, <a href="http://wijmo.com">Wijmo</a> and <a href="http://www.odata.org">OData</a>
164            </p>
165        </div>
166    </div>
167</body>
168</html>
Note: See TracBrowser for help on using the repository browser.