<Construir uma Gridview ⁄ >

  ({"informacoes":
    [
      {
        "field": "field_61_1",
        "value": "61"
      },
      {
        "field": "field_61_2",
        "value": "Nome de Teste 1"
      },
      {
        "field": "field_61_3",
        "value": "Empresa de Teste 1"
      },
      {
        "field": "field_61_4",
        "value": "Morada da Empresa de Teste 1"
      },
      {
        "field": "field_61_5",
        "value": "1000-001"
      },
      {
        "field": "field_61_6",
        "value": "Localidade da Empresa 1"
      },
      {
        "field": "field_61_7",
        "value": "216464645"
      }
    ]
  });

/****** <layout> ******/
body{
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 8pt;color: #000000;margin: 2px;
    padding: 0;background: #6E726C;text-align: center;
}
div.container{
    position: relative;clear: both;width: auto;height: auto;
    margin: 0px;padding: 1px;background: #ffffff;color: #000000;
    text-align: left;border: 1px solid #004080;
}
div.content{position: static;overflow: auto;width: auto;}
div.loading{
    border: 1px solid #FF6600; width: auto;
    text-align:center; display:none;z-index: 100;
    background: #0080C0; color: #000;
    position:absolute; top:50%; left:50%;
    margin: -25px auto auto -50px; padding: 2px;
}
/****** <layout /> ******/
 
