<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Construir uma Gridview ⁄ >




clicks: 12697 12697 2007-07-27 2007-07-27 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This



Um dos objectivos da gridview é a listagem/edição rápida de informação ao utilizador, podendo por ex. visualizar vários dados ao mesmo tempo, por ex. uma lista de contactos, lista de tarefas, you name it ... Como é bastante explicito no titulo :) vou tentar demonstrar como construir uma simples gridview, que irá permitir listar registos (neste snippet são registos com dados de empresas), editá-los e actualizá-los. Como o que se pretende é percorrer todos os registos da nossa tabela, também foi implementada uma barra de navegação que vai dividindo os registos por páginas, visto que seria pouco funcional se por ex. tivessemos uma tabela com 500 registos, mostrar esses registos todos seria complicado, sem um scroll gigantesco ;)




Para a construção deste snippet foi usado como linguagem server-side, o PHP; irá também ser usado o AJAX (para evitar os postbacks poucos estéticos e aproveitar o hype;)) e JSON.



O JSON (JavaScript Object Notation - is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate ...) vai ser utilizado para obter da tabela a informação e o nome dos campos que vão ser gerados (mais lá para a frente a olharem para o código percebem a explicação), se quiserem (caso ainda não saibam) mais informações sobre o JSON, podem consultar este link, mas fazendo uma busca no Google o que não vai faltar é informação), recomendo que pelo menos deiam uma vista de olhos. Não sendo, obviamente, necessário recorrer ao JSON, apenas o usei para demonstrar algumas das capacidades do JSON, embora que neste snippet seja o básico.

O PHP irá efectuar as operações que tiver e irá retornar as informações no formato JSON, a informação retornada irá depois ser "convertida" (à falta de melhor termo) para javascript usando a função "eval", sendo que o AJAX será a tecnologia responsável para fazer o elo de ligação, isto é, irá ser feito um pedido assincrono ao servidor que irá retornar a informação no tal formato JSON, que posteriormente irá ser tratado em conformidade com as necessidades pelo javascript.

Um exemplo do formato JSON que irá ser retornado será este:

  1. ({"informacoes":
  2. [
  3. {
  4. "field": "field_61_1",
  5. "value": "61"
  6. },
  7. {
  8. "field": "field_61_2",
  9. "value": "Nome de Teste 1"
  10. },
  11. {
  12. "field": "field_61_3",
  13. "value": "Empresa de Teste 1"
  14. },
  15. {
  16. "field": "field_61_4",
  17. "value": "Morada da Empresa de Teste 1"
  18. },
  19. {
  20. "field": "field_61_5",
  21. "value": "1000-001"
  22. },
  23. {
  24. "field": "field_61_6",
  25. "value": "Localidade da Empresa 1"
  26. },
  27. {
  28. "field": "field_61_7",
  29. "value": "216464645"
  30. }
  31. ]
  32. });



Olhando para o código podemos ver que existe um objecto, "informacoes", que possui vários "registos", sendo que cada registo é constituido por dois campos/ propriedades: "field" e "value" (o significado destes campos será explicado mais adiante).

