Skip to content

Commit 4ae3f16

Browse files
rstaibrstaib
committed
Added send demo and decoupled rendering from initialization
1 parent f91d9aa commit 4ae3f16

File tree

6 files changed

+220
-5
lines changed

6 files changed

+220
-5
lines changed

‎build/jQuery.Bootgrid.1.0.0-rc2.nupkg‎

52 Bytes
Binary file not shown.

‎build/jquery.bootgrid-1.0.0-rc2.zip‎

41 Bytes
Binary file not shown.

‎build/jquery.bootgrid.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* jQuery Bootgrid v1.0.0-rc2 - 08/11/2014
2+
* jQuery Bootgrid v1.0.0-rc2 - 08/14/2014
33
* Copyright (c) 2014 Rafael Staib (http://www.jquery-bootgrid.com)
44
* Licensed under MIT http://www.opensource.org/licenses/MIT
55
*/
@@ -221,7 +221,8 @@
221221
rows = rows.page(this.current, this.rowCount);
222222
}
223223

224-
update(rows, total);
224+
// todo: comment why timeout is needed here (event loaded)
225+
window.setTimeout(function () { update(rows, total); }, 10);
225226
}
226227
}
227228

‎build/jquery.bootgrid.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/send.htm‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>jQuery Bootgrid Demo</title>
7+
<link href="css/bootstrap.css" rel="stylesheet" />
8+
<link href="../build/jquery.bootgrid.css" rel="stylesheet" />
9+
<script src="js/modernizr-2.8.1.js"></script>
10+
<style>
11+
@-webkit-viewport {
12+
width: device-width;
13+
}
14+
15+
@-moz-viewport {
16+
width: device-width;
17+
}
18+
19+
@-ms-viewport {
20+
width: device-width;
21+
}
22+
23+
@-o-viewport {
24+
width: device-width;
25+
}
26+
27+
@viewport {
28+
width: device-width;
29+
}
30+
31+
body {
32+
padding-top: 70px;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<header id="header" class="navbar navbar-default navbar-fixed-top">
38+
<div class="container-fluid">
39+
<div class="navbar-header">
40+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
41+
<span class="icon-bar"></span>
42+
<span class="icon-bar"></span>
43+
<span class="icon-bar"></span>
44+
</button>
45+
<span class="navbar-brand" data-i18n="title">jQuery Bootgrid</span>
46+
</div>
47+
<nav id="menu" class="navbar-collapse collapse" role="navigation">
48+
<ul class="nav navbar-nav navbar-right">
49+
<li><a href="#">Basic Demo</a></li>
50+
</ul>
51+
</nav>
52+
</div>
53+
</header>
54+
55+
<div class="container-fluid">
56+
<div class="row">
57+
<div class="col-md-3 visible-md visible-lg">
58+
<div class="affix">
59+
Sub Nav
60+
</div>
61+
</div>
62+
<div class="col-md-9">
63+
<button id="send" type="button" class="btn btn-default">Send</button>
64+
<table id="grid" class="table table-condensed table-hover table-striped">
65+
<thead>
66+
<tr>
67+
<th data-column-id="id" data-identifier="true" data-type="numeric">Article ID</th>
68+
<th data-column-id="sender" data-order="asc">Article Name</th>
69+
<th data-column-id="quantity" data-formatter="quantity">Quantity</th>
70+
</tr>
71+
</thead>
72+
<tbody>
73+
<tr>
74+
<td>1</td>
75+
<td>Article 1</td>
76+
<td>0</td>
77+
</tr>
78+
<tr>
79+
<td>2</td>
80+
<td>Article 2</td>
81+
<td>0</td>
82+
</tr>
83+
<tr>
84+
<td>3</td>
85+
<td>Article 3</td>
86+
<td>0</td>
87+
</tr>
88+
<tr>
89+
<td>4</td>
90+
<td>Article 4</td>
91+
<td>0</td>
92+
</tr>
93+
<tr>
94+
<td>5</td>
95+
<td>Article 5</td>
96+
<td>0</td>
97+
</tr>
98+
<tr>
99+
<td>6</td>
100+
<td>Article 6</td>
101+
<td>0</td>
102+
</tr>
103+
<tr>
104+
<td>7</td>
105+
<td>Article 7</td>
106+
<td>0</td>
107+
</tr>
108+
<tr>
109+
<td>8</td>
110+
<td>Article 8</td>
111+
<td>0</td>
112+
</tr>
113+
<tr>
114+
<td>9</td>
115+
<td>Article 9</td>
116+
<td>0</td>
117+
</tr>
118+
<tr>
119+
<td>10</td>
120+
<td>Article 10</td>
121+
<td>0</td>
122+
</tr>
123+
<tr>
124+
<td>11</td>
125+
<td>Article 11</td>
126+
<td>0</td>
127+
</tr>
128+
</tbody>
129+
</table>
130+
</div>
131+
</div>
132+
</div>
133+
134+
<footer id="footer">
135+
© Copyright 2014, Rafael Staib
136+
</footer>
137+
138+
<script src="../lib/jquery-1.11.1.min.js"></script>
139+
<script src="js/bootstrap.js"></script>
140+
<script src="../build/jquery.bootgrid.js"></script>
141+
<script>
142+
$(function ()
143+
{
144+
var data = [];
145+
146+
var grid = $("#grid").bootgrid({
147+
pagination: 3,
148+
selection: true,
149+
multiSelect: true,
150+
formatters: {
151+
"quantity": function (column, row)
152+
{
153+
return "<input id=\"" + row.id + "-quantity\" type=\"text\" class=\"quantity\" value=\"" + row.quantity + "\" />";
154+
}
155+
}
156+
}).on("loaded.rs.jquery.bootgrid", function (e)
157+
{
158+
// Resets the selected data array on reload, searching, sorting or changing page
159+
data = [];
160+
161+
grid.on("keyup", "input.quantity", function ()
162+
{
163+
e.stopPropagation();
164+
165+
// Array.first is an extension of bootgrid
166+
var $this = $(this),
167+
rowId = +$this.attr("id").split("-")[0], // "+" to convert the a string to an integer
168+
item = data.first(function (item) { return item.id === rowId; });
169+
if (item != null)
170+
{
171+
item.quantity = $this.val();
172+
}
173+
});
174+
}).on("selected.rs.jquery.bootgrid", function (e, selectedRows)
175+
{
176+
var row, quantity;
177+
for (var i = 0; i < selectedRows.length; i++)
178+
{
179+
row = selectedRows[i];
180+
181+
// Array.contains is an extension of bootgrid
182+
if (!data.contains(function (item) { return item.id === row.id; }))
183+
{
184+
quantity = grid.find("#" + row.id + "-quantity").val();
185+
data.push({ id: row.id, quantity: quantity || 0 });
186+
}
187+
}
188+
}).on("deselected.rs.jquery.bootgrid", function (e, deselectedRows)
189+
{
190+
var row;
191+
for (var i = 0; i < deselectedRows.length; i++)
192+
{
193+
row = deselectedRows[i];
194+
for (var j = 0; j < data.length; j++)
195+
{
196+
if (data[j].id === row.id)
197+
{
198+
data.splice(j, 1);
199+
return;
200+
}
201+
}
202+
}
203+
});
204+
205+
$("#send").on("click", function ()
206+
{
207+
var params = $.param({ "": data });
208+
alert(decodeURIComponent(params));
209+
});
210+
});
211+
</script>
212+
</body>
213+
</html>

‎src/internal.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,8 @@ function loadData()
211211
rows = rows.page(this.current, this.rowCount);
212212
}
213213

214-
update(rows, total);
214+
// todo: comment why timeout is needed here (event loaded)
215+
window.setTimeout(function () { update(rows, total); }, 10);
215216
}
216217
}
217218

0 commit comments

Comments
 (0)