Datagrid widget Twitter Bootstrap
Salut,
Pour un projet en cours de développement, j'utilise Twitter Bootstrap. Je souhaite intégré ce widget Datagrid. Pour son intégration sur ce lien avec requirejs que je maitrise et qui me pose tous les problèmes, ca se passe ainsi :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX</title>
<link href="css/fuelux.css" rel="stylesheet">
<script src="js/require.js"></script>
<script>
requirejs.config({ baseUrl: 'vendor', paths: { 'sample': '../sample' } });
</script>
<script>
require(['jquery', 'sample/data', 'sample/datasource', 'fuelux/all'], function ($, sampleData, StaticDataSource) {
$(function () {
// INITIALIZING THE DATAGRID
var dataSource = new StaticDataSource({
columns: [{
property: 'toponymName',
label: 'Name',
sortable: true
}, {
property: 'countrycode',
label: 'Country',
sortable: true
}, {
property: 'population',
label: 'Population',
sortable: true
}, {
property: 'fcodeName',
label: 'Type',
sortable: true
}],
data: sampleData.geonames,
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource
});
});
});
</script>
</head>
<body>
<table id="MyGrid" class="table table-bordered datagrid">
<thead>
<tr>
<th>
<span class="datagrid-header-title">Geographic Data Sample</span>
<div class="datagrid-header-left">
</div>
<div class="datagrid-header-right">
<div class="input-append search">
<input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
</div>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="datagrid-footer-left" style="display:none;">
<div class="grid-controls">
<span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
<select class="grid-pagesize"><option>10</option><option>20</option><option>50</option><option>100</option></select>
<span>Per Page</span>
</div>
</div>
<div class="datagrid-footer-right" style="display:none;">
<div class="grid-pager">
<button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
<span>Page</span>
<div class="input-append dropdown combobox">
<input class="span1" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
<ul class="dropdown-menu"></ul>
</div>
<span>of <span class="grid-pages"></span></span>
<button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
</html> |
Pour la même cause, moi non connaisseur de requirejs j'ai fais ceci
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| <!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX</title>
<link href="css/fuelux.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/datagrid.js"></script>
<script src="js/data.js"></script>
<script src="js/datasource.js"></script>
<script>
var dataSource = new StaticDataSource({
columns: [{
property: 'toponymName',
label: 'Name',
sortable: true
}, {
property: 'countrycode',
label: 'Country',
sortable: true
}, {
property: 'population',
label: 'Population',
sortable: true
}, {
property: 'fcodeName',
label: 'Type',
sortable: true
}],
data: sampleData.geonames,
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource
});
</script>
</head>
<body>
<table id="MyGrid" class="table table-bordered datagrid">
<thead>
<tr>
<th>
<span class="datagrid-header-title">Geographic Data Sample</span>
<div class="datagrid-header-left">
</div>
<div class="datagrid-header-right">
<div class="input-append search">
<input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
</div>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="datagrid-footer-left" style="display:none;">
<div class="grid-controls">
<span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
<select class="grid-pagesize"><option>10</option><option>20</option><option>50</option><option>100</option></select>
<span>Per Page</span>
</div>
</div>
<div class="datagrid-footer-right" style="display:none;">
<div class="grid-pager">
<button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
<span>Page</span>
<div class="input-append dropdown combobox">
<input class="span1" type="text"><button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
<ul class="dropdown-menu"></ul>
</div>
<span>of <span class="grid-pages"></span></span>
<button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
</html> |
Pourquoi mon code ne marche pas ?
Merci d'avance...
