mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Merge commit 'fcbbaffce15ad99a8095616f55183ca39e0e16a7' as 'lib/jquery-bootgrid'
This commit is contained in:
laf
213
lib/jquery-bootgrid/demo/send.htm
Normal file
213
lib/jquery-bootgrid/demo/send.htm
Normal file
@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>jQuery Bootgrid Demo</title>
|
||||
<link href="css/bootstrap.css" rel="stylesheet" />
|
||||
<link href="../dist/jquery.bootgrid.css" rel="stylesheet" />
|
||||
<script src="js/modernizr-2.8.1.js"></script>
|
||||
<style>
|
||||
@-webkit-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@-moz-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@-o-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
@viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header" class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<span class="navbar-brand" data-i18n="title">jQuery Bootgrid</span>
|
||||
</div>
|
||||
<nav id="menu" class="navbar-collapse collapse" role="navigation">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Basic Demo</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 visible-md visible-lg">
|
||||
<div class="affix">
|
||||
Sub Nav
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<button id="send" type="button" class="btn btn-default">Send</button>
|
||||
<table id="grid" class="table table-condensed table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="id" data-identifier="true" data-type="numeric">Article ID</th>
|
||||
<th data-column-id="sender" data-order="asc">Article Name</th>
|
||||
<th data-column-id="quantity" data-formatter="quantity">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Article 1</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Article 2</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Article 3</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Article 4</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Article 5</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Article 6</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Article 7</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Article 8</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Article 9</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Article 10</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Article 11</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer id="footer">
|
||||
© Copyright 2014, Rafael Staib
|
||||
</footer>
|
||||
|
||||
<script src="../lib/jquery-1.11.1.min.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="../dist/jquery.bootgrid.js"></script>
|
||||
<script>
|
||||
$(function ()
|
||||
{
|
||||
var data = [];
|
||||
|
||||
var grid = $("#grid").bootgrid({
|
||||
pagination: 3,
|
||||
selection: true,
|
||||
multiSelect: true,
|
||||
formatters: {
|
||||
"quantity": function (column, row)
|
||||
{
|
||||
return "<input id=\"" + row.id + "-quantity\" type=\"text\" class=\"quantity\" value=\"" + row.quantity + "\" />";
|
||||
}
|
||||
}
|
||||
}).on("loaded.rs.jquery.bootgrid", function (e)
|
||||
{
|
||||
// Resets the selected data array on reload, searching, sorting or changing page
|
||||
data = [];
|
||||
|
||||
grid.on("keyup", "input.quantity", function ()
|
||||
{
|
||||
e.stopPropagation();
|
||||
|
||||
// Array.first is an extension of bootgrid
|
||||
var $this = $(this),
|
||||
rowId = +$this.attr("id").split("-")[0], // "+" to convert the a string to an integer
|
||||
item = data.first(function (item) { return item.id === rowId; });
|
||||
if (item != null)
|
||||
{
|
||||
item.quantity = $this.val();
|
||||
}
|
||||
});
|
||||
}).on("selected.rs.jquery.bootgrid", function (e, selectedRows)
|
||||
{
|
||||
var row, quantity;
|
||||
for (var i = 0; i < selectedRows.length; i++)
|
||||
{
|
||||
row = selectedRows[i];
|
||||
|
||||
// Array.contains is an extension of bootgrid
|
||||
if (!data.contains(function (item) { return item.id === row.id; }))
|
||||
{
|
||||
quantity = grid.find("#" + row.id + "-quantity").val();
|
||||
data.push({ id: row.id, quantity: quantity || 0 });
|
||||
}
|
||||
}
|
||||
}).on("deselected.rs.jquery.bootgrid", function (e, deselectedRows)
|
||||
{
|
||||
var row;
|
||||
for (var i = 0; i < deselectedRows.length; i++)
|
||||
{
|
||||
row = deselectedRows[i];
|
||||
for (var j = 0; j < data.length; j++)
|
||||
{
|
||||
if (data[j].id === row.id)
|
||||
{
|
||||
data.splice(j, 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#send").on("click", function ()
|
||||
{
|
||||
var params = $.param({ "": data });
|
||||
alert(decodeURIComponent(params));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user