97 lines
3.4 KiB
HTML
97 lines
3.4 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
|
|
<head>
|
|
<title>jQuery GridIron test</title>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
<link rel="stylesheet" href="jquery.gridiron.css" type="text/css" />
|
|
<link type="text/css" rel="stylesheet" href="jquery.ui.core.css" />
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
|
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
|
|
<script type="text/javascript" src="jquery.gridiron.js"></script>
|
|
<script type="text/javascript">//<![CDATA[
|
|
|
|
$(document).ready(function() {
|
|
var countryFormatter = function(columnIndex, column, value, data) {
|
|
return $("<a/>")
|
|
.attr("title", "population: " + data.countryPopulation)
|
|
.attr("href", "http://en.wikipedia.org/wiki/" + value)
|
|
.text(value);
|
|
}
|
|
|
|
var settings = {
|
|
columns: [
|
|
{ displayText: "City", name: "city", width: 150, sortable: true },
|
|
{ displayText: "Country", name: "country", width: 150, sortable: true, formatter: countryFormatter },
|
|
{ displayText: "Region", name: "region", width: 150, sortable: true },
|
|
{ displayText: "Latitude", name: "latitude", width: 75, sortable: true },
|
|
{ displayText: "Longitude", name: "longitude", width: 75 }
|
|
],
|
|
rowsPerPage: 50,
|
|
enableOverlay: true,
|
|
height: 350,
|
|
highlight: "row",
|
|
select: "row"
|
|
};
|
|
|
|
var settings1 = $.extend({}, settings, {
|
|
virtualScrolling: true,
|
|
ajax: {
|
|
enabled: true,
|
|
url: "citiestojson.php"
|
|
},
|
|
title: "Cities around the world",
|
|
showSearchBar: true
|
|
});
|
|
|
|
var settings2 = $.extend({}, settings, { title: "Selected cities" });
|
|
|
|
var $grid1 = $("#grid1").gridIron(settings1);
|
|
var $grid2 = $("#grid2").gridIron(settings2);
|
|
|
|
$grid1.bind("search", function(e, searchQuery) {
|
|
$grid1.gridIronApi.ajax.sendAndResetFromCurrentOffset();
|
|
});
|
|
|
|
$("#picklist-add").click(function() {
|
|
$.each($grid1.gridIronApi.getSelectedRows(), function(i, row) {
|
|
$grid2.gridIronApi.insertRow(row.data, row.rowId);
|
|
$grid1.gridIronApi.findRowById(row.rowId).deselect().disable();
|
|
});
|
|
});
|
|
|
|
$("#picklist-remove").click(function() {
|
|
$.each($grid2.gridIronApi.getSelectedRows(), function(i, row) {
|
|
$grid2.gridIronApi.deleteRowById(row.rowId);
|
|
|
|
//cannot use findRowById() because the rows could have been wiped out if a search occurred
|
|
var foundRows = $grid1.gridIronApi.findRows(function(r) {
|
|
return r.data.city === row.data.city && r.data.latitude === row.data.latitude && r.data.longitude === row.data.longitude;
|
|
});
|
|
|
|
if (foundRows.length) {
|
|
$.each(foundRows, function(i, r) { r.enable(); });
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#themeswitcher").themeswitcher({ loadTheme: "South Street" });
|
|
});
|
|
|
|
//]]></script>
|
|
</head>
|
|
<body>
|
|
<div id="themeswitcher" style="margin-bottom: 20px"></div>
|
|
|
|
<div id="grid1" style="float: left"></div>
|
|
|
|
<div style="width: 50px; margin: 130px 20px 0 20px; float: left">
|
|
<input type="button" id="picklist-add" value="→"/><br />
|
|
<input type="button" id="picklist-remove" value="←"/>
|
|
</div>
|
|
|
|
<div id="grid2" style="float: left"></div>
|
|
|
|
</body>
|
|
</html> |