index.html (Flexigrid)


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flexigrid</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="../css/flexigrid.pack.css" />
<script type="text/javascript"
src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="flexigrid.pack.js"></script>
</head>


<table class="flexme3" style="display: none"></table>

<script type="text/javascript">
jQuery().ready(function (){

$(function() {
$(".flexme3").flexigrid(
{
url: 'scripts/agenzie_json.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'IDagenzie', width : 40, sortable : false, align: 'left'},
{display: 'Denominazione', name : 'agenzia', width : 300, sortable : true, align: 'left'},
{display: 'Comune', name : 'agenzia_comune', width : 180, sortable : true, align: 'left'},
{display: 'Telefono', name : 'agenzia_telefono', width : 120, sortable : false, align: 'left'}
],
buttons : [
{name: 'Edit', bclass: 'edit', onpress : doCommand},
{name: 'Delete', bclass: 'delete', onpress : doCommand},
{separator: true}
],
searchitems : [
{display: 'Denominazione', name : 'agenzia', isdefault: true},
{display: 'Comune', name : 'agenzia_comune'}
],
sortname: "agenzia",
sortorder: "asc",
usepager: true,
title: "Agenzie esterne",
useRp: true,
rp: 10,
showTableToggleBtn: false,
resizable: false,
width: 700,
height: 370,
singleSelect: true
}
);
});

function doCommand(com, grid) {
if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Edit row " + id);
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Delete row " + id);
});
}
}

});
</script>