AJAX - I robi się kolorowo / Po stronie przeglądarki / Artykuły / Wortal / Home

Bardzo często przy moich projektach spotykam się z prośbą klienta o możliwość 'kolorowania' poszczególnych wierszy w tabeli (rekordów). Fajna sprawa - klient zaznacza jakieś ważna dla drugiej strony rekordy na czerwono i już jest wiadomo, że chodzi np. o szczególną uwagę. Jednak jest (był) mały problem - po każdorazowym pokolorowaniu wiersza tabeli trzeba było odświeżyć stronę. Na szczęście z pomocą mi przyszedł Nam AJAX. Oto co wykombinowałem:

Na początku potrzebujemy oczywiście advAJAX.

Przyda się także struktura bazy danych:

CREATE TABLE `kolory` (
  `ID` int(10) NOT NULL auto_increment,
  `Kolor` varchar(7) default NULL,
  `ID_rekord` int(10) default NULL,UNIQUE KEY `ID` (`ID`)
);

Teraz, gdy mamy odpowiednią tabelę dla naszych rekordów, a w niej pole `Kolor` możemy zabrać się za wyświetlenie tychże rekordów. Plik proba.php wygląda następująco:

<html>
<head>
</head>
<script>
function $(id) {
    return document.getElementById(id);
}

function okienko(strona) {
    window.open(strona, '', ' menubar=yes,toolbar=yes,location=yes,directories=yes,status=yes,scrollbars=yes,resizable=yes,fullscreen=no,channelmode=no,width=200,height=300,left=150,top=100');
}
</script>
<body>
<table border="1">

<?php
$dbhost = 'localhost';
$dblogin = 'root';
$dbhaslo = '';
$db = 'test';
mysql_connect($dbhost, $dblogin, $dbhaslo) or die("Nie masz uprawnien");
mysql_select_db($db);
for ($i=1; $i<10; $i++) {
    $query = "SELECT Kolor FROM kolory WHERE ID_rekord=$i LIMIT 1";
    $result = mysql_query($query);
    $row = mysql_fetch_array($result);
    $kolor = $row['Kolor'] ? $row['Kolor'] : '#723F42';
    echo "<tr id=\"tr$i\" style='background: $kolor'>";
    echo '<td>'.$i.'</td>';
    echo '<td>'.($i*2).'</td>';
    echo '<td>'.($i*3).'</td>';
    echo "<td><button onclick=\"okienko('paleta.php?id=".$i."');\"></button></td>";
    echo '</tr>';
}
?>
</table>
</body>
</html>

Chyba nic nadzwyczajnego, proste wyświetlanie rekordów w pętli for - idziemy dalej....plik paleta.php, który odpowiedzialny jest za pobranie koloru z palety:

<table width="50px;">
  <tr>
    <td bgcolor='#5478A4' onclick="wybierz_kolor('#5478A4');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#A534EF' onclick="wybierz_kolor('#A534EF');" style="curosr: hand;">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor='#84D6E2' onclick="wybierz_kolor('#84D6E2');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#19D2A5' onclick="wybierz_kolor('#19D2A5');" style="curosr: hand;">&nbsp;</td>
  </tr>
</table>

za 'dynamiczne' pokolowanie tabelki:

opener.$('tr<?echo $_GET['id'];>').style.background=kolor;

oraz zapisanie do bazy danych:

advAJAX.post({
          url : "zapisz_kolor.php",
          parameters:{
               kolor: kolor,
               id: '<?echo $_GET['id'];?>'
  },
  onSuccess : function(obj) {
  }
});

Cały plik wygląda następująco:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="advajax.js"></script>
<script>
function wybierz_kolor(kolor) {
    opener.$('tr<?echo $_GET['id'];?>').style.background=kolor;
    advAJAX.post({
            url : "zapisz_kolor.php",
            parameters: {
                kolor: kolor,
                id: '<?echo $_GET['id'];?>'
            },
            onSuccess : function(obj) {
            }
   })
;}
</script>
<table width="50px;">
  <tr>
    <td bgcolor='#5478A4' onclick="wybierz_kolor('#5478A4');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#A534EF' onclick="wybierz_kolor('#A534EF');" style="curosr: hand;">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor='#84D6E2' onclick="wybierz_kolor('#84D6E2');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#19D2A5' onclick="wybierz_kolor('#19D2A5');" style="curosr: hand;">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Oczywiście możemy użyć dowolnej innej palety kolorów.

Pozostaje już tylko plik zapisujący dane do bazy. zapisz_kolor.php:

$dbhost = 'localhost';
$dblogin = root;
$dbhaslo = '';
$db = 'test';
mysql_connect($dbhost, $dblogin, $dbhaslo) or die("Nie masz uprawnien");
mysql_select_db($db);
$kolor = mysql_escape_string($_POST['kolor']);
$rekord = (int)$_POST['id'];
$query = "SELECT * FROM kolory WHERE ID_rekord=$rekord LIMIT 1;";
$result = mysql_query($query);
if (mysql_affected_rows()>0) {
    $query = "UPDATE kolory SET Kolor='$kolor' WHERE ID_rekord=$rekord;";
} else {
    $query = "INSERT INTO kolory (Kolor, ID_rekord) VALUES ('$kolor',$rekord);";
}
$result = mysql_query($query);
mysql_close();

Jestem pewien, że przerobienie tego dla własnych potrzeb będzie tylko formalnością.

Kategorie

Spis treści

O autorze

Reklama

Podobne Artykuły

Nowe artykuły

AJAX - I robi się kolorowo