Ficheiro css de exemplo: style.css
  1. /****** <layout> ******/
  2. body{
  3. font-family: Tahoma, Verdana, Arial, sans-serif;
  4. font-size: 8pt;color: #000000;margin: 2px;
  5. padding: 0;background: #6E726C;text-align: center;
  6. }
  7. div.container{
  8. position: relative;clear: both;width: auto;height: auto;
  9. margin: 0px;padding: 1px;background: #ffffff;color: #000000;
  10. text-align: left;border: 1px solid #004080;
  11. }
  12. div.content{position: static;overflow: auto;width: auto;}
  13. div.loading{
  14. border: 1px solid #FF6600; width: auto;
  15. text-align:center; display:none;z-index: 100;
  16. background: #0080C0; color: #000;
  17. position:absolute; top:50%; left:50%;
  18. margin: -25px auto auto -50px; padding: 2px;
  19. }
  20. /****** <layout /> ******/
  21.  
  22. /****** <tabela> ******/
  23. td.header{background-color: #004080;color:#ffffff;font-weight:bold;text-align:center;}
  24. td.footer{background-color: #0080C0;color:#ffffff;font-weight:normal;text-align:center;}
  25. td.cell{background-color: #C3C3C3;color:#000;}
  26. td.alternate_cell{background-color: #E1E1E1;color:#000;}
  27. table.main_tbl{border: solid 1px #004080; padding: 1px; border-spacing: 1px; width:100%;}
  28. /****** <tabela /> ******/
  29.  
  30. /****** <input> ******/
  31. select, textarea, input{
  32. background-color: #FFCC66;color: #000000;font-size: 8pt;
  33. font-family: Tahoma, Verdana, Arial, sans-serif;
  34. border: 1px solid #004080;padding-left: 1px;
  35. }
  36. select:hover, textarea:hover, input:hover{background-color: #FFCC99;color: #000;border-color:#0080C0;}
  37. select:focus, textarea:focus, input:focus{background-color: #0080C0;color: #fff;border-color:#fff;}
  38. /****** <input /> ******/
  39.  
  40. /****** <paginacao> ******/
  41. .pages{padding: 0;margin: auto auto auto 12px;}
  42. .pages a, .pages span{
  43. display: block;margin: 1px; width:16px; height: 13px; float: left;
  44. padding: 0.2em 0.5em;border: 1px solid #666;background: #fff;
  45. }
  46. .pages span.current{background: #FF7F55;color: #fff;}
  47. .pages a{text-decoration: none;}
  48. .pages a:hover{background: #FF6600;color: #fff;}
  49. .pages a.current{background: #FF7F55;color: #fff;}
  50. .pages a.current:hover{color: #FFFF99;}
  51. /****** <paginacao /> ******/
  52.  
  53. /****** <misc> ******/
  54. a{color: #FF5500;text-decoration: underline;}
  55. a:hover{color: #0080D5;text-decoration: none;}
  56. img{border: none;}
  57. /****** <misc /> ******/




Mas e que tal cortar etapas e mostrar já o resultado final?! [SPOILER ALERT! :-D]

Cá vão dois screenshots para mostrar que por incrivel que possa parecer, isto até vai funcionar! :-D










Comecemos então por mostrar o ficheiro que vai conter as algumas definições da gridview: settings.inc

Chamo a especial atenção para a função __GetArrayFields(), é nesta função que vamos definir quais os campos (e as suas respectivas descrições que vamos escolher da tabela para que a gridview seja preenchida), i.e., basta só alterar esta função para que possam facilmente adicionar ou remover campos à gridview!

  1. <?php
  2. //definições de ligação à bd
  3. define("DB_SERVER","servername");
  4. define("DB_USERNAME","username");
  5. define("DB_PASSWORD","password");
  6. define("DB_NAME","database");
  7. define("TBL_DADOS","table");
  8.  
  9. //paginação
  10. define("PER_PAGE","20");
  11. define("LNG_PAGINACAO_PAGINA","Página");
  12. define("LNG_PAGINACAO_DE","de");
  13. define("LNG_PAGINACAO_SELECIONADA","(selecionada)");
  14.  
  15. //gridview
  16. define("GRIDVIEW_NAME","gridview_demo");
  17. define("GRIDVIEW_CLASS_TABLE","main_tbl");
  18. define("GRIDVIEW_CLASS_HEADER","header");
  19. define("GRIDVIEW_CLASS_FOOTER","footer");
  20. define("GRIDVIEW_CLASS_CELL","cell");
  21. define("GRIDVIEW_CLASS_ALTERNATE_CELL","alternate_cell");
  22.  
  23. /**
  24. * Campos da tabela
  25. *
  26. * @return Array
  27. */
  28. function __GetArrayFields(){
  29.  
  30. //formato:
  31. // "campo_base_dados"=>"Descrição do campo da base de dados"
  32.  
  33. return array(
  34. "pk_cliente"=>"ID","nome"=>"Nome","empresa"=>"Empresa","morada"=>"Morada",
  35. "cod_postal"=>"Código Postal","localidade"=>"Localidade","telefone"=>"Telefone"
  36. );
  37. }
  38. ?>




De seguida tempos o ficheiro gridview_functions.php que será o responsável por ex. pelos acessos à BD para obter ou actualizar informação, retornar a informação (por ex. no formato JSON), gerar a gridview, etc.

  1. <?php
  2. include_once("settings.inc");
  3.  
  4. /**
  5. * Construir Tabela
  6. *
  7. * @param String $name
  8. * @param String $tblClass
  9. * @param String $tdHeaderClass
  10. * @param String $tdCellClass
  11. * @param String $tdAlternateCellClass
  12. * @return String
  13. */
  14. function DoGridView($page,$name,$tblClass="",$tdHeaderClass="",$tdCellClass="",$tdAlternateCellClass=""){
  15. $const=get_defined_constants();
  16. if(!$page || $page<0 || !is_numeric($page)) $page=0; else $page--;
  17.  
  18. $tdAlternateCellClass=($tdAlternateCellClass)?$tdAlternateCellClass:$tdCellClass;
  19.  
  20. $db=connectDB();
  21. $iSQLFields=GenerateISqlFields();
  22. $beginAt=$page*$const['PER_PAGE'];
  23. $sql=mysql_query("
  24. Select $iSQLFields
  25. From `{$const['TBL_DADOS']}`
  26. Limit $beginAt,{$const['PER_PAGE']}
  27. ");
  28. $arrContent=array();
  29. //guardar todo o conteúdo num array
  30. while($myrow=mysql_fetch_assoc($sql)){
  31. array_push($arrContent,$myrow);
  32. }
  33. mysql_close($db);
  34. $count=sizeof($arrContent);
  35.  
  36. //construir cabeçalho
  37. $arrHeader=$arrContent[0];
  38. $colspan=sizeof($arrHeader)+1;
  39. $i=0;
  40. $headerCell=DoTableCell("td_header_{$name}_0","&nbsp;",$tdHeaderClass);
  41. foreach ($arrHeader as $key=>$value){
  42. $i++;
  43. $headerCell.=DoTableCell("td_header_{$name}_$i",$key,$tdHeaderClass);
  44. }
  45. $rows=$headerCell;
  46. //
  47.  
  48. for($i=0;$i<$count;$i++){
  49. $auxArr=$arrContent[$i];
  50. $id_cell=0;
  51. $class=($i%2==0)?$tdCellClass:$tdAlternateCellClass;
  52.  
  53. foreach ($auxArr as $value){
  54. if($id_cell==0){ //1ª iteração, opção para editar
  55. $record_id=$value;
  56. $auxIdRow="{$name}_{$record_id}";
  57. $linkEdit=DoCustomHref("#","GridView.jxEditCell('$record_id','$auxIdRow')","Editar"); //link para editar
  58.  
  59. $cell=DoTableCell("td_{$name}_{$record_id}_0",$linkEdit,$class); //criar célula para editar
  60. }
  61.  
  62. //conteúdo das células
  63. $id_cell++;
  64. $content=($value)?$value:"&nbsp;";
  65.  
  66. $cell.=DoTableCell("td_{$name}_{$record_id}_{$id_cell}",$content,$class); //criar a céluca
  67. //
  68. }
  69.  
  70. $rows.=DoTableRow("tr_{$name}_$record_id",$cell); //criar a linha
  71. }
  72.  
  73. $rows.=DoPaginationBar($page,$colspan);
  74.  
  75. return DoTable($rows,$name,$tblClass); //construir e retornar a gridview
  76. }
  77.  
  78. /**
  79. * Construir Tabela
  80. *
  81. * @param String $rows
  82. * @param String $id
  83. * @param String $tblClass
  84. * @return String
  85. */
  86. function DoTable($rows,$id,$tblClass){
  87. if($tblClass) $tblClass="class=\"$tblClass\"";
  88. return "
  89. <table $tblClass name='$id' id='$id'>
  90. $rows
  91. </table>
  92. ";
  93. }
  94.  
  95. /**
  96. * Construir célula
  97. *
  98. * @param String $id
  99. * @param String $content
  100. * @param String $class
  101. * @return String
  102. */
  103. function DoTableCell($id, $content, $class="",$colspan=""){
  104. if($class) $class=" class=\"$class\" ";
  105. if($colspan) $colspan=" colspan=\"$colspan\" ";
  106. if(!$content) $content="&nbsp;";
  107. return "<td $class name=\"$id\" id=\"$id\" $colspan>$content</td>";
  108. }
  109.  
  110. /**
  111. * Construir linha
  112. *
  113. * @param String $id
  114. * @param String $td
  115. * @param String $class
  116. * @return String
  117. */
  118. function DoTableRow($id,$td,$class=""){
  119. if($class) $class=" class=\"$class\" ";
  120. return "<tr $class name=\"$id\" id=\"$id\">$td<tr>";
  121. }
  122.  
  123. /**
  124. * Construir href
  125. *
  126. * @param String $onclick
  127. * @param String $text
  128. * @param String $class
  129. * @return String
  130. */
  131. function DoCustomHref($link,$onclick,$text,$tooltip="",$class=""){
  132. if($class) $class=" class=\"$class\" ";
  133. if(!$tooltip) $tooltip=$text;
  134. return "<a href='$link' onclick=\"$onclick\" title=\"$tooltip\" $class>$text</a>";
  135. }
  136.  
  137. /**
  138. * Obter valores da tabela e devolver no formato JSON
  139. *
  140. * @param int $id
  141. * @return String
  142. */
  143. function JSONGetRowValues($id){
  144. $iSQLFields=GenerateISqlFields();
  145. $arrFields=__GetArrayFields();
  146. $count=sizeof($arrFields);
  147. $key=key($arrFields);
  148. $const=get_defined_constants();
  149.  
  150. $db=connectDB();
  151. $sql=mysql_query("
  152. Select $iSQLFields
  153. From `{$const['TBL_DADOS']}`
  154. Where `$key`=\"$id\"
  155. ");
  156. $myrow=mysql_fetch_array($sql);
  157.  
  158. $i=0;
  159. foreach ($arrFields as $key=>$value){
  160. $i++;
  161. $field="field_{$id}_{$i}";
  162. $value=utf8_encode($myrow["$value"]);
  163. $json.="
  164. {
  165. \"field\": \"$field\",
  166. \"value\": \"$value\"
  167. },";
  168. }
  169. $json=left($json,strlen($json)-1);
  170. $json="
  171. ({\"informacoes\":
  172. [$json
  173. ]
  174. });
  175. ";
  176. mysql_close($db);
  177. return $json;
  178.  
  179. }
  180.  
  181. /**
  182. * Guardar valores na tabela
  183. *
  184. * @param Array $arrValues
  185. * @return String
  186. */
  187. function SaveRecord($arrValues){
  188. $arrFields=__GetArrayFields();
  189. $const=get_defined_constants();
  190. $i=0;
  191.  
  192. foreach ($arrFields as $key=>$value){
  193. if(!$fldPK){
  194. $fldPK="`$key`";
  195. $fldPKValue="\"".mysql_escape_string($arrValues[0])."\"";
  196. }
  197. else{
  198. $str.="`$key`=\"".mysql_escape_string($arrValues[$i])."\",";
  199. }
  200. $i++;
  201. }
  202. $str=left($str,strlen($str)-1);
  203. $iSQL="Update {$const['TBL_DADOS']} set $str where $fldPK=$fldPKValue";
  204.  
  205. $db=connectDB();
  206. $str=(mysql_query($iSQL))?"success":"error";
  207. mysql_close($db);
  208.  
  209. return $str;
  210. }
  211.  
  212. /**
  213. * Ligação à bd
  214. *
  215. * @return
  216. */
  217. function connectDB(){
  218. $db = mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD);
  219. mysql_select_db(DB_NAME,$db) or die("<b><br/>Impossivel aceder á base de dados.</b><br/>");
  220. return $db;
  221. }
  222.  
  223. /**
  224. * Gerar parte da instrução sql respeitante
  225. * aos campos
  226. *
  227. * @return String
  228. */
  229. function GenerateISqlFields(){
  230. $arrFields=__GetArrayFields();
  231. foreach ($arrFields as $key=>$value){
  232. $iSQLFields.="`$key` as `$value`,";
  233. }
  234. return left($iSQLFields,strlen($iSQLFields)-1);
  235. }
  236.  
  237. function DoPaginationBar($page,$colspan){
  238. $db=connectDB();
  239. $const=get_defined_constants();
  240.  
  241. $iSQL="Select count(*) From `{$const['TBL_DADOS']}`";
  242. $sql=mysql_query($iSQL);
  243. $myrow=mysql_fetch_array($sql);
  244. $numRegs=$myrow[0];
  245. if ($numRegs>$const['PER_PAGE']){ //caso o número de registos seja > perPage, constrói a barra, c.c., não
  246. $regSplit=$numRegs/$const['PER_PAGE'];
  247. if($numRegs%$const['PER_PAGE']>0) $regSplit++;
  248.  
  249. $numPagesTotal=intval($regSplit);
  250. $barraPaginacao="<div class='pages'>";
  251.  
  252. for ($i=1;$i<=$regSplit;$i++){
  253. $title="{$const['LNG_PAGINACAO_PAGINA']} $i {$const['LNG_PAGINACAO_DE']} $numPagesTotal";
  254. if ($i==$page+1){
  255. $title.="&nbsp;{$const['LNG_PAGINACAO_SELECIONADA']}";
  256. $barraPaginacao.=DoCustomHref("#","GridView.jxGotoPage('$i')",$i,$title,"current");
  257. }
  258. else{
  259. $barraPaginacao.=DoCustomHref("#","GridView.jxGotoPage('$i')",$i,$title);
  260. }
  261. }
  262. $barraPaginacao.="</div>";
  263. }
  264. mysql_close($db);
  265. return DoTableRow("",DoTableCell("pagination",$barraPaginacao,"footer",$colspan));
  266. }
  267.  
  268.  
  269. function left ($str, $howManyCharsFromLeft){return substr ($str, 0, $howManyCharsFromLeft);}
  270. ?>








O ficheiro ajax.js será o responsável pela comunicação com o servidor e processamento das respectivas respostas:

  1. var http_request = false;
  2.  
  3. /**
  4. * Class responsável pelo "manuseamento" da GridView
  5. *
  6. */
  7. function GridView(){}
  8. /**
  9. * Editar cell
  10. * Método estático class GridView
  11. *
  12. * @param int id -> id do registo
  13. * @param String row -> linha da tabela que vai ser editada
  14. */
  15. GridView.jxEditCell = function(id,row){
  16. Misc.MsgLoading("loading");
  17. url = Misc.AntiCacheRand(Misc.ServerFile+"?accao=get_values&id="+id);
  18. Misc.createHttpRequest();
  19.  
  20. http_request.onreadystatechange = function() {
  21. var state=http_request.readyState;
  22.  
  23. if(state==4){//completo
  24. if (http_request.status == 200){ //pedido respondido com sucesso
  25. var result=http_request.responseText;
  26. var json = eval(result); //"passar" a informação para json
  27. var count=json.informacoes.length
  28. var td, field, value;
  29.  
  30. td=document.getElementById("td_"+row+"_0");
  31.  
  32. var html=new HTMLControl("link_"+id);
  33. td.innerHTML=html.DoHref("Actualizar","GridView.jxUpdateData('"+json.informacoes[0].value+"','"+row+"')");
  34. for (var i=0;i<count;i++){ //preencher os campos
  35. field=json.informacoes[i].field;
  36. value=json.informacoes[i].value;
  37. td=document.getElementById("td_"+row+"_"+(i+1));
  38.  
  39. var html=new HTMLControl(field);
  40. td.innerHTML=html.DoTextField(value); //conteúdo da cell
  41. }
  42. Misc.MsgLoading("loading");
  43. }
  44. }
  45. };
  46. http_request.open("GET", url, true);
  47. http_request.send(null);
  48. }
  49.  
  50. /**
  51. * Actualizar valores
  52. * Método estático class GridView
  53. *
  54. * @param int id -> id do registo
  55. * @param String row -> linha da tabela que vai ser actualizada
  56. */
  57. GridView.jxUpdateData = function(id,row){
  58. Misc.MsgLoading("loading");
  59. var tr=document.getElementById("tr_"+row);
  60. var count=tr.cells.length;
  61. var params="", field, value;
  62. var arrValues=Array();
  63.  
  64. for (var i=1;i<count;i++){
  65. field="field_"+id+"_"+i;
  66. value=document.getElementById(field).value;
  67. params+=field+"="+escape(value)+"&";
  68. arrValues[(i-1)]=value;
  69. }
  70. params+="accao=set_values";
  71.  
  72. Misc.createHttpRequest();
  73. http_request.onreadystatechange = function() {
  74. var state=http_request.readyState;
  75.  
  76. if(state==4){//completo
  77. if (http_request.status == 200){ //pedido respondido com sucesso
  78. var result=http_request.responseText;
  79. var td;
  80.  
  81. if(result=="success"){
  82. td=document.getElementById("td_"+row+"_0");
  83. var html=new HTMLControl("link_"+i);
  84.  
  85. td.innerHTML=html.DoHref("Editar","GridView.jxEditCell('"+id+"','"+row+"')");
  86. for (var i=1;i<count;i++){
  87. td=document.getElementById("td_"+row+"_"+i);
  88. td.innerHTML=arrValues[(i-1)];
  89. }
  90. }
  91. else{
  92. alert("Erro: "+result);
  93. }
  94.  
  95. Misc.MsgLoading("loading");
  96. }
  97. }
  98. };
  99.  
  100. //submeter pedido por post
  101. http_request.open("POST", Misc.ServerFile, true);
  102. http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  103. http_request.setRequestHeader("Content-length", params.length);
  104. http_request.setRequestHeader("Connection", "close");
  105. http_request.send(params);
  106.  
  107. }
  108.  
  109. /**
  110. * Mostrar outra página
  111. * Método estático class GridView
  112. *
  113. * @param int page
  114. */
  115. GridView.jxGotoPage = function(page){
  116. Misc.MsgLoading("loading");
  117. url = Misc.AntiCacheRand(Misc.ServerFile+"?accao=goto_page&page="+page);
  118. Misc.createHttpRequest();
  119.  
  120. http_request.onreadystatechange = function() {
  121. var state=http_request.readyState;
  122.  
  123. if(state==4){//completo
  124. if (http_request.status == 200){ //pedido respondido com sucesso
  125. var div=document.getElementById("content");
  126. div.innerHTML=http_request.responseText;
  127. Misc.MsgLoading("loading");
  128. }
  129. }
  130. };
  131. http_request.open("GET", url, true);
  132. http_request.send(null);
  133. }
  134. // fim class GridView
  135.  
  136.  
  137. /**
  138. * Class responsável pela criação de objectos html
  139. *
  140. * @param String id -> nome do objecto
  141. */
  142. function HTMLControl(id){
  143. this.id=id;
  144.  
  145. /**
  146. * Construir imagem
  147. *
  148. * @param String src
  149. * @param String title
  150. * @param int width
  151. * @param int height
  152. * @return String
  153. */
  154. this.DoImage = function(src, title, width, height){
  155. title=" title=\""+title+"\" alt=\""+title+"\" ";
  156. return "<img src=\""+src+"\" width=\""+width+"\" height=\""+height+"\" "+this.GetID()+title+" />";
  157. };
  158.  
  159. /**
  160. * Construir anchor
  161. *
  162. * @param String text -> Texto
  163. * @param String link -> Link
  164. * @return String
  165. */
  166. this.DoHref = function(text, link){
  167. return "<a href=\"#\" onclick=\""+link+"\" alt=\""+text+"\" title=\""+text+"\" "+this.GetID()+">"+text+"</a>"
  168. };
  169.  
  170. /**
  171. * Construir campo de texto
  172. *
  173. * @param String value -> valor do campo
  174. * @return String
  175. */
  176. this.DoTextField = function(value){
  177. var size=" size =\""+value.length+"\" ";
  178. return "<input type=\"text\" value=\""+value+"\" "+this.GetID()+size+">";
  179. };
  180.  
  181. /**
  182. * Gerar atributos name e id
  183. *
  184. * @return String
  185. */
  186. this.GetID = function(){
  187. return " name=\""+this.id+"\" id=\""+this.id+"\" ";
  188. };
  189. };
  190. //fim class HTMLControl
  191.  
  192.  
  193. /**
  194. * Class Misc - possui vários métodos/ propriedades estáticos comuns
  195. */
  196. function Misc(){}
  197.  
  198. // ficheiro que vai responder aos pedidos
  199. Misc.ServerFile = "ajax.php";
  200.  
  201. /**
  202. * Método estático class Misc
  203. * Hack IE para ultrapassar problema cache pedidos get
  204. */
  205. Misc.AntiCacheRand = function (aurl) {
  206. var rnd=encodeURI(Math.random());
  207. aurl+=(aurl.indexOf("?")>= 0)?"&foo="+rnd:"?foo="+rnd;
  208. return aurl;
  209. };
  210.  
  211. /**
  212. * Método estático class Misc
  213. * Mensagem a mostrar ao utilizador enquanto
  214. * a informação estiver a ser carregada
  215. */
  216. Misc.MsgLoading = function(div_name){
  217. var div=document.getElementById(div_name);
  218.  
  219. if(div.style.display!="block"){
  220. var msg_loading="A carregar informação ...";
  221. var html=new HTMLControl("loading_bar");
  222. div.innerHTML=html.DoImage("loading_bar.gif",msg_loading,70,10);
  223. div.style.display="block";
  224. }
  225. else{
  226. div.style.display="none";
  227. }
  228. };
  229.  
  230. /**
  231. * Método estático class Misc
  232. * Criar request
  233. */
  234. Misc.createHttpRequest = function(){
  235. if (window.XMLHttpRequest){ // Mozilla, Safari,...
  236. http_request = new XMLHttpRequest();
  237.  
  238. if (http_request.overrideMimeType){
  239. http_request.overrideMimeType('text/html');
  240. }
  241. }
  242. else if (window.ActiveXObject){ // IE
  243. try{http_request = new ActiveXObject("Msxml2.XMLHTTP");}
  244. catch (e){
  245. try{http_request = new ActiveXObject("Microsoft.XMLHTTP");}
  246. catch (e) {}
  247. }
  248. }
  249.  
  250. if (!http_request){
  251. alert('Giving up :( Cannot create an XMLHTTP instance');
  252. return false;
  253. }
  254. };
  255. //fim class Misc



ajax.php

  1. <?php
  2. // ficheiro responsável pela comunicação com a base de dados
  3. // e devolve as respostas aos pedidos
  4.  
  5. include_once("gridview_functions.php");
  6.  
  7. $accao=$_REQUEST["accao"];
  8.  
  9. if($accao=="get_values"){
  10. $id=$_GET["id"];
  11. if(!$id){
  12. echo "";
  13. return;
  14. }
  15. else{
  16. echo JSONGetRowValues($id);
  17. }
  18. }
  19. else if($accao=="set_values"){
  20. $arr=array();
  21. foreach ($_POST as $key=>$value){
  22. if(strstr($key,"field_")){
  23. array_push($arr,$value);
  24. }
  25. }
  26. echo SaveRecord($arr);
  27. }
  28. else if($accao=="goto_page"){
  29. $page=$_GET["page"];
  30. echo utf8_encode(DoGridView($page,GRIDVIEW_NAME,GRIDVIEW_CLASS_TABLE,GRIDVIEW_CLASS_HEADER,
  31. GRIDVIEW_CLASS_CELL,GRIDVIEW_CLASS_ALTERNATE_CELL));
  32. }
  33. ?>




Finally, glueing all things, index.php

  1. <?php
  2. include_once("gridview_functions.php");
  3. ?>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
  6. <head>
  7. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  8. <script type="text/javascript" src="ajax.js"></script>
  9. </head>
  10. <body>
  11. <div class="container" id="container">
  12. <div class="loading" id="loading" /></div>
  13. <div class="content" id="content"><!-- inicio content -->
  14. <?php
  15. echo DoGridView(1,GRIDVIEW_NAME,GRIDVIEW_CLASS_TABLE,GRIDVIEW_CLASS_HEADER,
  16. GRIDVIEW_CLASS_CELL,GRIDVIEW_CLASS_ALTERNATE_CELL);
  17. ?>
  18. </div><!-- fim content -->
  19. </div>
  20. </body>
  21. </html>



Parabéns se ainda estás a ler isto!

Como podem ver pela 2ª imagem, cada vez que é efectuada uma operação é mostrado uma loading.

Quaquer erro/ dúvida, be my guest!









clicks: 12697 12697 2007-07-27 2007-07-27 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This