/****** <tabela> ******/
td.header{background-color: #004080;color:#ffffff;font-weight:bold;text-align:center;}
td.footer{background-color: #0080C0;color:#ffffff;font-weight:normal;text-align:center;}
td.cell{background-color: #C3C3C3;color:#000;}
td.alternate_cell{background-color: #E1E1E1;color:#000;}
table.main_tbl{border: solid 1px #004080; padding: 1px; border-spacing: 1px; width:100%;}
/****** <tabela /> ******/
 
/****** <input> ******/
select, textarea, input{
  background-color: #FFCC66;color: #000000;font-size: 8pt;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  border: 1px solid #004080;padding-left: 1px;
}
select:hover, textarea:hover, input:hover{background-color: #FFCC99;color: #000;border-color:#0080C0;}
select:focus, textarea:focus, input:focus{background-color: #0080C0;color: #fff;border-color:#fff;}
/****** <input /> ******/
 
/****** <paginacao> ******/
.pages{padding: 0;margin: auto auto auto 12px;}
.pages a, .pages span{
    display: block;margin: 1px; width:16px; height: 13px; float: left;
    padding: 0.2em 0.5em;border: 1px solid #666;background: #fff;
}
.pages span.current{background: #FF7F55;color: #fff;}
.pages a{text-decoration: none;}
.pages a:hover{background: #FF6600;color: #fff;}
.pages a.current{background: #FF7F55;color: #fff;}
.pages a.current:hover{color: #FFFF99;}
/****** <paginacao /> ******/
 
/****** <misc> ******/
a{color: #FF5500;text-decoration: underline;}
a:hover{color: #0080D5;text-decoration: none;}
img{border: none;}
/****** <misc /> ******/

<?php
//definições de ligação à bd
define("DB_SERVER","servername");
define("DB_USERNAME","username");
define("DB_PASSWORD","password");
define("DB_NAME","database");
define("TBL_DADOS","table");
 
//paginação
define("PER_PAGE","20");
define("LNG_PAGINACAO_PAGINA","Página");
define("LNG_PAGINACAO_DE","de");
define("LNG_PAGINACAO_SELECIONADA","(selecionada)");
 
//gridview
define("GRIDVIEW_NAME","gridview_demo");
define("GRIDVIEW_CLASS_TABLE","main_tbl");
define("GRIDVIEW_CLASS_HEADER","header");
define("GRIDVIEW_CLASS_FOOTER","footer");
define("GRIDVIEW_CLASS_CELL","cell");
define("GRIDVIEW_CLASS_ALTERNATE_CELL","alternate_cell");
 
/**
 * Campos da tabela
 *
 * @return Array
 */
function __GetArrayFields(){
 
  //formato:
  // "campo_base_dados"=>"Descrição do campo da base de dados"
 
  return array(
  "pk_cliente"=>"ID","nome"=>"Nome","empresa"=>"Empresa","morada"=>"Morada",
  "cod_postal"=>"Código Postal","localidade"=>"Localidade","telefone"=>"Telefone"
  );
}
?>

<?php
include_once("settings.inc");
 
/**
 * Construir Tabela
 *
 * @param String $name
 * @param String $tblClass
 * @param String $tdHeaderClass
 * @param String $tdCellClass
 * @param String $tdAlternateCellClass
 * @return String
 */
function DoGridView($page,$name,$tblClass="",$tdHeaderClass="",$tdCellClass="",$tdAlternateCellClass=""){
  $const=get_defined_constants();
  if(!$page || $page<0 || !is_numeric($page)) $page=0; else $page--;
 
  $tdAlternateCellClass=($tdAlternateCellClass)?$tdAlternateCellClass:$tdCellClass;
 
  $db=connectDB();
  $iSQLFields=GenerateISqlFields();
  $beginAt=$page*$const['PER_PAGE'];
  $sql=mysql_query("
    Select $iSQLFields 
    From `{$const['TBL_DADOS']}`
    Limit $beginAt,{$const['PER_PAGE']}
  ");
  $arrContent=array();
  //guardar todo o conteúdo num array
  while($myrow=mysql_fetch_assoc($sql)){
    array_push($arrContent,$myrow);
  }
  mysql_close($db);
  $count=sizeof($arrContent);
 
  //construir cabeçalho
  $arrHeader=$arrContent[0];
  $colspan=sizeof($arrHeader)+1;
  $i=0;
  $headerCell=DoTableCell("td_header_{$name}_0","&nbsp;",$tdHeaderClass);
  foreach ($arrHeader as $key=>$value){
    $i++;
    $headerCell.=DoTableCell("td_header_{$name}_$i",$key,$tdHeaderClass);
  }
  $rows=$headerCell;
  //
 
  for($i=0;$i<$count;$i++){
    $auxArr=$arrContent[$i];
    $id_cell=0;
    $class=($i%2==0)?$tdCellClass:$tdAlternateCellClass;
 
    foreach ($auxArr as $value){
      if($id_cell==0){ //1ª iteração, opção para editar
        $record_id=$value;
        $auxIdRow="{$name}_{$record_id}";
        $linkEdit=DoCustomHref("#","GridView.jxEditCell('$record_id','$auxIdRow')","Editar"); //link para editar
 
        $cell=DoTableCell("td_{$name}_{$record_id}_0",$linkEdit,$class); //criar célula para editar
      }
 
      //conteúdo das células
      $id_cell++;
      $content=($value)?$value:"&nbsp;";
 
      $cell.=DoTableCell("td_{$name}_{$record_id}_{$id_cell}",$content,$class); //criar a céluca
      //
    }
 
    $rows.=DoTableRow("tr_{$name}_$record_id",$cell); //criar a linha
  }
 
  $rows.=DoPaginationBar($page,$colspan);
 
  return DoTable($rows,$name,$tblClass); //construir e retornar a gridview
}
 
/**
 * Construir Tabela
 *
 * @param String $rows
 * @param String $id
 * @param String $tblClass
 * @return String
 */
function DoTable($rows,$id,$tblClass){
  if($tblClass) $tblClass="class=\"$tblClass\"";
  return "
    <table $tblClass name='$id' id='$id'>
      $rows
    </table>
  ";
}
 
/**
 * Construir célula
 *
 * @param String $id
 * @param String $content
 * @param String $class
 * @return String
 */
function DoTableCell($id, $content, $class="",$colspan=""){
  if($class) $class=" class=\"$class\" ";
  if($colspan) $colspan=" colspan=\"$colspan\" ";
  if(!$content) $content="&nbsp;";
  return "<td $class name=\"$id\" id=\"$id\" $colspan>$content</td>";
}
 
/**
 * Construir linha
 *
 * @param String $id
 * @param String $td
 * @param String $class
 * @return String
 */
function DoTableRow($id,$td,$class=""){
  if($class) $class=" class=\"$class\" ";
  return "<tr $class name=\"$id\" id=\"$id\">$td<tr>";
}
 
/**
 * Construir href
 *
 * @param String $onclick
 * @param String $text
 * @param String $class
 * @return String
 */
function DoCustomHref($link,$onclick,$text,$tooltip="",$class=""){
  if($class) $class=" class=\"$class\" ";
  if(!$tooltip) $tooltip=$text;
  return "<a href='$link' onclick=\"$onclick\" title=\"$tooltip\" $class>$text</a>";
}
 
/**
 * Obter valores da tabela e devolver no formato JSON
 *
 * @param int $id
 * @return String
 */
function JSONGetRowValues($id){
  $iSQLFields=GenerateISqlFields();
  $arrFields=__GetArrayFields();
  $count=sizeof($arrFields);
  $key=key($arrFields);
  $const=get_defined_constants();
 
  $db=connectDB();
  $sql=mysql_query("
    Select $iSQLFields
    From `{$const['TBL_DADOS']}`
    Where `$key`=\"$id\"
  ");
  $myrow=mysql_fetch_array($sql);
 
  $i=0;
  foreach ($arrFields as $key=>$value){
    $i++;
    $field="field_{$id}_{$i}";
    $value=utf8_encode($myrow["$value"]);
    $json.="
      {
        \"field\": \"$field\",
        \"value\": \"$value\"
      },";
  }
  $json=left($json,strlen($json)-1);
  $json="
  ({\"informacoes\":
    [$json
    ]
  });
  ";
  mysql_close($db);
  return $json;
 
}
 
/**
 * Guardar valores na tabela
 *
 * @param Array $arrValues
 * @return String
 */
function SaveRecord($arrValues){
  $arrFields=__GetArrayFields();
  $const=get_defined_constants();
  $i=0;
 
  foreach ($arrFields as $key=>$value){
    if(!$fldPK){
      $fldPK="`$key`";
      $fldPKValue="\"".mysql_escape_string($arrValues[0])."\"";
    }
    else{
      $str.="`$key`=\"".mysql_escape_string($arrValues[$i])."\",";
    }
    $i++;
  }
  $str=left($str,strlen($str)-1);
  $iSQL="Update {$const['TBL_DADOS']} set $str where $fldPK=$fldPKValue";
 
  $db=connectDB();
  $str=(mysql_query($iSQL))?"success":"error";
  mysql_close($db);
 
  return $str;
}
 
/**
 * Ligação à bd
 *
 * @return
 */
function connectDB(){
  $db = mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD);
  mysql_select_db(DB_NAME,$db) or die("<b><br/>Impossivel aceder á base de dados.</b><br/>");
  return $db;
}
 
/**
 * Gerar parte da instrução sql respeitante
 * aos campos
 *
 * @return String
 */
function GenerateISqlFields(){
  $arrFields=__GetArrayFields();
  foreach ($arrFields as $key=>$value){
    $iSQLFields.="`$key` as `$value`,";
  }
  return left($iSQLFields,strlen($iSQLFields)-1);
}
 
function DoPaginationBar($page,$colspan){
  $db=connectDB();
  $const=get_defined_constants();
 
  $iSQL="Select count(*) From `{$const['TBL_DADOS']}`";
  $sql=mysql_query($iSQL);
  $myrow=mysql_fetch_array($sql);
  $numRegs=$myrow[0];
  if ($numRegs>$const['PER_PAGE']){ //caso o número de registos seja > perPage, constrói a barra, c.c., não
    $regSplit=$numRegs/$const['PER_PAGE'];
    if($numRegs%$const['PER_PAGE']>0) $regSplit++;
 
    $numPagesTotal=intval($regSplit);
    $barraPaginacao="<div class='pages'>";
 
    for ($i=1;$i<=$regSplit;$i++){
      $title="{$const['LNG_PAGINACAO_PAGINA']} $i {$const['LNG_PAGINACAO_DE']} $numPagesTotal";
      if ($i==$page+1){
        $title.="&nbsp;{$const['LNG_PAGINACAO_SELECIONADA']}";
        $barraPaginacao.=DoCustomHref("#","GridView.jxGotoPage('$i')",$i,$title,"current");
      }
      else{
        $barraPaginacao.=DoCustomHref("#","GridView.jxGotoPage('$i')",$i,$title);
      }
    }
    $barraPaginacao.="</div>";
  }
  mysql_close($db);
  return DoTableRow("",DoTableCell("pagination",$barraPaginacao,"footer",$colspan));
}
 
 
function left ($str, $howManyCharsFromLeft){return substr ($str, 0, $howManyCharsFromLeft);}
?>

var http_request = false;
 
/**
* Class responsável pelo "manuseamento" da GridView
*
*/
function GridView(){}
/**
* Editar cell
* Método estático class GridView
*
* @param int id -> id do registo
* @param String row -> linha da tabela que vai ser editada
*/
GridView.jxEditCell = function(id,row){
  Misc.MsgLoading("loading");
  url = Misc.AntiCacheRand(Misc.ServerFile+"?accao=get_values&id="+id);
  Misc.createHttpRequest();
 
  http_request.onreadystatechange = function() {
    var state=http_request.readyState;
 
    if(state==4){//completo
      if (http_request.status == 200){ //pedido respondido com sucesso
        var result=http_request.responseText;
        var json = eval(result); //"passar" a informação para json
        var count=json.informacoes.length
        var td, field, value;
 
        td=document.getElementById("td_"+row+"_0");
 
        var html=new HTMLControl("link_"+id);
        td.innerHTML=html.DoHref("Actualizar","GridView.jxUpdateData('"+json.informacoes[0].value+"','"+row+"')");
        for (var i=0;i<count;i++){ //preencher os campos
          field=json.informacoes[i].field;
          value=json.informacoes[i].value;
          td=document.getElementById("td_"+row+"_"+(i+1));
 
          var html=new HTMLControl(field);
          td.innerHTML=html.DoTextField(value); //conteúdo da cell
        }
        Misc.MsgLoading("loading");
      }
    }
  };
  http_request.open("GET", url, true);
  http_request.send(null);
}
 
/**
* Actualizar valores
* Método estático class GridView
*
* @param int id -> id do registo
* @param String row -> linha da tabela que vai ser actualizada
*/
GridView.jxUpdateData = function(id,row){
  Misc.MsgLoading("loading");
  var tr=document.getElementById("tr_"+row);
  var count=tr.cells.length;
  var params="", field, value;
  var arrValues=Array();
 
  for (var i=1;i<count;i++){
    field="field_"+id+"_"+i;
    value=document.getElementById(field).value;
    params+=field+"="+escape(value)+"&";
    arrValues[(i-1)]=value;
  }
  params+="accao=set_values";
 
  Misc.createHttpRequest();
  http_request.onreadystatechange = function() {
    var state=http_request.readyState;
 
    if(state==4){//completo
      if (http_request.status == 200){ //pedido respondido com sucesso
        var result=http_request.responseText;
        var td;
 
        if(result=="success"){
          td=document.getElementById("td_"+row+"_0");
          var html=new HTMLControl("link_"+i);
 
          td.innerHTML=html.DoHref("Editar","GridView.jxEditCell('"+id+"','"+row+"')");
          for (var i=1;i<count;i++){
            td=document.getElementById("td_"+row+"_"+i);
            td.innerHTML=arrValues[(i-1)];
          }
        }
        else{
          alert("Erro: "+result);
        }
 
        Misc.MsgLoading("loading");
      }
    }
  };
 
  //submeter pedido por post
  http_request.open("POST", Misc.ServerFile, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", params.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(params);
 
}
 
/**
* Mostrar outra página
* Método estático class GridView
*
* @param int page
*/
GridView.jxGotoPage = function(page){
  Misc.MsgLoading("loading");
  url = Misc.AntiCacheRand(Misc.ServerFile+"?accao=goto_page&page="+page);
  Misc.createHttpRequest();
 
  http_request.onreadystatechange = function() {
    var state=http_request.readyState;
 
    if(state==4){//completo
      if (http_request.status == 200){ //pedido respondido com sucesso
        var div=document.getElementById("content");
        div.innerHTML=http_request.responseText;
        Misc.MsgLoading("loading");
      }
    }
  };
  http_request.open("GET", url, true);
  http_request.send(null);
}
// fim class GridView
 
 
/**
* Class responsável pela criação de objectos html
*
* @param String id -> nome do objecto
*/
function HTMLControl(id){
  this.id=id;
 
  /**
  * Construir imagem
  *
  * @param String src
  * @param String title
  * @param int width
  * @param int height
  * @return String
  */
  this.DoImage = function(src, title, width, height){
    title=" title=\""+title+"\" alt=\""+title+"\" ";
    return "<img src=\""+src+"\" width=\""+width+"\" height=\""+height+"\" "+this.GetID()+title+" />";
  };
 
  /**
  * Construir anchor
  *
  * @param String text -> Texto
  * @param String link -> Link
  * @return String
  */
  this.DoHref = function(text, link){
    return "<a href=\"#\" onclick=\""+link+"\" alt=\""+text+"\" title=\""+text+"\" "+this.GetID()+">"+text+"</a>"
  };
 
  /**
  * Construir campo de texto
  *
  * @param String value -> valor do campo
  * @return String
  */
  this.DoTextField = function(value){
    var size=" size =\""+value.length+"\" ";
    return "<input type=\"text\" value=\""+value+"\" "+this.GetID()+size+">";
  };
 
  /**
  * Gerar atributos name e id
  *
  * @return String
  */
  this.GetID = function(){
    return " name=\""+this.id+"\" id=\""+this.id+"\" ";
  };
};
//fim class HTMLControl
 
 
/**
* Class Misc - possui vários métodos/ propriedades estáticos comuns
*/
function Misc(){}
 
// ficheiro que vai responder aos pedidos
Misc.ServerFile = "ajax.php";
 
/**
* Método estático class Misc
* Hack IE para ultrapassar problema cache pedidos get
*/
Misc.AntiCacheRand = function (aurl) {
  var rnd=encodeURI(Math.random());
  aurl+=(aurl.indexOf("?")>= 0)?"&foo="+rnd:"?foo="+rnd;
  return aurl;
};
 
/**
* Método estático class Misc
* Mensagem a mostrar ao utilizador enquanto
* a informação estiver a ser carregada
*/
Misc.MsgLoading = function(div_name){
  var div=document.getElementById(div_name);
 
  if(div.style.display!="block"){
    var msg_loading="A carregar informação ...";
    var html=new HTMLControl("loading_bar");
    div.innerHTML=html.DoImage("loading_bar.gif",msg_loading,70,10);
    div.style.display="block";
  }
  else{
    div.style.display="none";
  }
};
 
/**
* Método estático class Misc
* Criar request
*/
Misc.createHttpRequest = function(){
  if (window.XMLHttpRequest){ // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
 
    if (http_request.overrideMimeType){
      http_request.overrideMimeType('text/html');
    }
  }
  else if (window.ActiveXObject){ // IE
    try{http_request = new ActiveXObject("Msxml2.XMLHTTP");}
    catch (e){
      try{http_request = new ActiveXObject("Microsoft.XMLHTTP");}
      catch (e) {}
    }
  }
 
  if (!http_request){
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }
};
//fim class Misc

<?php
// ficheiro responsável pela comunicação com a base de dados
// e devolve as respostas aos pedidos
 
include_once("gridview_functions.php");
 
$accao=$_REQUEST["accao"];
 
if($accao=="get_values"){
  $id=$_GET["id"];
  if(!$id){
    echo "";
    return;
  }
  else{
    echo JSONGetRowValues($id);
  }
}
else if($accao=="set_values"){
  $arr=array();
  foreach ($_POST as $key=>$value){
    if(strstr($key,"field_")){
      array_push($arr,$value);
    }
  }
  echo SaveRecord($arr);
}
else if($accao=="goto_page"){
  $page=$_GET["page"];
  echo utf8_encode(DoGridView($page,GRIDVIEW_NAME,GRIDVIEW_CLASS_TABLE,GRIDVIEW_CLASS_HEADER,
                  GRIDVIEW_CLASS_CELL,GRIDVIEW_CLASS_ALTERNATE_CELL));
}
?>

<?php 
  include_once("gridview_functions.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
    <div class="container" id="container">
      <div class="loading" id="loading" /></div>
      <div class="content" id="content"><!-- inicio content -->
      <?php
      echo DoGridView(1,GRIDVIEW_NAME,GRIDVIEW_CLASS_TABLE,GRIDVIEW_CLASS_HEADER,
                      GRIDVIEW_CLASS_CELL,GRIDVIEW_CLASS_ALTERNATE_CELL);
      ?>
      </div><!-- fim content -->
    </div>
  </body>
</html>